ES6 展开语法

展开语法(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 }