2021-12-16 学习记录-es6-对象的解构赋值（常规解构赋值+连续解构赋值）

es6-对象的解构赋值

一、常规解构赋值

参考文档：https://es6.ruanyifeng.com/#docs/destructuring

自己的理解：

const { 变量 } = 对象; // 这是es6的写法，相当于 const 变量 = 对象.属性【变量和属性要相同】


// 例如
const { fighting } = { fighting : '坚持就是胜利'}; 
// 假如把上面代码中的后面部分取名为 obj，那么这就相当于 const fighting = obj.fighting;

console.log(fighting); // 坚持就是胜利

1、变量（左边）必须与属性（右边）同名，方可取到正确的值；与其对应的位置无关。

example1：

let { a , b } = { b : '我是b', a : '我是a' };
console.log(a); // 我是a
console.log(b); // 我是b

let { c } = { b : '我是b', a : '我是a' };
console.log(c); // undefined (因为变量c在右边找不到对应属性c，导致解构失败，所以变量c的值为undefined)

example2：

let obj = { c : '我是c' };
const { who } = obj; // 这是es6的写法，其实就相当于 const who = obj.c;
console.log(who); // undefined (因为变量who在右边找不到对应属性who，导致解构失败，所以变量who的值为undefined)

let obj = { c : '我是c' };
const { c } = obj; // 这是es6的写法，其实就相当于 const c = obj.c;
console.log(c); // 我是c

2、example：

const { log } = console;
log('我被打印了'); // 我被打印了（这儿的log相当于console.log）

3、给定默认值

下面是官方文档给出的example

var {x = 3} = {}; // 虽然等号右边的对象为空，但是等号左边为x设置了默认值3，所以x仍然会有值，那就是3
x // 3

var {x, y = 5} = {x: 1}; // 等号右边尽管只给x定义了属性值，但是在等号左边，给y设置了默认属性值5，所以x、y都会有值滴
x // 1
y // 5

var {x: y = 3} = {}; // 虽然等号右边的对象为空，但是等号左边为y设置了默认值3，所以y仍然会有值，那就是3
y // 3

var {x: y = 3} = {x: 5}; // 虽然等号左边为y设置了默认值3，但是等号右边为x自定义了属性值5，所以y的值变成了5
y // 5

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

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

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

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

上面代码中，属性x的属性值等于null，因为null与undefined不严格相等，所以是个有效的赋值，导致属性x的默认值3不会生效。

一、连续解构赋值

/*
   第一种情况：连续解构赋值
*/
let obj = {
   a:{
      b:{
        c:1
      }
    }
}
console.log(obj.a.b.c); // 非解构赋值 1
const {a:{b:{c}}} = obj; // 连续解构赋值
console.log(c); // 1

/*
   第一种情况：连续解构赋值 + 重命名属性名
*/
let obj2 = {
   a:{
      b:1
   }
}
const {a:{b:data}} = obj2; // 连续解构赋值 + 重命名属性名
console.log(data); // 1 【通过连续解构赋值的写法，是无法获取到外层属性值的，比如此时a是无法获取到的】