ES6的 结构赋值----简单demo

<script type="text/javascript">

// 解构赋值
{
    let [a,b,c] = [1,2,3];
    console.log(a,b,c); //1 2 3
}

//嵌套
{
    let [a,[b,c,[d,e,f]]] = [1,[2,3,[4,5,6]]];
    console.log(a,b,c,d,e,f); //1 2 3 4 5 6 
}

// ... (三点运算符) 
// 剩余运算符，声誉的部分放在数组中赋值
{
    let [a,...b] = [1,2,3,4,5];
    // console.log(a,b[3]);
    let [c,d,e,f] = b;
    console.log(a+"|"+b+"|"+c,d,e,f); //1 | 2,3,4,5 | 2 3 4 5
    // console.log(a);
    // console.log(b);
    // console.log(c,d,e,f);
}
// 展开运算符，
{
    let a = [1,2,3,4,5];
    let b = [0,...a]
    console.log(b); // (6) [0, 1, 2, 3, 4, 5]
}

// 结构不成功
{
    let [a,b,c] = [1,2];
    console.log(a,b,c);//c = undefined（不会报错）
}

//不完全解构
{
    let [a,b,c] = [1,2,3,4,5];
    console.log(a,b,c);// 1 2 3    4,5 还有没有解构
}

//允许默认值
//必须 ===undefined 时才会使用默认值，用 ‘=’设置默认值，默认值可以使用变量，但是变量必须是被声明过的==>注意解构的执行顺序。
{
    let [a=1,b=a,c] = [,,3];
    console.log(a,b,c); // 1 1 3
}

//对象（键值对）的解构
//与数组的用法一样
{
    let user = {
        name:"栓单",
        age:"21"
    }    
    // name 属性，a 变量 ，age 属性  b 变量
    // 等同于 {
    //             let {name,age} = {name:"栓单",age:"21"}     //简写：属性名和变量名相同；
    //          }
    let {name:a,age:b} = user;  //正常写法 属性：变量；
    console.log(a,b); //栓单 21
}

// 对象的 嵌套

{
    let {a,b,c} = {
        a:"1",
        b:{aa:"aa"},
        c:"3"
    };
    console.log(a, b.aa ,c); //1 aa 3
}

// 变量的交换
// Es5的写法：
// {
//         var a = 1; var b = 2;
//         console.log(a,b) // 1 2
//         //变量交换 -- 需要再声明一个空的媒介
//         var c = null;
//         //进行交换
//         c = a ; a = b ; b = c ;
//         console.log(a,b) // 2 1
//         //很神奇吧！就是代码有点多，在Es6里三行就搞定。 
// }
// Es6的写法：
{
    let a = 1;
    let b = 2;
    let c = 3;
    console.log(a,b,c); //1 2
    //a,b进行交换
    [a,b,c] = [c,b,a];
    console.log(a,b,c); //2 1
}

// 函数的返回值
{
    function fn(){
        return {
            name:"栓单",
            age:"21",
            timer:"2018",
        }
    }
    // 第一种写法==>直接赋值个给对象
    let {name,age,timer} = fn();
    console.log(name,age,timer); //栓单 21 2018
    // 第二种写法==>赋值给变量，在调用变量（对象.键  得出 值）
    user = fn();
    console.log(user.name,user.age,user.timer);//栓单 21 2018
}

// json 数据的解构
{
    // 模拟数据
    let obj = {
        title:"标题",
        info:"扒拉扒拉扒拉",
        spans:[
            {
                s_title:"标签1",
                s_info:"标签1-巴拉巴"
            },
            {
                s_title:"标签2",
                s_info:"标签2-巴拉巴"
            }
        ],
    }
    //结构数据
    let {title,info,spans} = obj;
    console.log(title,info,spans);//标题 扒拉扒拉扒拉 (2) [{…}, {…}]

    console.log(spans[0]); // let.html:146 {s_title: "标签1", s_info: "标签1-巴拉巴"}
    console.log(spans[1]); // let.html:147 {s_title: "标签2", s_info: "标签2-巴拉巴"}

    let [a,b] = spans;
    console.log(a);// let.html:150 {s_title: "标签1", s_info: "标签1-巴拉巴"}
    console.log(b);// let.html:151 {s_title: "标签2", s_info: "标签2-巴拉巴"}
}
</script>

<script type="text/javascript">

// 解构赋值
{
    let [a,b,c] = [1,2,3];
    console.log(a,b,c); //1 2 3
}

//嵌套
{
    let [a,[b,c,[d,e,f]]] = [1,[2,3,[4,5,6]]];
    console.log(a,b,c,d,e,f); //1 2 3 4 5 6 
}

// ... (三点运算符) 
// 剩余运算符，声誉的部分放在数组中赋值
{
    let [a,...b] = [1,2,3,4,5];
    // console.log(a,b[3]);
    let [c,d,e,f] = b;
    console.log(a+"|"+b+"|"+c,d,e,f); //1 | 2,3,4,5 | 2 3 4 5
    // console.log(a);
    // console.log(b);
    // console.log(c,d,e,f);
}
// 展开运算符，
{
    let a = [1,2,3,4,5];
    let b = [0,...a]
    console.log(b); // (6) [0, 1, 2, 3, 4, 5]
}

// 结构不成功
{
    let [a,b,c] = [1,2];
    console.log(a,b,c);//c = undefined（不会报错）
}

//不完全解构
{
    let [a,b,c] = [1,2,3,4,5];
    console.log(a,b,c);// 1 2 3    4,5 还有没有解构
}

//允许默认值
//必须 ===undefined 时才会使用默认值，用 ‘=’设置默认值，默认值可以使用变量，但是变量必须是被声明过的==>注意解构的执行顺序。
{
    let [a=1,b=a,c] = [,,3];
    console.log(a,b,c); // 1 1 3
}

//对象（键值对）的解构
//与数组的用法一样
{
    let user = {
        name:"栓单",
        age:"21"
    }    
    // name 属性，a 变量 ，age 属性 b 变量
    // 等同于 {
    //             let {name,age} = {name:"栓单",age:"21"}     //简写：属性名和变量名相同；
    //          }
    let {name:a,age:b} = user;  //正常写法 属性：变量；
    console.log(a,b); //栓单 21
}

// 对象的 嵌套
{
    let {a,b,c} = {
        a:"1",
        b:{aa:"aa"},
        c:"3"
    };
    console.log(a, b.aa ,c); //1 aa 3
}

// 变量的交换
// Es5的写法：
// {
//         var a = 1; var b = 2;
//         console.log(a,b) // 1 2
//         //变量交换 -- 需要再声明一个空的媒介
//         var c = null;
//         //进行交换
//         c = a ; a = b ; b = c ;
//         console.log(a,b) // 2 1
//         //很神奇吧！就是代码有点多，在Es6里三行就搞定。 
// }
// Es6的写法：
{
    let a = 1;
    let b = 2;
    let c = 3;
    console.log(a,b,c); //1 2
    //a,b进行交换
    [a,b,c] = [c,b,a];
    console.log(a,b,c); //2 1
}

// 函数的返回值
{
    function fn(){
        return {
            name:"栓单",
            age:"21",
            timer:"2018",
        }
    }
    // 第一种写法==>直接赋值个给对象
    let {name,age,timer} = fn();
    console.log(name,age,timer); //栓单 21 2018
    // 第二种写法==>赋值给变量，在调用变量（对象.键  得出 值）
    user = fn();
    console.log(user.name,user.age,user.timer);//栓单 21 2018
}

// json 数据的解构
{
    // 模拟数据
    let obj = {
        title:"标题",
        info:"扒拉扒拉扒拉",
        spans:[
            {
                s_title:"标签1",
                s_info:"标签1-巴拉巴"
            },
            {
                s_title:"标签2",
                s_info:"标签2-巴拉巴"
            }
        ],
    }
    //结构数据
    let {title,info,spans} = obj;
    console.log(title,info,spans);//标题 扒拉扒拉扒拉 (2) [{…}, {…}]

    console.log(spans[0]); // let.html:146 {s_title: "标签1", s_info: "标签1-巴拉巴"}
    console.log(spans[1]); // let.html:147 {s_title: "标签2", s_info: "标签2-巴拉巴"}

    let [a,b] = spans;
    console.log(a);// let.html:150 {s_title: "标签1", s_info: "标签1-巴拉巴"}
    console.log(b);// let.html:151 {s_title: "标签2", s_info: "标签2-巴拉巴"}
}
</script>

 

了解更多；

原创地址：https://blog.csdn.net/china_dou  

转载请注明出处~