美文网首页
ES6(解构赋值)

ES6(解构赋值)

作者: KATENGC | 来源:发表于2020-04-28 17:59 被阅读0次

    解构赋值,分为左右两种解构

    • 数组解构赋值 左右两边都是数组
    • 对象解构赋值 左右两边都是对象
    • 字符串解构赋值 左边是数组,右边是字符串
    • 布尔解构赋值(就是对象解构赋值)
    • 函数解构赋值
    • 数值解构赋值(就是对象解构赋值)
    //数组解构赋值
    {
        //用let 声明三个变量
        let a, b, rest;
        //相当于a=1 b=2
        [a, b] = [1, 2];
        console.log(a, b);// 1 2
    }
    
    //数组解构赋值
    {
        let a, b, rest;
        [a, b, ...rest] = [1, 2, 3, 4, 5, 6];
        console.log(a, b, rest);// 1 2 [3,4,5,6]
    }
    
    //对象解构赋值
    {
        let a, b;
        ({a, b} = {a: 1, b: 2});
        console.log(a, b);// 1 2
    }
    
    //数组解构赋值 默认值
    {
        let a, b, c, rest;
        [a, b, c = 3] = [1, 2];
        console.log(a, b, c);// 1 2 3
    }
    
    //数组解构赋值 若没有在解构上成功配对,那么变量相当于只声明未赋值
    {
        let a, b, c, rest;
        [a, b, c] = [1, 2];
        console.log(a, b, c);// 1 2 undefined
    }
    
    //利用解构赋值 实现变量交换
    {
        let a = 1;
        let b = 2;
        [a, b] = [b, a];
        console.log(a, b);//2 1
    }
    
    {
        function f() {
            return [1, 2];
        }
    
        let a, b;
        [a, b] = f();
        console.log(a, b);//1 2
    }
    
    {
        function f1() {
            return [1, 2, 3, 4, 5];
        }
    
        let a, b, c;
        [a, , , b] = f1();
        console.log(a, b);//1 4
    }
    
    {
        function f2() {
            return [1, 2, 3, 4, 5];
        }
    
        let a, b, c;
        [a, ...b] = f2();
        console.log(a, b);//1 [2,3,4,5]
    }
    
    //对象解构赋值
    {
        let o = {p: 42, q: true};
        let {p, q} = o;
        console.log(p, q);//42 true
    }
    //对象解构赋值 默认值
    {
        let {a = 10, b = 5} = {a: 3};
        //a默认值为10 b默认值为5,通过赋值,a的值被覆盖为3,b没有被覆盖
        console.log(a, b);//3 5
    }
    
    //对象解构赋值 嵌套应用
    {
        let metaData = {
            title: 'abc',
            test: [{
                title: 'test',
                desc: 'description'
            }]
        };
    
        let {title: esTitle, test: [{title: cnTitle}]} = metaData
        console.log(esTitle, cnTitle);//abc test
    }
    

    相关文章

      网友评论

          本文标题:ES6(解构赋值)

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