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