2. 对象的解构赋值
2.1 等号左右两边次序
等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响.
let {one, two} = {one: 1, two: 2};
console.log('one:', one);// one: 1
console.log('two:', two);// two:2
let {three} = {one: 1, two: 2};
console.log('three:', three);// three: undefined
// three变量没有对应的同名属性,导致取不到值,最后等于`undefined`.
2.2. 对象同名属性赋值给等号右边的变量
对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量.真正被赋值的是后者,而不是前者
let {aaa: bbb} = {aaa: 'AAA', ccc: 'CCC'};
console.log('bbb:', bbb);// bbb: AAA
let {one: n, two: b} = {one: 111, two: 222};
console.log('n:', n);// n: 111
console.log('b:', b);// b: 222
2.3 解构用于嵌套解构的对象
let person = {
worker: [
'mark',
{age: 18}
]
};
let {worker: [user, {age}]} = person;
console.log('user:', user);// user: Mark
console.log('age:', age); // age: 18
- 这里的
worker只是模式,而非变量,因此不会被赋值,采用下边的这种方式可以将worker改成变量
let person = {
worker: [
'mark',
{age: 18}
]
};
let {worker, worker: [user, {age}]} = person;
console.log('worker:', worker);// worker: [ 'mark', { age: 18 } ]
console.log('user:', user);// user: Mark
console.log('age:', age); // age: 18
2.4 嵌套赋值
let obj = {};
let arr = [];
({foo: obj.prop, bar: arr[0]} = {foo: 111, bar: true});
console.log('obj:', obj);// obj: { prop: 111 }
console.log('arr:', arr);// arr: [ true ]
2.5 对象的结构可以指定默认值
{
let {x = 3} = {};
console.log('x:', x);// x: 3
}
{
let {x, y = 5} = {x: 1};
console.log('x:', x);// x: 1
console.log('y:', y);// x: 5
}
{
let {x: y = 3} = {};
console.log('y:', y);// y: 3
}
{
let {x: y = 3} = {x: 5};
console.log('y:', y);// y: 5
}
{
let {message: msg = 'this is a message'} = {};
console.log('msg:', msg);// msg: this is a message
}
2.6 对象解构赋值的默认值
默认值生效的条件是,对象的属性值严格等于
undefined,如果结构失败,变量的值等于undefined
{
let {x = 3} = {x: undefined};
console.log('x:', x);// x: 3
}
{
let {x = 3} = {x: null};
console.log('x:', x);// x: null
}
2.7 已声明变量的解构赋值
let x;
// { x } = {x:1};// 这是错误的写法
({x} = {x: 1});
console.log('x:', x);
错误的原因,因为JavaScript引擎会将
{x}理解成为一个代码块,从而发生语法错误,只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题.
2.8 古怪的但是没有意义的赋值表达式
({} = [true, false]);
({} = 'abc');
({} = []);
2.9 对象的解构赋值到某一个变量
let {log, sin, cos} = Math;
数组的本质是特殊的对象,因此可以对数组进行对象属性的结垢
let arr = [1, 2, 3];
let {0: first, [arr.length - 1]: last} = arr;
console.log('first:', first);// first: 1
console.log('last:', last); // last: 3
