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"]

如有错误，欢迎指正，本人不胜感激。