「ES6系列」解構賦值全解析

引言

對象和數組時 Javascript 中最經常使用的兩種數據結構，因爲 JSON 數據格式的普及，兩者已經成爲 Javascript 語言中特別重要的一部分。在編碼過程當中，咱們常常定義許多對象和數組，而後有組織地從中提取相關的信息片斷。ES6 中添加了能夠簡化這種任務的新特性：解構。解構是一種打破數據結構，將其拆分爲更小部分的過程。

爲何須要解構

咱們考慮一個大多數人在使用 Javascript 進行編碼時可能遇到過的狀況。

假設，咱們有一個學生數據，在學生數據中用一個對象表示三個學科（數學、語文、英語）的分數，咱們根據這些數據顯示學生的分數信息：

const student = {
    name:'jsPool',
    age:20,
    scores:{
        math:95,
        chinese:98,
        english:93
    }
}
function showScore(student){
    console.log('學生名:' + student.name);
    console.log('數學成績:' + (student.scores.math || 0 ));
    console.log('語文成績:' + (student.scores.chinese || 0 ));
    console.log('英語成績:' + (student.scores.english || 0 ));
}
showScore(student)
複製代碼

使用上面的代碼，咱們將得到所需的結果。可是，以這種方式編寫的代碼須要有一些值得注意的地方。 因爲咱們訪問的對象 scores 嵌套在另外一個對象 student 中，因此，咱們的訪問鏈變得更長，這意味着更多的輸入， 而因爲更多的輸入，也就更有可能形成拼寫的錯誤。固然，這並非什麼大問題，可是經過解構，咱們能夠用更具備表現力 和更緊湊的語法來作一樣的事情。

對象的解構賦值

對象解構的語法形式是在一個賦值操做符左邊放置一個對象字面量，例如：

let details = {
    firstName:'Code',
    lastName:'Burst',
    age:22
}
const {firstName,age} = details;

console.log(firstName); // Code
console.log(age);       // 22
複製代碼

這段代碼中 details.firstName 的值被存儲在變量 firstName 中，details.age 的值被存儲在變量 age 中。 這是對象解構的最基本形式。

用一張圖來解釋一下其中的解構過程：

非同名變量賦值

在這個例子中，咱們使用與對象屬性名相同的變量名稱，固然，咱們也能夠定義與屬性名不一樣的變量名稱：

const person = {
  name: 'jsPool',
  country: 'China'
};
const {name:fullname,country:place} = person;

console.log(fullname); // jsPool
console.log(place); // China
複製代碼

在這裏，咱們建立了兩個局部變量：fullname , place，並將 fullname 映射到 name，place映射到 country。

默認值

使用解構賦值表達式時，若是指定的局部變量名稱在對象中不存在，那麼這個局部變量會被賦值爲 undefined，就像這樣：

const person = {
  name: 'jsPool',
  country: 'China'
};
let {age} = person;
console.log(age); // undefined
複製代碼

這段代碼額外定義了一個局部變量 age，而後嘗試爲它賦值，然而在 person 對象上，沒有對應屬性名稱的屬性值，因此它像預期中的那樣賦值爲 undefined。

當指定的屬性不存在時，能夠定義一個默認值，在屬性名稱後添加一個等號（=）和相應的默認值便可：

const person = {
  name: 'jsPool',
  country: 'China',
  sexual:undefined
};
let {age = 20,sexual:sex = 'male'} = person;
console.log(age); // 20
console.log(sex); // male
複製代碼

在這個例子中，爲變量 age 設置了默認值 20，爲非同名變量 sex 設置了默認值 male。只有對象 person 上沒有該屬性或者屬性值爲 undefined 時該默認值才生效。

嵌套對象的解構賦值

解構嵌套對象仍然與對象字面量的語法類似，能夠將對象拆解以獲取你想要的信息。

再來看文中最開始的例子，咱們有一個學生數據，在學生數據中用一個對象表示三個學科（數學、語文、英語）的分數，咱們根據這些數據顯示學生的分數信息。咱們能夠經過解構賦值優雅的對其進行操做:

const student = {
    name:'jsPool',
    age:20,
    scores:{
        math:95,
        chinese:98,
        english:93
    }
}
function showScore(student){
    const { name,scores:{ math = 0,chinese = 0, english = 0}} = student;
    console.log('學生名:' + name);
    console.log('數學成績:' + math);
    console.log('語文成績:' + chinese);
    console.log('英語成績:' + english);
}
showScore(student)
複製代碼

在這裏，咱們定義了四個局部變量：name、math、chinese、english。此外咱們還爲變量 math、chinese、english 分別指定了默認值。

數組的解構賦值

與對象解構的語法相比，數組解構就簡單多了，它使用的是數組字面量，且解構操做所有在數組內完成，而不是像對象字面量語法同樣使用對象的命名屬性。

let list = [221,'Baker Street','London'];
let [houseNo,street] = list;
console.log(houseNo,street);// 221 , Baker Street
複製代碼

在上面的代碼中，咱們從數組 list 中解構出數組索引 0 和 1 所對應的值並分別存儲至變量 houseNo 和 street 中。

在數組的解構中，也能夠直接省略元素，只爲須要的元素提供變量名：

let list = [221,'Baker Street','London'];
let [houseNo,,city] = list;
console.log(houseNo,city);// 221 , London
複製代碼

這段代碼中使用解構語法從數組 list 中獲取索引 0 和索引 2 所對應的元素，city 前的逗號是前方元素的佔位符，不管數組中的元素有多少個，均可用這種方式來提取想要的元素。

用一張圖來解釋一下其中的解構過程：

默認值

在數組的解構賦值表達式中也能夠爲數組的任意位置添加默認值，當指定位置的屬性不存在或其值爲 undefined 時使用默認值：

let list = [221,'Baker Street'];
let [houseNo,street,city = 'BJ'] = list;
console.log(houseNo,street,city);// 221 , Baker Street , BJ
複製代碼

上面代碼中，數組 list 只有兩個元素，變量 city 沒有對應的匹配值，但有一個默認值 BJ，因此最終 city 的輸出結果不是 undefined 而是默認值 BJ。

嵌套數組的解構賦值

就像對象同樣，也能夠對嵌套數組進行解構操做，在原有的數組解構模式中插入另外一個數組解構模式，便可將解構過程深刻到下一級：

let colors = [ 'red' , [ 'green' , 'yellow' ] , 'blue' ];
let [ firstColor , [ secondColor ] ] = colors;
console.log(firstColor,secondColor); // red , green
複製代碼

在這個例子中，咱們經過數組的嵌套解構，爲變量 firstColor 和 secondColor 分配對應的值。

不定元素

在數組中，能夠經過...語法將數組中的其他元素賦值給一個特定的變量，就像這樣：

let colors = ['red','green','blue'];
let [firstColor,...otherColors] = colors;
console.log(firstColor);  // red
console.log(otherColors); // ['green','blue']
複製代碼

這個例子中，數組 colors 的第一個元素被賦值給了 firstColor ，其餘元素被賦值給了 otherColors 數組，因此 otherColors 中包含兩個元素：'green' 和 'blue'。

混合解構

能夠混合使用對象解構和數組解構來構建更多複雜的表達式，如此一來能夠從任何混雜着對象和數組的數據結構中提取你想要的信息。

let node = {
    name:'foo',
    loc:{
        start:{
            line:1,
            column:1
        }
    },
    range:[0,3]
}
let {
    loc:{start:{line}},
    range:[startIndex]
} = node;
console.log(line);       // 1
console.log(startIndex); // 0
複製代碼

當使用混合解構語法時，能夠從 node 對象中提取任意想要的信息。

混合解構這種方式對於從 JSON 中提取數據時尤爲有效，再也不須要遍歷整個解構了。

參考

• 深刻理解ES6
• 一個簡單的解構指南
• ES6解構：完整指南
• ES6標準入門之變量的解構賦值

系列文章推薦

• ES6系列-let和const全解析
• ES6系列-箭頭函數全解析
• ES6系列-Promise全解析

寫在最後

• 文中若有錯誤，歡迎在評論區指正，若是這篇文章幫到了你，歡迎點贊和關注
• 本文同步首發與github，可在github中找到更多精品文章，歡迎Watch & Star ★
• 後續文章參見：計劃

歡迎關注微信公衆號【前端小黑屋】，每週1-3篇精品優質文章推送，助你走上進階之旅