What are the spread and rest operators
In ES6, both spread and rest operators are represented by (...), where spread is the extension (expand) operator and rest is the remaining (collect) operator. Using this operator in different places has different functions and can be considered from the perspective of reading and writing. Among them, the write operation has the function of collecting and the read operation has the function of expanding. In ES6, the (...) operator is only valid for arrays, and an extension to the object is added in ES7.
Extended operators for arrays
rest operator (collect function)
When using the (...) operator when there is no such thing as not, to implement a sum function function, the parameters passed are not determined, and only arguments can be used. For example:
function sum(){
let sumNumber=0;
for(let i=0;i<;i++){
sumNumber += arguments[i];
}
return sumNumber;
}
(sum(1,2,3)); //6
(sum(4,5,6,7,8)); //30
When using the rest operator, our code can be much simpler:
function sum(...arg){
let sumNumber=0;
(function(ele){
sumNumber+=ele;
})
return sumNumber;
}
(sum(1,2,3)); //6
(sum(4,5,6,7,8)); //30
At this time, the passed parameters will be written into the arg and an array will be formed. We can print arg:
function sum(...arg){
(arg);
}
(sum(1,2,3)); // (3) [1, 2, 3]
(sum(4,5,6,7,8)); //(5) [4, 5, 6, 7, 8]
If the parameter we pass in has items that must be passed in, we can use the rest operator at the last bit of the formal parameter:
function test(a, b, ...arg) {
(a,b,arg);
}
test(1,2,3,4,5,6,7,8);//1 2 (6) [3, 4, 5, 6, 7, 8]
You can see that the output a and b are the first two items of the actual parameters, and the parameters passed in the following are converted into arrays and stored in arg.
spread operator (expanding function)
let arr=[1,2,3,4,5]; (arr); //(5) [1, 2, 3, 4, 5] (...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 combine arrays, the traditional approach is:
let arr1=[1,2,3]; let arr2=[5,6,7,8]; let arr3=[].(arr1,arr2); //Equivalent to let arr3=new Array();(arr1,arr2);(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]; (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 arrays. So the (...) operator is a syntax sugar that will not affect the original function.
Object expansion 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 way is to write a clone function yourself, or use the extend method in jQuery. Now we just need to use the (...) operator to complete it.
let obj={
...school,
...teacher
}
(obj); /* Object
history: "50"
leader: {name: "Principal xx", age: "40"}
name: "xxx University"
personNum: 60
__proto__: Object*/
As you can see, the cloning can be easily completed using the (...) operator, but this clon is a shallow clon. For example:
="xxx";
(obj); /*history: "50"
leader: {name: "xxx", age: "40"}
name: "xxx University"
personNum: 60
__proto__: Object */
(teacher); /*leader: {name: "xxx", age: "40"}
personNum: 60
__proto__: Object */
There is also a shallow cloning method in ES6: ({ },obj1,obj2,...)
It clones the following object into the first object.
let school={
name:'xxx University'，
history:'50'
};
let teacher={
leader:{
name:'Principal xx'，
age:'40',
},
personNum:60
};
let obj={};
(obj,school,teacher);
(obj); /*history: "50"
leader: {name: "Principal xx", age: "40"}
name: "xxx University"
personNum: 60
__proto__: Object*/
You can see that the cloning has also been completed.
Deep cloning
When we modify the name value of the leader in obj, the corresponding value in the original teacher object also changed. If you want to implement 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
}
}
(obj); /*history: "50"
leader: {name: "Principal xx", age: "40"}
name: "xxx University"
personNum: 60
__proto__: Object*/
="xxx";
(obj); /*history: "50"
leader: {name: "xxx", age: "40"}
name: "xxx University"
personNum: 60
__proto__: Object*/
(leader);. /*age: "40"
name: "Principal xx"
__proto__: Object*/
(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, and only changed in the obj object, and the teacher object and the 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, which is a different way. You can use JSON to convert the object to be cloned into a string, and then convert it into an object, so that the newly obtained object has nothing to do with the original object.
let teacher={
leader:{
name:'Principal xx',
age:'40',
}
personNum:60
};
let obj=((teacher));
(obj); /*leader: {name: "Principal xx", age: "40"}
personNum: 60
__proto__: Object*/
="xxx";
(); //"xxx"
(); //"Principal xx"
However, when this method clones an object containing a function (function()), regular (reg), and special object (new Data()), the properties mentioned above will be lost. If there is no attribute above, you can use this method.
Summarize
This is all about this article about ES6 extension operators. For more related ES6 extension operator content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!