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 }