ES6 解构赋值-对象模型的解构(Object)

<html>

<head>
    <title> ES6 解构赋值-对象模型的解构(Object)</title>
</head>

<body>




    <script>
        //1,基本
        {
            let { foo, too } = { foo: "这是foo", too: "这是too" };
            console.log(foo);//输出这是foo
            console.log(too);//输出这是too
        }
        console.log("----------------------基本:分割线-------------------------------")
        {
            let { baz: foo } = { baz: "基本" };
            console.log(foo);
        }
        console.log("----------------------分割线-------------------------------")
        //2,可嵌套
        {
          let obj={p:['hello',{y:'word'}]};
          let{p:[x,{y:z}]}=obj;
          console.log(x);//输出hello
          console.log(z);//输出word
        }
        console.log("----------------------可忽略:分割线-------------------------------")
        //3,可忽略
        {
          let obj={p:['hello',{y:'word'}]};
          let{p:[x,{}]}=obj;
          console.log(x);//输出hello
        }
        console.log("----------------------不完全解构:分割线-------------------------------")
        //4,不完全解构
        {
           let obj={p:[{y:"hello"}]};
           let {p: [{ y }, x ] } = obj;
           console.log(y);//输出hello
           console.log(x);//输出undefined
        }
        console.log("----------------------剩余的运算符:分割线-------------------------------")
        //5,剩余的运算符
        {
            let {a,b,...rest} ={a:20,b:30,c:40,d:50};
            console.log("a=" + a);//输出a=20
            console.log("b=" + b);//输出b=30
            console.log("rest=" + rest);//输出rest=[c:40,d:50]
        }
        console.log("----------------------解构默认值:分割线-------------------------------")
        //7.解构默认值
        {
         let{a=5,b=10}={a:3};
         console.log("a="+a);//输出a=3
         console.log("b="+b);//输出b=10
         let{a:aa=10,b:bb=5}={a:3};
         console.log(aa);//3
         console.log(bb);//5
        }
    

    </script>
</body>

</html>

教程来源于:https://www.runoob.com/w3cnote/es6-tutorial.html

 

posted @ 2020-09-26 13:07  KwFruit  阅读(288)  评论(0编辑  收藏  举报