js 对象的解构赋值

2023.1.29今天我学习了对象的解构赋值。

解构不仅可以用于数组，还可以用于对象。

let {foo,bar} = {foo : "aaa",bar : "bbb"};
foo // "aaa"
bar // "bbb"

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

如：

let {bar,foo} = {foo : "aaa",bar : "bbb"}
foo // "aaa"
bar // "bbb"


let {baz} = {foo : "aaa",bar : "bbb"}
baz // undefined

（1）等号左边的两个变量的次序与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。

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

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

var {foo : baz} = {foo : 'aaa',bar : 'bbb'};
baz // "aaa"


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


let {foo : foo,bar : bar} = {foo : "aaa",bar : "bbb"};
baz // "aaa"
foo // error: foo is no defined

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

foo是匹配的模式，baz才是变量，真正被赋值的是变量baz，而不是模式foo。

嵌套结构：

let obj = {
  p:{
    'Hello',
     {y : 'World'}
   }
};

let {p:{x,{y}}} = obj;

x // 'Hello'
y // 'World'

注意：这时候的p是模式，不会被赋值，如果p也要作为变量赋值，可以写成下面这样。

let obj = {
  p:{
    'Hello',
     {y : 'World'}
   }
};

let {p,p:{x,{y}}} = obj;

x // 'Hello'
y // 'World'
p // {"Hello",{y:"World"}}