学习ES6：解构赋值

发表于 更新于 分类于 阅读次数： Disqus：

数组： http://www.bilibili.com/video/av6698380/index_3.html
对象： http://www.bilibili.com/video/av6698380/index_4.html
其他： http://www.bilibili.com/video/av6698380/index_5.html

参考 阮一峰 《ES6 标准入门》

解释

所谓解构赋值，就是将按照一定模式或结构，从数组或对象中提取值赋给相对应结构的变量

基本用法

1
let [a, b, c] = [1, 2, 3];

  • 只要左右两边的括号模式相同，变量则可相应赋值。

  • 如若解构失败，变量值为undefined

  • 若等号右边不是可遍历的结构，则报错

一个斐波那契序列的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
function* fib() {
    let a = 0;
    let b = 1;
    while(true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

let [first, second, third, fourth, fifth, sixth] = fib();

console.log(third); //1
console.log(sixth); //5

function *funcName(…params){…}
生成器函数 function generator

默认值

解构赋值允许使用默认值

用途

  1. 交换变量值

    1
    [x, y] = [y, x];

  2. 从函数中返回多个值

    1
    2
    3
    4
    5
    function func([x = 1, y = 2, z = 3]) {
        return [a, b, c] = [x, y, z];
    }

    let [a, b, c] = func([2, 3]);

  3. 函数的参数定义（有序数组，无序对象）

    数组：见上方例子

    对象：

    1
    2
    3
    4
    5
    function func({x = 1, y = 2, z = 3}) {
        //...
    }

    func({x:3, y:1, z:0});

  4. 提取JSON数据

  5. 设置函数参数默认值

  6. 遍历Map结构 for…of…结构

  7. 加载模块的指定方法

注意点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let obj = {
    a: 1,
    b: 2
}

let a;
let b;

//结构赋值时，大括号不能出现于行首，会被误认为是代码块，而造成语法错误。
{a, b} = obj; //Uncaught SyntaxError: Unexpected token =

//应该改成
({a, b} = obj);