展开语法(Spread syntax), 可以在函数调用/数组构造时, 将 数组表达式 或者 字符串在语法层面展开.
还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。
语法 :
函数调用:
myFunction(...iterableObj)
字面量数组构造或字符串:
[...iterableObj, '4', ...'hello', 6]
构造字面量对象时,进行克隆或者属性拷贝(ECMAScript 2018规范新增特性):
let objClone = { ...obj }
使用 :
1. 参数使用
方法传入3个参数然后计算和
function sum(x, y, z) {
return x + y + z;
}
传入一个数组
const args= [1, 2, 3];
作参数, 我们可以用 apply 实现
sum.apply(null, args);
为了让代码更简洁,可以用延展符
sum(...args);
2. 数组使用
数组合并
合并数组的方法有很多,常用的是 concat()
var arr1 = [1,2]
var arr2 = [3,4]
arr1 = arr1.concat(arr2)
需要注意的是,concat
是返回一个新的数组,并非修改原数组,所以还需要去接收返回值。
然而用 push
(向数组的末尾添加一个或多个元素)结合展开运算符是能直接修改原数组的,
arr1 = arr1.push(...arr2)
// 等同于
arr1 = [...arr1, ...arr2]
或者追加到数组的开头
arr1.unshift(...arr2)
把新数组添加到任意位置
var arr2 = [3, ...arr1, 4]
非常灵活方便。
上面提到的
push()
方法实际上是属于一类可接收任意数量参数的方法,而此类方法均可以使用展开运算符
比如 Math.min()
var nums = [4, 5, 3, 1]
Math.min(...nums)
数组拷贝
var arr1 = [1,2]
var arr2 = [...arr1]
注意,这里实际上只拷贝了一层,属于浅拷贝,数组中的对象仍然是拷贝的引用。
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 }