2.2 对象的解构赋值

对象解构赋值

简单介绍

• 数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值
• 如果解构失败，变量的值等于undefined
• 解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错

//按照变量名与属性名字来进行赋值，只有相同的名字才成立，和数组不一样，不是按照顺序，找不到就返回undefined
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

---------------------------------------------------

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

将对象的方法，赋值到某个变量

// 把console.log方法赋值给log变量，这样log也可以执行console.log方法
const { log } = console;
log('hello') // hello

es6扩展的属性与变量与对象解构赋值

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

//先找相同的属性也就是foo，没有就undefined，有就赋值
//赋值的不是foo，foo只是匹配的模式，用来找右边相同的属性名
//赋值的是baz这个才是变量，找到相同的属性后执行变量赋值baz="aaa"
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
//比较
let { foo: foo } = { foo: 'aaa', bar: 'bbb' };
//等价于 let { foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"

一个变量遍历赋值3次

//第一个赋值相当于{loc: loc} = {loc: {start: {line: 1,column: 5}}}
//第二个变量相当于{start：start} = {line: 1,column: 5}
//第三个变量相当于{line：line} = {line: 1}
//第一个和第二个都是模式，第三个才是变量
const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

对象的默认值和数组一样

var {x = 3} = {};
//等价于var {x : x= 3} = {x = undefind};
x // 3

------------------------------------------------------

var {x, y = 5} = {x: 1};
//等价于var {x : x, y : y = 5} = {x : 1, y = undefind};
x // 1
y // 5

------------------------------------------------------

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

------------------------------------------------------

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

------------------------------------------------------

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

对象解构赋值的注意点

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

// 正确的写法
let x;
({x} = {x: 1});

//一看上面的感觉差不多，其实第一种是会报错
//因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。

对数组进行对象属性的解构

//可以根据index来进行解构赋值
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
//等价于let {0 : first, [arr.length - 1] : last} = [0：1,1：2,2：3];
first // 1
last // 3