ES6_入门（5）_解构赋值

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