ES6 的擴充套件運算子(物件展開符) ...

擴充套件運算子（ spread ）是三個點（...）。它好比 rest 引數的逆運算，將一個數組轉為用逗號分隔的引數序列。

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

該運算子主要用於函式呼叫

function push(array, ...items) {
    array.push(...items);
}
function add(x, y) {
    return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42
 

上面程式碼中，array.push(...items)和add(...numbers)這兩行，都是函式的呼叫，它們的都使用了擴充套件運算子。該運算子將一個數組，變為引數序列。

擴充套件運算子與正常的函式引數可以結合使用，非常靈活

function f(v, w, x, y, z) { }
var args = [0, 1];
f(-1, ...args, 2, ...[3]);

擴充套件運算子的應用

1.合併陣列

擴充套件運算子提供了數組合並的新寫法。

// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5 的合併陣列
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合併陣列
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

 

2.與解構賦值結合

擴充套件運算子可以與解構賦值結合起來，用於生成陣列

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
下面是另外一些例子。
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []:
const [first, ...rest] = ["foo"];
first // "foo"
rest // []

如果將擴充套件運算子用於陣列賦值，只能放在引數的最後一位，否則會報錯。

const [...butLast, last] = [1, 2, 3, 4, 5];
//  報錯
const [first, ...middle, last] = [1, 2, 3, 4, 5];
//  報錯

3.函式的返回值

JavaScript 的函式只能返回一個值，如果需要返回多個值，只能返回陣列或物件。擴充套件運算子提供瞭解決這個問題的一種變通方法。

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

上面程式碼從資料庫取出一行資料，通過擴充套件運算子，直接將其傳入建構函式Date。

4.字串

擴充套件運算子還可以將字串轉為真正的陣列。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

JavaScript 會將 32 位 Unicode 字元，識別為 2 個字元，採用擴充套件運算子就沒有這個問題

5.實現了 Iterator 介面的物件

任何 Iterator 介面的物件，都可以用擴充套件運算子轉為真正的陣列

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

上面程式碼中，querySelectorAll方法返回的是一個nodeList物件。它不是陣列，而是一個類似陣列的物件。這時，擴充套件運算子可以將其轉為真正的陣列，原因就在於NodeList物件實現了 Iterator 介面。

6.Map 和 Set

擴充套件運算子內部呼叫的是資料結構的 Iterator 介面，因此只要具有 Iterator 介面的物件，都可以使用擴充套件運算子，比如 Map 結構。

let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]