ES6之解构

2017-04-02  本文已影响0人  芒僧

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)

数组的解构赋值

ES5给变量赋值

 let a=1;
 let b=2;
 let c=3;

ES6的数组解构赋值

    let [a,b,c]=[1,2,3]
    //没有相互对应会造成解构失败或者解构不完全
    
    //同时,解构支持默认值
    let[a,b=1]=[2] //a=2,b=1
    let [x = 1, y = x] = [];     // x=1; y=1
    let [x = 1, y = x] = [2];    // x=2; y=2
    let [x = 1, y = x] = [1, 2]; // x=1; y=2
    let [x = y, y = 1] = [];     // ReferenceError原因是x去寻找y的值得时候,y还没被声明。

如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。

--

对象的解构赋值

    let { foo, bar } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"
    //顺序可以不在意,但必须变量得相互对应
    
    //如果变量名与属性名不一致,必须写成下面这样。
    var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
    baz // "aaa"
    
    //这里的foo相当于是一个中间变量(代理)使得baz的值代表foo的值,支持嵌套。
    let obj = {
     p: [
        'Hello',
        { y: 'World' }
     ]
    };

    let { p: [x, { y }] } = obj;
    x // "Hello"
    y // "World"
    //嵌套之后,p被叫做模式,x,y被叫做真正的变量

常用方式

交换变量的值

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

提取JSON数据

    let jsonData = {
        id: 42,
        status: "OK",
         data: [867, 5309]
};

    let { id, status, data: number } = jsonData;

        console.log(id, status, number);
        // 42, "OK", [867, 5309]
上一篇下一篇

猜你喜欢

热点阅读