觸摸ES6 - 解構賦值

時間 2019-11-06

原文原文鏈接

繼續填坑。 javascript

在解釋什麼是解構賦值前，咱們先來看一下， ES5 中對變量的聲明和賦值。html

var str = 'hello word';

左邊一個變量名，右邊能夠是字符串，數組或對象。 java

ES6 中增長了一種更爲便捷的賦值方式。稱爲 Destructuring 。好像你們廣泛翻譯爲解構。解構賦值容許咱們將數組或對象的屬性賦予給任何變量，該變量的定義語法與數組字面量或對象字面量很類似。舉個例子能夠直觀的說明。git

let [speak, name] = ['hello', 'destructuring'];
console.log( speak + ' ' + name ); // hello destructuring

用更加直白的話來描述就是，等號兩邊保持相同的形式（數組對應數組，對象對應對象），則左邊的變量就會被賦予對應的值。若是對應的右邊值缺失，缺失部分變量值爲 undefined ,若是右邊值多餘，依舊可以正常解構。es6

// ES6 中
let arr = [1,2,3,4,5];
let [el1, el2] = [arr];
// 或者
let [el1, el2] = [1,2,3,4,5];
// el1 => 1, el2 => 2

解構賦值也是可嵌套的：github

let value = [1, 2, [3, 4, 5]];
let [el1, el2, [el3, el4]] = value;

一樣能夠經過簡單地在指定位置省略變量來忽略數組中的某個元素：數組

let value = [1, 2, 3, 4, 5];
let [el1, , el3, , el5] = value;

更進一步，默認值一樣也能夠被指定：瀏覽器

let [firstName = "John", lastName = "Doe"] = [];

ES6中，提供了一種將右側多餘的值以數組的形式賦值給左側變量的語法——「rest「模式：數據結構

let [head, ...tail] = [1, 2, 3, 4];  
console.log(tail);  // [2, 3, 4]

當默認值不存在，變量值就等於 undefined函數

let [missing] = [];  
console.log(missing);  // undefined

這裏的數組，指的是部署了 [Iterator](http://www.2ality.com/2015/02/es6-iteration.html) 接口的數據結構。

和數組的用法相相似，一個主要的不一樣點是，對象是無次序排列的，因此變量必須和屬性名相同。

let person = {firstName: "John", lastName: "Doe"};
let {firstName, lastName} = person;

解構另外一個特性是，變量 keys 可使用計算後的屬性名，可是若是你對這容易混淆的話，不建議使用。

let person = {firstName: "John", lastName: "Doe"};
let {firstName: name, lastName} = person;
// `name`變量將會被聲明爲 `person.firstName` 的值

函數的參數也能夠解構賦值。

function add({x: 0, y: 0}){
    return x+y;
}
add({1,2}); // 3

當嘗試解構 null 和 undefined 的時候會報錯。這是由於使用對象賦值模式時，被解構的值必需可以轉換成一個對象（object）。大多數的類型均可以轉換爲一個對象，但null和undefined卻並不能被轉換。

解構賦值的好處有不少，好比

ES6 的解構賦值給 JS 的書寫帶來了很大的便利性，同時也提升了代碼的可讀性。可是也須要注意一些問題，避免拔苗助長。

PS: 整理的時候發現之前還保留着這樣一份文章，無新，基本參考下述文章內容。僅供學習。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。