【ES6基礎】解構賦值（destructuring assignment）

咱們常常能夠在其餘編程語言(如GO語言)中看到多返回值這種特性，由於在不少實際場景中，函數的返回值中，函數的返回值並不僅有一個單一的值。ES6以前，並無能夠直接使用語法來實現多返回值的特性。ES6終於出現瞭解構賦值的語法糖來解決此類問題。

解構賦值是一種表達式，容許您使用數組或對象，將可迭代對象的值或屬性分配給變量。解構賦值能讓咱們用更簡短的語法進行多個變量的賦值，大大的減小了代碼量。解構表達式有兩種：array和object。

今天的文章筆者將從如下方面進行介紹：

• 使用數組表達式解構賦值
  • 常規用法
  • 忽略數組中的某些值
  • 使用展開語法
  • 默認參數值
  • 嵌套數組解構
  • 做爲函數參數
• 使用對象表達式解構賦值
  • 常規用法
  • 默認參數值
  • 嵌套對象
  • 做爲函數參數
• 其餘
  • 解構對象的方法
  • 獲取字符串長度
  • 拆分字符串
  • 交換變量
  • 遍歷Map結構
  • 加載指定模塊的方法
• 經常使用場景介紹

本篇本章閱讀時間預計15分鐘

使用數組表達式解構賦值

常規用法

如何將一個數組的值，賦值給多個變量？數組解構語法能讓咱們快速的迭代數組的元素，並賦值給多個變量。

E6以前，咱們能夠這種形式將數組的內容賦值給多個變量：

var myArray = [1, 2, 3];
var a = myArray[0];
var b = myArray[1];
var c = myArray[2];複製代碼

ES6後，咱們能夠經過數組解構語法，在一行語句裏完成上述操做。

let myArray = [1, 2, 3];
let a, b, c;
[a, b, c] = myArray; //array destructuring assignment syntax複製代碼

上述代碼中，[a, b, c]就是解構表達式。在數組解構語句的左側就是須要進行賦值的多個變量，等號右側則是咱們須要分配的值。

咱們還可讓上述代碼更短，你還能夠這麼寫，代碼以下：

let [a, b, c] = [1, 2, 3];

咱們在同一行語句中建立變量，而不是分別建立。是否是更清爽。

若是左邊的數值少於右邊數組的項數，左邊變量的值只會和右邊數組的內容一一對應，多於的內容將會忽略。

忽略數組中某些值

若是隻有兩個變量，咱們數組內容有三項，咱們想跳過數組中的第二項，咱們如何使用數組解構賦值呢？代碼以下：

let [a, , b] = [1, 2, 3];
console.log(a);
console.log(b);複製代碼

上述代碼咱們使用, ,忽略數組中的第二項，建議中間有空格，方便咱們閱讀。

使用展開語法

上篇文章《【ES6基礎】展開語法(Spread syntax)》，筆者介紹了展開語法的幾個應用場景，因爲上篇文章沒介紹解構賦值，因此在這裏給你們介紹展開語法在解構賦值的應用。以下段代碼所示：

let [a, ...b] = [1, 2, 3, 4, 5, 6];
console.log(a);
console.log(Array.isArray(b));
console.log(b);」複製代碼

上述代碼則會輸出：

1
true
2,3,4,5,6複製代碼

上述代碼，你能夠看到b變量被解構賦值成數組，這裏...就是咱們上篇文章提到的剩餘參數場景的運用。

若是想跳過數組中的部分值，咱們能夠這麼作，以下段代碼所示：

let [a, , ,...b] = [1, 2, 3, 4, 5, 6];
console.log(a);
console.log(b);複製代碼

上述代碼則會輸出：

1
4，5，6複製代碼

這段代碼咱們跳過了數組的第2項和第3項。

默認參數值

筆者在《【ES6基礎】默認參數值》給你們介紹瞭如何使用默認參數值，在解構賦值中，咱們如何設置變量的默認值呢，以下段代碼所示：

let [a, b, c = 3] = [1, 2];
console.log(c); //Output "3」複製代碼

嵌套數組

咱們還能夠從多維數組中提取值並分配給變量，以下段代碼所示：

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

做爲函數參數

咱們還可使用數組解構表達式做爲函數參數來提取可迭代數組的值，做爲參數傳遞給函數參數,以下段代碼所示：

function myFunction([a, b, c = 3]) {
     console.log(a, b, c); //Output "1 2 3"
   }
myFunction([1, 2]);複製代碼

筆者在《【ES6基礎】默認參數值》說起到咱們能夠傳遞undefined，指定某個具體的參數使用默認值，咱們可使用結構賦值爲相關變量提供一組默認值，並傳入undefined，以下段代碼所示：

function myFunction([a, b, c = 3] = [1, 2, 3]) {
     console.log(a, b, c);  //Output "1 2 3"
   }
myFunction(undefined);複製代碼

在這裏，咱們將undefined做爲參數傳遞，所以使用默認數組[1,2,3]進行提取賦值。

使用對象表達式解構賦值

常規用法

對象解構賦值將對象屬性的值賦給多個變量。ES6以前咱們能夠這樣把對象的屬性賦值給多個變量，以下段代碼所示：

var object = {name : "John", age : 23};
var name = object.name;
var age = object.age;複製代碼

在ES6裏，咱們可使用對象解構表達式，在單行裏給多個變量賦值，以下段代碼所示：

let object = {name : "John", age : 23};
let name, age;
({name, age} = object); //object destructuring assignment syntax複製代碼

對象解構賦值的左側爲解構賦值表達式，右側爲對應要分配賦值的對象。解構語句的兩邊千萬不要遺漏左右括號（），不然會報錯。

還有一點須要格外注意，解構對象變量的名稱必定要和右邊對象的屬性名稱保持一致，不然會提示變量的值爲undefined。若是你想以其它的變量名進行命名，你能夠這麼作，以下段代碼所示：

let object = {name : "John", age : 23};
let x, y;
({name: x, age: y} = object);複製代碼

上述代碼x,y爲對應對象屬性的值John,23。若是你輸出name或age,編譯器則會提示ReferenceError: 變量 is not defined

咱們可讓代碼更短，以下段代碼所示：

let {name: x, age: y} = {name : "John", age : 23};複製代碼

上述代碼因爲聲明變量和解構賦值在同一行，所以對象解構語句兩邊無需左右括號（）。

默認參數值

在解構對象針對未分配值的變量，咱們能夠爲變量提供默認值，以下段代碼所示：

let {a, b, c = 3} = {a: "1", b: "2"};
console.log(c); //Output "3」複製代碼

在解構對象時變量名支持表達式計算，以下段代碼所示：

let {["first"+"Name"]: x} = { firstName: "Eden" };
console.log(x); //Output "Eden」複製代碼

嵌套對象

咱們還能夠從嵌套對象中提取屬性值，即對象中的對象。 以下段代碼所示：

let {name, otherInfo: {age}} = {name: "Eden", otherInfo: {age:23}};
console.log(name, age); //Eden 23複製代碼

做爲函數參數

就像數組解構賦值同樣，咱們也可使用對象解構賦值做爲函數參數，以下段代碼所示：

function myFunction({name = 'Eden', age = 23, profession ="Designer"} = {}){
    console.log(name, age, profession); // Outputs "John 23 Designer"
}
myFunction({name: "John", age: 23});複製代碼

在這裏，咱們傳遞一個空對象做爲默認參數值，若是將undefined做爲函數參數傳遞，變量將使用默認值。

其餘

解構對象的方法

好比結構Math對象的方法，以下段代碼所示：

let {floor,pow}=Math;//把Math裏的方法提取出來變成一個變量
let a=1.1;
console.log(floor(a));//1
console.log(pow(2,3));//8複製代碼

獲取字符串的長度

var {length}='lxy';
console.log(length);//3複製代碼

拆分字符串

var [a,b,c,d]='前端達人';
console.log(a,b,c,d) // 輸出：前 端 達 人複製代碼

交換變量

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

遍歷Map結構

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
    console.log(key + " is " + value);
}複製代碼

加載指定模塊的方法

const { SourceMapConsumer, SourceNode } = require("source-map");複製代碼

經常使用場景介紹

好比咱們常常與後端API接口作數據交互，咱們須要處理返回的JSON對象，使用解構方式大大簡化了咱們的代碼，以下段代碼所示：

let jsonData = {
    id: 42,
    status: "OK",
    data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]複製代碼

小節

今天的內容有些多，想必你們對解構賦值有了全面的認識吧，使用解構賦值是否是很強大，大大簡化了咱們的代碼量，雖然優點蠻多，可是增長對代碼的理解難度，咱們只有在實踐中不斷的運用，來加深咱們對解構賦值的認識。

ES6相關文章

【ES6基礎】let和做用域

【ES6基礎】const介紹

【ES6基礎】默認參數值

【ES6基礎】展開語法(Spread syntax)

更多精彩內容，請微信關注」前端達人」公衆號！