Examples of using the ES6 spread operator

What are spread and rest operators?

In ES6, the spread and rest operators are both represented by (...), where spread is the expansion operator and rest is the remaining (collection) operator. Using this operator in different places has different effects, which can be considered from the perspectives of reading and writing. The write operation has a collecting function, and the read operation has an expanding function. In ES6, the (...) operator only worked on arrays, and ES7 added an extension to objects.

Array spread operator

rest operator (collection function)

When the (...) operator is not used, a sum function is implemented. The parameters passed in are uncertain and only arguments can be used. For example:

function sum(){
	let sumNumber=0;
    for(let i=0;i<arguments.length;i++){
        sumNumber += arguments[i];
    }
    return sumNumber;
}
console.log(sum(1,2,3)); //6
console.log(sum(4,5,6,7,8)); //30

When using the rest operator, our code can be much simpler:

function sum(...arg){
	let sumNumber=0;
   	arg.forEach(function(ele){
        sumNumber+=ele;
    })
    return sumNumber;
}
console.log(sum(1,2,3)); //6
console.log(sum(4,5,6,7,8)); //30

At this time, the parameters passed in will be written into arg and form an array. We can print arg:

function sum(...arg){
    console.log(arg);
}
console.log(sum(1,2,3)); // (3) [1, 2, 3]
console.log(sum(4,5,6,7,8)); //(5) [4, 5, 6, 7, 8]

If the parameters we pass in have items that must be passed in, we can use the rest operator at the last position of the parameter:

function test(a, b, ...arg) {
	console.log(a,b,arg);
}
test(1,2,3,4,5,6,7,8); //1 2 (6) [3, 4, 5, 6, 7, 8]

It can be seen that the output a and b are the first two items of the actual parameters, and the parameters passed in later are converted into arrays and stored in arg.

spread operator

let arr = [1,2,3,4,5];
console.log(arr); //(5) [1, 2, 3, 4, 5]
console.log(...arr); // 1 2 3 4 5

As you can see, when the (...) operator is used, it expands the array and outputs it.

When we want to merge arrays, the traditional approach is:

let arr1=[1,2,3];
let arr2=[5,6,7,8];
let arr3=[].arr3.concat(arr1,arr2); //equivalent to let arr3=new Array();arr3.concat(arr1,arr2);
console.log(arr3); //(7) [1, 2, 3, 5, 6, 7, 8]

How to use the (...) operator:

let arr1=[1,2,3];
let arr2=[5,6,7,8];
let arr3=[...arr1,...arr2];
console.log(arr3); //(7) [1, 2, 3, 5, 6, 7, 8]

Let's see how it is implemented. We can use babel to convert ES6 syntax to ES5:

"use strict";

var arr1 = [1, 2, 3];
var arr2 = [5, 6, 7, 8];
var arr3 = [].concat(arr1, arr2);

It can be seen that its implementation principle is also the concat method of the array. So the (...) operator is a syntactic sugar and does not affect the original functionality.

Object spread operator

Shallow clone

In ES7, the (...) operator supports expansion of objects.

let school={	
    name:'xxx University',
    history:'50'
};
let teacher={
    leader:{
        name:'Principal xx',
        age:'40',
    },
    personNum:60
};

If we want to clone the above object into another object, the traditional approach is to write a clone function ourselves, or use the extend method in jQuery. Now we just need to use the (...) operator to complete it.

let obj = {
    ...school,
    ...teacher
}
console.log(obj); /* Object
					history: "50"
					leader: {name: "Principal xx", age: "40"}
					name: "xxx University"
					personNum: 60
					__proto__: Object*/

As you can see, cloning can be easily done using the (...) operator, but this clone is a shallow clone. For example:

obj.leader.name="xxx";
console.log(obj); /*history: "50"
					leader: {name: "xxx", age: "40"}
					name: "xxx University"
					personNum: 60
					__proto__: Object */
console.log(teacher); /*leader: {name: "xxx", age: "40"}
						personNum: 60
						__proto__: Object */

There is also a shallow clone method in ES6: Object.assign({ },obj1,obj2,...)

It will clone the latter object into the first one.

let school={	
    name:'xxx University',
    history:'50'
};
let teacher={
    leader:{
        name:'Principal xx',
        age:'40',
    },
    personNum:60
};
let obj={};
Object.assign(obj,school,teacher);
console.log(obj); /*history: "50"
					leader: {name: "Principal xx", age: "40"}
					name: "xxx University"
					personNum: 60
					__proto__: Object*/

You can see that cloning is also completed.

Deep Clone

When we modify the name value of leader in obj, the corresponding value in the original teacher object also changes. If we want to achieve deep cloning, we can modify the above code:

let school={	
    name:'xxx University',
    history:'50'
};
let leader={
     name:'Principal xx',
       age:'40',
}
let teacher={
    leader:{
        ...leader
    }
    personNum:60
};
let obj = {
    ...school,
    ...teacher,
    leader:{
        ...leader
    }
}

console.log(obj); /*history: "50"
					leader: {name: "Principal xx", age: "40"}
					name: "xxx University"
            		personNum: 60
					__proto__: Object*/

obj.leader.name="xxx";

cosnole.log(obj); /*history: "50"
					leader: {name: "xxx", age: "40"}
					name: "xxx University"
					personNum: 60
					__proto__: Object*/
console.log(leader);. /*age: "40"
						name: "Principal xx"
						__proto__: Object*/
console.log(teacher); /*leader: {name: "Principal xx", age: "40"}
						personNum: 60
						__proto__: Object*/

As you can see, we changed the name value of the leader in obj, but only the obj object was changed, while the teacher object and leader object did not change.
If there are many layers of reference values, this method is not recommended. You can write a deep cloning method yourself. Of course, there is another method that is more unconventional. You can use JSON to convert the object to be cloned into a string first, and then convert it into an object, so that the new object has nothing to do with the original object.

let teacher={
    leader:{
        name:'Principal xx',
       	age:'40',
    }
    personNum:60
};
let obj = JSON.parse(JSON.stringify(teacher));
console.log(obj); /*leader: {name: "Principal xx", age: "40"}
					personNum: 60
					__proto__: Object*/

obj.leader.name="xxx";

console.log(obj.leader.name); //"xxx"
console.log(teacher.leader.name); //"Principal xx"

However, when this method clones objects containing functions (function()), regular expressions (reg), and special objects (new Data()), the above-mentioned properties will be lost. If you don't have the above properties, you can use this method.

Summarize

This is the end of this article about ES6 spread operators. For more information about ES6 spread operators, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!