美文网首页
ES6之解构

ES6之解构

作者: 芒僧 | 来源:发表于2017-04-02 11:35 被阅读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]
    

    相关文章

      网友评论

          本文标题:ES6之解构

          本文链接:https://www.haomeiwen.com/subject/olhgottx.html