JavaScript（ES6）：变量的解构赋值

解构赋值定义：

允许按照一定模式从数组或对象中提取值，然后对变量进行赋值。

数组的解构赋值

注：数组的元素要一次排序的，变量的值由他的位置决定。

基本用法

    // ES6 解构赋值
    let [a, b, c] = [1, 2, 3];

    // 等于
    let a = 1;
    let b = 2;
    let c = 3;

如果结构不成功，变量的值就是undefined。

    let [x, y, z] = [1, 2];
    // x = 1; 
    // y = 2;
    // z = undefined; 结构没有成功，值就是undefined；

 如果等号右边不是数组（不具有Iterator），是会报错的。比如下面语句就会报错：

    let [a] = 1;
    let [a] = false;
    let [a] = NaN;
    let [a] = undefined;
    let [a] = null;
    let [a] = {};

事实上只要某种数据结构具有 Iterator 接口，都可以使用数组形式的解构赋值。

    let [x, y, z, a] = new Set([1, 2, 3]);
    x // 1
    y // 2
    z // 3
    a // undefined

 

指定默认值

    let [a, b = 2] = [1]; // a=1,b=2。b=2为默认值

    let [a = 1, b = a] = [2]; //a=2,b=2。a=1为默认值，后被赋值为 2，a的值又被赋值为 b,所以b=2。

    let [a = b, b = 1] = [2]; //a=2,b=1。b=1为默认值。

    // 下面这种方式报错
    let [a = b, b = 1] = [];  // 不先给 a 赋值会报错，因为未给 a 赋值。要先给 a 赋值。

 

 

对象的解构赋值

注：对象的属性没有次序，变量必须与属性同名才能取得正确的值。

    let { x, y } = { x: "a", y: "b" };
    x // "a"
    y // "b"

    let { z } = { x: "a", y: "b" };
    z // undefined

 

如果变量名与属性名不一致，要写成下面这样：

    var { a: x } = { a: "1", b: "2" }
    x // "1"，a=undefined

    let { first: f, last: l } = { first: "hello", last: "world" };
    f // "hello"
    l // "world"

就是说对象的解构赋值的内部机制是先找到相同名称的属性，然后赋值给变量，真正被赋值的是后者，不是前者。

 

字符串的解构赋值

字符串用于解构赋值时，字符串会被转换成一个类似数组的对象。

    let [a, b, c, d, e] = "hello";
    a // "h"
    b // "e"
    c // "l"
    d // "l"
    e // "0"

    // 类似数组的对象都会有一个length属性，可以这样写
    let { length: len } = "hello";

 

 

 

参考书籍：

《ES6标准入门（第3版）》 阮一峰 著