ES2015(ES6) 新增了一种 基本运算符——展开运算符 使用三个点 ... 表示

 

　　它的作用是在调用函数、数组构造时 将数组表达式或字符串在语法层面进行展开; 构建字面量的对象时以键值对的形式进行展开。

 

　　下面我们来看看它的基本用法：

 

　　// 展开基本的数组

 

　　const arr = ['apple','orange','banana'];

 

　　console.log(...arr);  // 'apple' 'orange' 'banana'

 

　　// 实时上上面的语句只是在语法层面展开了数组arr 让arr中的每一个元素作为log函数的参数

 

　　构建字面量语法的数组

 

　　通常情况下构建字面量结构的数组我们会使用如 push splice unshift concat 等函数将现有数组作为新数组的一部分。

 

　　展开运算符可以更简单快速的完成这项工作。

 

　　const arr1 = ['welcome','to'];

 

　　const arr2 = ['hello',...arr1,'here']; // ["hello", "welcome", "to", "here"]

 

　　链接数组

 

　　在拥有展开运算符以前 我们通常使用 concat 函数 进行数组的链接

 

　　const arr1 = [1,2,3];

 

　　const arr2 = [4,5];

 

　　const arr3 = arr1.concat(arr2); // [1,2,3,4,5]

 

　　数组拷贝

 

　　const arr1 = [1,2,3,4];

 

　　const arr2 = [...arr1]; // [1,2,3,4]

 

　　arr2.push(5,6); // 此时arr2 [1,2,3,4,5,6]    arr1的结果不变

 

　　​

 

　　const arr3 = [[1,2,3],[4,5,6]];

 

　　const arr4 = [...arr3];  // [[1,2,3],[4,5,6]];

 

　　arr4.pop().push(0);

 

　　// 执行后 arr4 [[1,2,3]]

 

　　// arr3 [[1,2,3],[4,5,6,0]]

 

　　从以上结果我们可以看出 展开运算符只遍历展开数组的第一层(浅拷贝)。 展开的结果如果是引用类型则不继续向下遍历。 事实上它的行为和 Object.assign() 是相同的

 

　　对象拷贝和合并

 

　　const obj1 = {username:'zhangsan',age:25};

 

　　const obj2 = {username:'wangwu',phone:13666666666}

 

　　​

 

　　// 使用展开运算符拷贝对象(浅拷贝)

 

　　const copyObj = { ...obj1 };   // { username:'zhangsan' , age:25 }

 

　　// 使用展开运算符合并对象

 

　　const mergeObj = { ...obj1,...obj2 }; // { username:'wangwu' , age:25 , phone:13666666666 }

 

　　使用展开运算符进行新对象构造 本质上是讲原有对象中的所有 可枚举 属性拷贝到新对象中； 与 Object.assign() 不同的是 Object.assign()会触发setters 展开运算符不会。

 

　　rest参数(剩余参数)

 

　　ES2015 引入 rest参数（语法为 ...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。 这个特性可以让我们在一些特定环境更方便的去处理参数(例如没有arguments的箭头函数)

 

　　let myFn = (...values) => {

 

　　console.log(values);

 

　　}

 

　　​

 

　　myFn(1,3,5); // output: [1,3,5]

 

　　我们也可以对部分参数使用rest参数，但是在rest参数后不能有其他参数(rest必须是最后一个参数)

 

　　let myFn = ( a, ...values ) => {

 

　　if(Array.isArray(a)){

 

　　values.forEach(el=>{

 

　　a.push(el);

 

　　});

 

　　}

 

　　}

 

　　​

 

　　let arr = [1,2,3];

 

　　myFn(arr,'ok','!');

 

　　// arr结果为 [1,2,3,'ok','!']

 

　　​

 

　　​

 

　　let testFn = (a, ...values , b) => {} // 报错

 

　　注意点: 在数组或函数参数中使用展开语法时, 只能用于 可迭代对象(支持 iterator)

 

　　let o = {username:'zhangsan'};

 

　　let arr = [...o];  // TypeError: o is not iterable

 

　　如何讲清楚函数防抖？