ES6_入门(5)_解构赋值
学习参考:http://es6.ruanyifeng.com/#docs/destructuring
1 //2017/7/20 2 /*对象的解构赋值*/ 3 //对象的解构赋值,当变量名的对象的属性名相同时,才能取到正确的值。 4 /*1*/ 5 let {foo,bar}={foo:"aaa",bar:"bbb"}; 6 console.log(foo);//aaa 7 console.log(bar);//bbb 8 9 //变量名与属性名不相同,必须写成下面这样 10 /*2*/ 11 var {foo:baz}={foo:'aaa',bar:'bbb'}; 12 console.log(baz);//aaa 13 console.log(foo);//es6.html:701 Uncaught ReferenceError: foo is not defined 14 15 //对象的解构赋值是下面形式的简写.对象的结果赋值的内部机制,是先找到同名属性,然后在赋给对应的变量。真正被赋值的是后者,而不是前者。 16 /*3*/ 17 let{foo:foo,bar:bar}={foo:'aaa',bar:'bbb'}; 18 19 let obj={ 20 p:[ 21 'Hello', 22 {y:'world'} 23 ] 24 }; 25 26 let{p:[x,{y}]}=obj; 27 console.log(p);//es6.html:714 Uncaught ReferenceError: p is not defined。注意:这里p是模式,不是变量,因此不会被赋值。 28 console.log(x);//Hello 29 console.log(y);//world 30 31 //如果想要p被赋值,可以写成下面的形式 32 /*4*/ 33 let obj={ 34 p:[ 35 'Hello', 36 {y:'world'} 37 ] 38 }; 39 40 let{p,p:[x,{y}]}=obj; 41 console.log(p);//["Hello", Object] 42 console.log(x); 43 console.log(y); 44 45 /*5*/ 46 var node={ 47 loc:{ 48 start:{ 49 line:1, 50 colum:5 51 } 52 } 53 }; 54 var {loc,loc:{start},loc:{start:{line}}}=node; 55 console.log(loc);//Object {start: Object} 56 console.log(start);//Object {line: 1, colum: 5} 57 console.log(line);//1。这里对line的属性的解构赋值,只有line是变量,loc和start都是模式,不是变量。 58 59 //对象解构指定默认值的条件是,对象的属性值严格等于undefined。 60 /*6*/ 61 console.log(null==undefined);//true 62 console.log(null===undefined);//false 63 64 var {x=3}={x:undefined}; 65 console.log(x);//3 66 67 var {y=5}={y:null}; 68 console.log(y);//null 69 70 71 //解构失败,对象的值等于undefined。 72 /*7*/ 73 let {foo}={bar:2}; 74 console.log(foo);//undefined 75 76 77 /*注意*/ 78 /*8*/ 79 let x; 80 {x}={x:1};//es6.html:763 Uncaught SyntaxError: Unexpected token = 81 /*上面代码报错的原因是JavaScript引擎会将{x}理解成一个代码块,从而发生语法错,所以以下代码将整个解构赋值语句,放在圆括号里,可以正确执行。*/ 82 /*9*/ 83 let x; 84 ({x}={x:2}); 85 console.log(x);//2 86 87 //字符串解构赋值 88 /*10*/ 89 const [a,b,c,d,e]='hello'; 90 console.log(e);//o 91 92 let {length:len}='hello'; 93 console.log(len);//5 94 95 96 /*解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错。*/ 97 /*11*/ 98 let{prop:x}=undefined; 99 let{prop:y}=null;//es6.html:779 Uncaught TypeError: Cannot match against 'undefined' or 'null'. 100 101 /*以下三种解构赋值不能使用圆括号*/ 102 //(1)变量声明语句 103 //(2)函数参数,函数参数也属于变量声明,因此不能带有圆括号。 104 //(3)赋值语句的模式。不能将整个模式或是部分模式放在圆括号中。 105 106 /*可以使用圆括号的情况:赋值语句的非模式部分*/ 107 /*12*/ 108 let x=1; 109 let y=2; 110 [x,y]=[y,x]; 111 console.log(x);//2 112 console.log(y);//1