ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。

以前，為變量賦值，只能直接指定值。

let a = 1; let b = 2; let c = 3;

ES6 允許寫成下面這樣。

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

上面代碼表示，可以從數組中提取值，按照對應位置，對變量賦值。

本質上，這種寫法屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。下面是一些使用嵌套數組進行解構的例子。

?

我認為有用的幾個知識點：

　　1.數組的解構賦值：

　　let [a=3,,c,...rest] = [1,3,5,7,9];

　　a　　//1

　　c　　//5

　　rest　　//[7,9]

　　2.對象的解構賦值 -- 關鍵點：變量名對應對象的屬性名

　　let {a,b=0,c:ze8trgl8bvbq,e:haha} = {a:1,b:3,c:{d:9},haha:90}

　　a　　//1

　　b　　//3

　　c　　//c是模式，不是變量

　　d　　//9

　　e　　//90

3.函數的解構賦值

函數的參數也可以使用解構賦值。

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

上面代碼中，函數add的參數表面上是一個數組，但在傳入參數的那一刻，數組參數就被解構成變量x和y。對于函數內部的代碼來說，它們能感受到的參數就是x和y。

下面是另一個例子。

[[1, 2], [3, 4]].map(([a, b]) => a + b); // [ 3, 7 ]

函數參數的解構也可以使用默認值。

function move({x = 0, y = 0} = {}) { return [x, y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, 0] move({}); // [0, 0] move(); // [0, 0]

上面代碼中，函數move的參數是一個對象，通過對這個對象進行解構，得到變量x和y的值。如果解構失敗，x和y等于默認值。

注意，下面的寫法會得到不一樣的結果。

function move({x, y} = { x: 0, y: 0 }) { return [x, y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, undefined] move({}); // [undefined, undefined] move(); // [0, 0]

用途

變量的解構賦值用途很多。

（1）交換變量的值

let x = 1; let y = 2; [x, y] = [y, x];

上面代碼交換變量x和y的值，這樣的寫法不僅簡潔，而且易讀，語義非常清晰。

（2）從函數返回多個值

函數只能返回一個值，如果要返回多個值，只能將它們放在數組或對象里返回。有了解構賦值，取出這些值就非常方便。

// 返回一個數組function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一個對象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();

（3）函數參數的定義

解構賦值可以方便地將一組參數與變量名對應起來。

// 參數是一組有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 參數是一組無次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});

（4）提取JSON數據

解構賦值對提取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]

上面代碼可以快速提取 JSON 數據的值。

（5）函數參數的默認值

jQuery.ajax = function (url, { async = true, beforeSend = function () {}, cache = true, complete = function () {}, crossDomain = false, global = true, // ... more config }) { // ... do stuff };

指定參數的默認值，就避免了在函數體內部再寫var foo = config.foo || 'default foo';這樣的語句。

（6）遍歷Map結構

任何部署了Iterator接口的對象，都可以用for...of循環遍歷。Map結構原生支持Iterator接口，配合變量的解構賦值，獲取鍵名和鍵值就非常方便。

var map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world

如果只想獲取鍵名，或者只想獲取鍵值，可以寫成下面這樣。

// 獲取鍵名 for (let [key] of map) { // ... } // 獲取鍵值 for (let [,value] of map) { // ... }

（7）輸入模塊的指定方法

加載模塊時，往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

轉載于:https://www.cnblogs.com/hackerPJ/p/7538417.html

總結

以上是生活随笔為你收集整理的es6学习 -- 解构赋值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。