延展操作符...的使用
展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。(译者注: 字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式)。
在函数调用时使用
如果想将数组元素迭代为函数参数，一般使用Function.prototype.apply的方式进行调用。
1function sum(x,y,z){
2 return x+y+z;
3}
4const numbers=[1,2,3];
5//apply
6console.log(sum.apply(null,numbers));//6
7//...
8console.log(sum(...numbers));//6构造字面量数组时使用
没有展开语法的时候，只能组合使用push、splice、concat等方法，来将已有数组元素变成新数组的一部分。有了展开语法, 通过字面量方式, 构造新数组会变得更简单、更优雅：
1var parts=['shoulders','knees'];
2var lyrics=['head',...parts,'and','toes'];
3// ["head", "shoulders", "knees", "and", "toes"]数组拷贝（浅拷贝）
1var arr=[1,2,3];
2var arr2=[...arr];//like arr.slice()
3arr2.push(4);//[1,2,3,4]
4//arr不受影响连接多个数组
Array.concat函数常用于将一个数组连接到另一个数组的后面。如果不使用展开语法, 代码可能是下面这样的:
1var arr1 = [0, 1, 2];
2var arr2 = [3, 4, 5];
3// 将 arr2 中所有元素附加到 arr1 后面并返回
4var arr3 = arr1.concat(arr2);使用展开语法：
1var arr1 = [0, 1, 2];
2var arr2 = [3, 4, 5];
3var arr3 = [...arr1, ...arr2];构造字面量对象时使用展开语法
将已有对象的所有可枚举(enumerable)属性拷贝到新构造的对象中。浅拷贝(Shallow-cloning, 不包含 prototype) 和对象合并, 可以使用更简短的展开语法。而不必再使用 Object.assign() 方式.
注意： Object.assign() 会触发setter，而展开语法不会。
1var obj1 = { foo: 'bar', x: 42 };
2var obj2 = { foo: 'baz', y: 13 };
3
4var clonedObj = { ...obj1 };
5// 克隆后的对象: { foo: "bar", x: 42 }
6
7var mergedObj = { ...obj1, ...obj2 };
8// 合并后的对象: { foo: "baz", x: 42, y: 13 }在new表达式中应用
使用 new 关键字来调用构造函数时，不能直接使用数组+ apply 的方式（apply 执行的是调用 [[Call]] , 而不是构造 [[Construct]]）。当然, 有了展开语法, 将数组展开为构造函数的参数就很简单了：
1var dateFields = [1970，0，1]; // 1970年1月1日
2var d = new Date（... dateFields）;本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-12-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录