JavaScript陣列解構

基本用法

ES5中，為了從陣列中獲取特定資料並賦值給變數，我們經常會進行如下的操作：

例子：

var arr = ["A", "B", "C"];
var a = arr[0],
    b = arr[1],
    c = arr[2];
console.log(a);
//輸出：A

ES6為陣列新增了解構功能，以簡化獲取陣列中資料的過程。陣列解構採用陣列字面量的語法形式，即等號左邊的變數透過在陣列中的位置去取得等號右邊的陣列字面量相同位置的值。

例子：

let [a, b, c] = ["A", "B", "C"];
console.log(a);
//輸出：A

我們也可以只為需要的元素提供變數名。

例子：

let [, , c] = ["A", "B", "C"];
console.log(c);
//輸出：C

如果我們先宣告瞭變數，之後也可以直接透過解構賦值修改變數的值。

例子：

let a = "D",
    b = "H";
[a, b] = ["A", "B"];
console.log(a);
//輸出：A

我們也可以在陣列解構賦值表示式中為任意變數新增預設值。只有當該位置在右側陣列中的值不存在時或值為undefined時，預設值才會生效。

例子：

const arr = ["A", "B"];
let [a, b, c = "C"] = arr;
console.log(c);
//輸出：C

巢狀解構賦值

例子：

const arr = ["A", ["B"], "C"];
let [a, [b]] = arr;
console.log(b);
//輸出：B

陣列解構的獨特用法

ES5中如果要交換兩個變數的值，我們會引入臨時變數：

例子：

let a = 1,
    b = 2,
    tmp;

tmp = a;
a = b;
b = tmp;
console.log(a); //輸出：2
console.log(b); //輸出：1

陣列解構賦值可以更加簡單的進行變數的交換。

例子：

let a = 1,
    b = 2;
[a, b] = [b, a];
console.log(a); //輸出：2
console.log(b); //輸出：1

不定元素與解構賦值的結合

ES6引入了“不定元素”的概念：在變數前新增三個點（…）就表明這是一個不定元素。不定元素是一個陣列，會將等號右側陣列中的多餘元素放入這個特定變數中。不定元素之後不能再有其他變數。

例子：

let arr = ["A", "B", "C"];
let [a, ...items] = arr;
console.log(a); //輸出：A
console.log(Array.isArray(items)); //輸出：true
console.log(items[0]); //輸出：B

展開運算子

在陣列解構的最後一個例子中，我們在變數名前新增三個點（…）將這個變數變成了不定元素。這三個點叫作展開運算子。展開運算子用於展開陣列。

例子：

let arr = [2, 3, 4];
console.log(1, ...arr, 5);
//輸出：1 2 3 4 5

展開運算子的妙用

1、替代apply方法

例子1：

ES5寫法

(function(a, b, c) {
    console.log(a + b + c);
}).apply(null, [1, 2, 3]);
//輸出：6

ES6寫法

(function(a, b, c) {
    console.log(a + b + c);
})(...[1, 2, 3]);
//輸出：6

例子2：

ES5寫法

console.log(Math.max.apply(null, [1, 2, 3]));
//輸出：3

ES6寫法

console.log(Math.max(...[1, 2, 3]));
//輸出：3

2、複製陣列

例子：

ES5寫法

let arr = [1, 2, 3];
let arr_copy_1 = arr;
let arr_copy_2 = arr.concat();
//注意區分兩種複製陣列的不同之處：
//arr與arr_copy_1指向同一個陣列
console.log(Object.is(arr, arr_copy_1)); //輸出：true
//arr_copy_2複製arr建立全新的陣列
console.log(Object.is(arr, arr_copy_2)); //輸出：false

ES6寫法

let arr = [1, 2, 3];
let arr_copy_1 = [...arr];
let [...arr_copy_2] = arr;
console.log(Object.is(arr, arr_copy_1)); //輸出：false
console.log(Object.is(arr, arr_copy_2)); //輸出：false

3、合併陣列

例子：

ES5寫法

let arr1 = [1, 2],
    arr2 = [3, 4];
let arr3 = arr1.concat(arr2);
console.log(arr3);
//輸出：[1, 2, 3, 4]

ES6寫法

let arr1 = [1, 2],
    arr2 = [3, 4];
let arr3 = [...arr1, ...arr2];
console.log(arr3);
//輸出：[1, 2, 3, 4]

4、把陣列新增到另一個陣列尾部

例子：

ES5寫法

let arr1 = [1, 2],
    arr2 = [3, 4];
[].push.apply(arr2, arr1);
console.log(arr2);
//輸出：[3, 4, 1, 2]

ES6寫法

let arr1 = [1, 2],
    arr2 = [3, 4];
arr2.push(...arr1);
console.log(arr2);
//輸出：[3, 4, 1, 2]

5、展開類陣列物件

例子：

ES5寫法

console.log("love".split(""));
//輸出：["l", "o", "v", "e"]

ES6寫法

console.log([...
    "love"
]);
//輸出：["l", "o", "v", "e"]

如有錯誤，歡迎指正，本人不勝感激。