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