学习ES6:解构赋值

数组: 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
let obj = {
a: 1,
b: 2
}

let a;
let b;

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

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