1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>[es6]-04-对象</title> 6 <script src="./js/browser.js"></script> 7 <script type="text/babel"> 8 /* 9 * 对象的结构赋值 10 * 对象属性没有次序，所以变量名与属性同名才能取到正确值。 11 */ 12 var {bar,foo} = {"bar":1,"fooo":2}; 13 console.log({bar,foo}); //同样，找不到的就是undefined 14 15 //如果变量名与属性名不一致，必须写成下面的形式： 16 var {foo:baz} = {"foo":"aaa"}; 17 console.log(baz); //aaa,类似数组，键就相当于数组的索引。 18 19 let obj = {"first":"hello","last":"world"}; 20 let {first:f,last:l} = obj; 21 console.info(f,l) 22 // 下面的代码中，let命令下面的圆括号是必须的，否则会报错。解析器首先把他 23 //当做代码块，而不是赋值语句： 24 let fooo; 25 ({fooo} = {"fooo":1}); 26 console.info(fooo); //1 let声明，下面赋值 27 28 //对象的解构也可以设置默认值，支持嵌套： 29 var {x=3} = {}; 30 console.info(x); //3 31 var {x,y=5} = {x:1}; 32 console.info(x,y) //1 5 33 var {x:y=3} = {x:5}; 34 console.info(y); //5 35 36 //默认值生效的条件是 对象的属性值严格等于undefined。 37 var {x=3} = {x:undefined}; 38 console.info(x); //3 39 //对于已经声明的变量解构赋值，要带上圆括号： 40 var x; 41 ({x} = {x:1}) 42 console.info(x); 43 //对象的解构赋值，可以很方便的将现有对象上的方法，赋值到某个变量： 44 let {log,sin,cos} = Math; 45 console.log(log,sin,cos); //获取Math对象上的方法并赋值。 46 //由于数组本质上是特殊的对象，所以可以对数组进行对象属性的解构： 47 var arr = [1,2,3]; 48 var {0:first,[arr.length-1]:last} = arr; 49 console.info(first,last); //1 3 50 </script> 51 </head> 52 <body> 53 </body> 54 </html>
依赖文件地址：https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js