【ES6】解構賦值（整理篇）

前言

上一篇文章整理的變量聲明一塊的，這一篇將對解構賦值一塊的。

解構的概念

ES6規定了一種變量賦值的模式，從數組和對象中提取變量的值的方式，稱爲解構。

解構的基本用法

• 左邊數量等於右邊數量的狀況

let [a, b, c] = [1, 2, 3];
a; // 1
b; // 2
c; // 3
複製代碼

這種狀況應該是最好理解的，從數組中提取值，按照對應位置，對變量賦值。

• 左邊數量大於右邊數量的狀況

let [bar, foo] = [1];
bar // 1
foo //undefined
複製代碼

若是出現這樣的狀況，屬於解構不成功。那麼不成功的部分，將被賦值爲undefined。

• 左邊數量小於右邊數量的狀況

let [x, y] = [1, 2, 3];
x // 1
y // 2
複製代碼

這種狀況叫不徹底解構。解構操做依然能夠成功。也是提取對應位置上的值。

默認值的用法

由於在實際業務中，總不可能右邊的數組長度不發生變化，可是你又但願解構出來不是一個undefined的話。就能夠給那個值添加默認值

let [x = 1, y] = [];  // 1 undefined
let [x = 1, y] = [2, 3] // 2 3
複製代碼

固然，默認值也能夠用變量來代替，可是代替的變量必定要申明且賦值的。

let [x = 1, y = x] = [];  // 1 1
let [x = 1, y = x] = [2]; // 2 2
let [x = 1, y = x] = [1, 2]; // 1 2
let [x = y, y = 1] = []; // 報錯
複製代碼

對象的解構

上面的基本用法，咱們只拿數組舉例了，其實對象也是能夠用解構的。

let {bar, foo} = {bar: 'bar'} // bar undefined
複製代碼

對象解構是按照鍵值匹配，而數組解構是按照位置匹配。其餘不少特性和數組同樣。

對象解構能夠取到繼承的屬性

const obj1 = {};
const obj2 = { x: '1' };
Object.setPrototypeOf(obj1, obj2);

let {x} = obj1  // 1
複製代碼

obj1自己並不包含x屬性，其屬性是在它原型上的。因此對象的解構，能夠從繼承的原型上面取到值。

默認值

對於默認值這一塊，想強調一點對象屬性必須嚴格等於undefined，纔會出發默認值

let {x = 1} = {x: undefined} // 1
let {y = 1} = {y: null} // null
複製代碼

上述例子中，null是不等於undefined，因此並不會觸發默認值條件。

對象解構中的注意點

• 已經申明的變量用於解構賦值

// 錯誤的用法
let x;
{x} = {x: 1};  //報錯
複製代碼

這種狀況會發生報錯，報錯是由於js將{x}理解成了代碼塊，從而發生了語法錯誤。 如何解決呢？只要不講{寫在開始位置。

// 正確用法
let x;
({x} = {x: 1});
複製代碼

• 對數組進行對象解構

在js中數組就是一種特殊的對象。因此，咱們也能夠對一個數組，進行對象的解構。舉個例子：

let arr = [1, 2, 3];
let {0: first, 1: second, 2: third} = arr; // 1 2 3
複製代碼

其餘類型的賦值解構

字符串的賦值解構

當字符串被解構時，會將字符串處理成類數組對象。

let [a, b, c, d] = '12345'
a // 1
b // 2
c // 3
d // 4
複製代碼

數組和布爾值的解構

這一塊極少用到，想了解的能夠本身google搜索。

函數參數的解構

這一塊在業務中用到的是最多的。函數參數不少時，沒有辦法作到一一對應，那麼解構即是一種很好的途徑。

function add({a, b, c, d, e}) {
    return a + b + c + d + e;
}
add({a: 1, c: 3, b: 2, d: 4, e: 5}); // 15
複製代碼

並不須要在意參數的前後順序，只須要參數的名字一一對應，並且還能給參數設定默認值。

解構的其餘用途

交換變量值

之前交換變量值，須要第三個中間變量來幫忙，可是有了解構以後就很簡單了。

let x = 1;
let y = 2;

[x, y] = [y, x];
複製代碼

加載模塊時

import {x, y} from 'xxx';
複製代碼

這裏也是用到了解構，可讓你引入的部分更加明確。

總結

解構其實仍是有跡可循的，須要掌握還得花點時間。下一篇文章將會整理Symbol相關的知識點。