# 展开语法(Spread syntax)
# 等价于apply的方式
如果想将数组元素迭代为函数参数,一般使用Function.prototype.apply
的方式进行调用。
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
1
2
3
2
3
有了展开语法,可以这样写:
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
1
2
3
2
3
所有参数都可以通过展开语法来传值,也不限制多次使用展开语法。
function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);
1
2
3
2
3
# 在 new 表达式中应用
使用 new
关键字来调用构造函数时,不能直接使用数组+ apply
的方式(apply
执行的是调用 [[Call]]
, 而不是构造 [[Construct]]
)。当然, 有了展开语法, 将数组展开为构造函数的参数就很简单了:
var dateFields = [1970, 0, 1]; // 1970年1月1日
var d = new Date(...dateFields);
1
2
2
# 构造字面量数组
# 构造新数组
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]
1
2
3
2
3
# 数组拷贝(copy)
var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);
// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响
1
2
3
4
5
6
2
3
4
5
6
# 连接多个数组
Array.concat
函数常用于将一个数组连接到另一个数组的后面。如果不使用展开语法, 代码可能是下面这样的:
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将 arr2 中所有元素附加到 arr1 后面并返回
var arr3 = arr1.concat(arr2);
1
2
3
4
2
3
4
使用展开语法:
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];
1
2
3
2
3
Array.unshift
方法常用于在数组的开头插入新元素/数组. 不使用展开语法, 示例如下:
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将 arr2 中的元素插入到 arr1 的开头
Array.prototype.unshift.apply(arr1, arr2) // arr1 现在是 [3, 4, 5, 0, 1, 2]
1
2
3
4
2
3
4
如果使用展开语法, 代码如下: [请注意, 这里使用展开语法创建了一个新的 arr1
数组, Array.unshift
方法则是修改了原本存在的 arr1
数组]:
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 现在为 [3, 4, 5, 0, 1, 2]
1
2
3
2
3
# 构造字面量对象
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };
// 克隆后的对象: { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8