JavaScript踩坑解构赋值

一、解构赋值

　　解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出，赋值给其他变量。

　　常用的使用方式就是以字面量[]或者{}来获取 array或者 object的值。

　　常规用法：

　　数组的解构：

let a, b, rest;

[a, b] = [10, 20];
console.log(a);// 10
console.log(b);// 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);// [30,40,50]

 　　对象的解构：

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

　　常规用法：

　　使用解构赋值经常使用到默认值的赋值，和使用 function的默认参数一样，使用 = 来添加属性的默认值。

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

let {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

二、解构赋值注意点

为了防止从数组中取出一个值为undefined的对象，可以在表达式左边的数组中为任意对象预设默认值。

　  意思是：定义这个变量或者变量的值设置为 undefined的时候，而null、 '' 、false 在变量解析的过程中都是有值得情况，所以我们默认赋值会不成功。

　  示例如下：

const {a = '1', b = '2', c = '3', d = '4', e = '5'} = {a: 'a', b: null, c: undefined, d: false, e: ''}
console.log(a); //a
console.log(b); //null
console.log(c); //3
console.log(d); //false
console.log(e); // ""

　　如果只是根据属性的存在与否来绑定默认值的时候，可以使用解构赋值。

三、使用||赋值

　　要对象的属性值能够转换为boolean的 false，默认值绑定就会成功，所以上文中我们使用的null、undefined、false、''都可以赋值成功。

console.log(false||1) //1
console.log(null||2) //2
console.log(undefined||3) //3
console.log(""||4) //4
console.log(0||5) //5