这篇“ES6扩展运算符如何使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“ES6扩展运算符如何使用”文章吧。
创新互联成立于2013年，先为东昌等服务建站，东昌等地企业，进行企业商务咨询服务。为东昌企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
spread和rest运算符在ES6中，都用(...)表示，其中spread为扩展(展开)运算符，rest为剩余(收集)运算符。在不同的地方使用此运算符有不同的作用，可以从读和写两个角度考虑。其中写操作有收集作用，读操作有展开作用。在ES6中，(...)运算符只对数组有效，ES7中添加了对对象的扩展。
在没有时使用(...)运算符时，要实现一个求和的功能函数，传入的参数不定，只能使用arguments。例如：
function sum(){
let sumNumber=0;
for(let i=0;i当使用rest运算符时，我们的代码可以简洁很多：
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此时传入的参数将会被写入到arg中，并且形成一个数组。我们可以打印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]如果我们传入的参数有必须要传入的项，我们可以在形参的最后一位使用rest运算符：
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]可以看到输出的a,b为实参的前两项，后面传入的参数都被转化为数组存入到arg中。
spread运算符（展开作用）
let arr=[1,2,3,4,5];
console.log(arr); //(5) [1, 2, 3, 4, 5]
console.log(...arr); // 1 2 3 4 5
可以看到，当使用了(...)运算符时，它会将数组展开并输出。
当我们想将数组合并时，传统的做法：
let arr1=[1,2,3];
let arr2=[5,6,7,8];
let arr3=[].arr3.concat(arr1,arr2); //相当于let arr3=new Array();arr3.concat(arr1,arr2);
console.log(arr3); //(7) [1, 2, 3, 5, 6, 7, 8]
使用(...)运算符的做法：
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]
我们来看看它是怎么实现的，我们可以使用babel来将ES6语法转换为ES5:
"use strict";
var arr1 = [1, 2, 3];
var arr2 = [5, 6, 7, 8];
var arr3 = [].concat(arr1, arr2);
可以看到它的实现原理也是数组的concat方法。所以(...)运算符是一个语法糖，不会影响原来的功能。
对象的扩张运算符
浅克隆
在ES7中，(...)运算符支持对对象的扩张。
let school={
name:"xxx大学"，
history:"50"
};
let teacher={
leader:{
name:"xx校长"，
age:"40",
},
personNum:60
};我们如果想要将上述对象克隆到另一个对象中，传统的做法是自己写一个clone函数，或者使用jQuery中的extend方法。现在我们只需要使用(...)运算符即可完成。
let obj={
...school,
...teacher
}
console.log(obj); /* Object
history: "50"
leader: {name: "xx校长", age: "40"}
name: "xxx大学"
personNum: 60
__proto__: Object*/可以看到，使用(...)运算符可以轻易的完成克隆，但此克隆是一个浅克隆。例如：
obj.leader.name="xxx";
console.log(obj); /*history: "50"
leader: {name: "xxx", age: "40"}
name: "xxx大学"
personNum: 60
__proto__: Object */
console.log(teacher); /*leader: {name: "xxx", age: "40"}
personNum: 60
__proto__: Object */在ES6中也有一个浅克隆的方法：Object.assign({ },obj1,obj2,...)
它会将后面的对象克隆到第一个对象里。
let school={
name:"xxx大学"，
history:"50"
};
let teacher={
leader:{
name:"xx校长"，
age:"40",
},
personNum:60
};
let obj={};
Object.assign(obj,school,teacher);
console.log(obj); /*history: "50"
leader: {name: "xx校长", age: "40"}
name: "xxx大学"
personNum: 60
__proto__: Object*/可以看到也完成了克隆。
深克隆
当我们修改obj中leader的name值时，原来teacher对象中相应的值也发生了改变。如果想要实现深克隆，我们可以对修改一下上述代码：
let school={
name:"xxx大学"，
history:"50"
};
let leader={
name:"xx校长"，
age:"40",
}
let teacher={
leader:{
...leader
}
personNum:60
};
let obj={
...school,
...teacher,
leader:{
...leader
}
}
console.log(obj); /*history: "50"
leader: {name: "xx校长", age: "40"}
name: "xxx大学"
personNum: 60
__proto__: Object*/
obj.leader.name="xxx";
cosnole.log(obj); /*history: "50"
leader: {name: "xxx", age: "40"}
name: "xxx大学"
personNum: 60
__proto__: Object*/
console.log(leader);. /*age: "40"
name: "xx校长"
__proto__: Object*/
console.log(teacher); /*leader: {name: "xx校长", age: "40"}
personNum: 60
__proto__: Object*/可以看到，我们改变了obj中leader的name值，只在obj对象中发生了改变，teacher对象和leader对象并没有发生改变。
如果有很多层的引用值，并不推荐此方法，可以自己书写一个深克隆方法，当然也有另一个方法，比较另辟蹊径。可以使用JSON先将要克隆的对象转化为一个字符串，然后再转化为对象，这样新得到的对象和原来得对象也没有关系。
let teacher={
leader:{
name:"xx校长",
age:"40",
}
personNum:60
};
let obj=JSON.parse(JSON.stringify(teacher));
console.log(obj); /*leader: {name: "xx校长", age: "40"}
personNum: 60
__proto__: Object*/
obj.leader.name="xxx";
console.log(obj.leader.name); //"xxx"
console.log(teacher.leader.name); //"xx校长"但是这个方法对含有函数(function())、正则(reg)、特殊对象(new Data())的对象进行克隆时，会丢失上面所说的属性。如果没有上面的属性，可以使用此方法。
以上就是关于“ES6扩展运算符如何使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。
分享名称：ES6扩展运算符如何使用
标题URL：http://bjjierui.cn/article/igjpei.html
