javascript 对象的解构赋值

2. 对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定.而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

变量没有对应的同名属性，导致取不到值，最后等于undefined。

let {a,b} = {a:'a',b:'b'};
// a:'a'
// b:'b'
let {d,c} = {c:'c',d:'d'};
// c:'c'
// d:'d'
let [a1] = {a2:'a2'};
// a1:undefinend 

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

// 例一
let { log, sin, cos } = Math;
// 例二
const { log } = console;
log('hello') // hello

如果变量名与属性名不一致，必须写成下面这样。

let { a: baz } = { a: 'aaa', b: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

实际上说明，对象的解构赋值是下面形式的简写

let { a: b } = { a:'b'};
// b:'b'

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

//下面代码中，a是匹配的模式，b才是变量。真正被赋值的是变量b，而不是模式a。
let { a: b } = { a: 'bbb' };
b // "bbb"
a // error: a is not defined

解构也可以用于嵌套结构的对象。

let obj = {
    arr:[
        'hello',
        { b:'world'}
    ]
};

let {arr:[a,{b}]} = obj;
console.log(a,b);
// hello world
// 注意：这时arr是模式，不是变量，因此不会被赋值。如果arr也要作为变量赋值，可以写成下面这样。
let obj = {
    arr: [
    'Hello',
    { b: 'World' }
    ]
};

let { arr, arr: [a, { b }] } = obj;
console.log(arr2,a,b);

下面代码有三次解构赋值，分别是对loc、start、line三个属性的解构赋值。注意，最后一次对line属性的解构赋值之中，只有line是变量，loc和start都是模式，不是变量。

let obj = {
    loc : {
        start : {
            line : 1,
            column : 2
        }
    }
}
let { loc , loc:{start:{line}}} = obj;
console.log(loc,line);

对象的嵌套解构赋值

let obj = {}；
let arr = [];
({a:obj.a,b:arr[0]} = { a:'aaa', b:true});
// obj:{a:'aaa'}
// arr[0]:[true]
// 如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错，如下：
let {foo: {bar}} = {baz: 'baz'};

对象的解构赋值可以取到继承的属性。

const obj1 = {};
const obj2 = { a: 'aaa'};
Object.setPrototypeOf(obj1,obj2);

const { a } = obj1;
// a:'aaa'
上面代码中，对象obj1的原型对象是obj2。a属性不是obj1自身的属性，而是继承自obj2的属性，解构赋值可以取到这个属性

对象的解构也可以指定默认值

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'this is msg' } = {};
msg // "this is msg"

默认值生效的条件是，对象的属性值严格等于undefined。

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null 因为null与undefined不严格相等，所以是个有效的赋值，导致默认值3不会生效。

注意

1. 如果要将一个已经声明的变量用于解构赋值，需z注意写法

// 错误写法
let a;
{a} = {a：'aaa'};
// javascript引擎将`{x}`当作一个语法快进行处理，不将大括号写在行首就可避免此问题
// 正确写法
let a；
({a} = {a:'aaa'});

2. 解构赋值允许等号左边的模式之中，不放置任何变量名。因此，可以写出非常古怪的赋值表达式。

({} = [true, false]);
({} = 'abc');
({} = []);
//上面的表达式虽然毫无意义，但是语法是合法的，可以执行。

3. 因为数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [1,2,3,4];
let {0:first,length:len} = arr;
// first: 1
// len: 4