解構賦值是對賦值運算符的擴展，可以將屬性/值從對象/數組中取出，賦值給其他變量。

?

一、數組的解構賦值

1、基本用法

只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。

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

let [a, b, ...c] = [1]; a // 1 b // undefined c // []

解構賦值不僅適用于 let 命令，也適用于 var 和 const 命令。

?

2、默認值

解構賦值允許指定默認值。

var [a = 1] = []; a // 1 [a, b = 2] = [1]; a // 1 b // 2 [a, b = 2] = [1, undefined]; a // 1 b // 2

由于 ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，如果一個數組成員不嚴格等于 undefined，默認值是不會生效的。

var [a = 1] = [undefined]; a // 1

var [a = 1] = [null]; a // null

上面代碼中，如果一個數組成員是 null，默認值就不會生效，因為 null 不嚴格等于 undefined。

默認值可以引用解構賦值的其他變量，但該變量必須已經聲明。

let [a = 1, b = a] = []; a // 1 b // 1 let [a = 1, b = a] = [2]; a // 2 b // 2 let [a = 1, b = a] = [1, 2]; a // 1 b // 2 let [a = y, b = 1] = []; // ReferenceError

上面最后一個表達式之所以會報錯，是因為a用到默認值b時，b還沒有聲明。

?

二、對象的解構賦值

1、基本用法

解構不僅可以用于數組，還可以用于對象。

var { a, b } = { a: "aaa", b: "bbb" }; a // "aaa" b // "bbb"

對象解構與數組結構的區別：

• 數組的元素是按次序排列的，變量的取值由它的位置決定；
• 而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

var { a, b } = { b: "bbb", a: "aaa" }; b // "bbb" a // "aaa"

var { c } = { a: "aaa", b: "bbb" }; c // undefined

如果變量名與屬性名不一致，則需要這樣寫：

var { a: x } = { a: "aaa", b: "bbb" }; x // "aaa"

let obj = { a: "aaa", b: "bbb" }; let { a: x, b: y } = obj; x // "aaa" y // "bbb"

對象解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而非前者。

所以上面第二個代碼如果直接輸出a或b則會報錯：

let obj = { a: "aaa", b: "bbb" }; let { a: x, b: y } = obj; a // error: a is not defined b // error: b is not defined

上面代碼中，真正被賦值的是變量x和y，而非模式a和b

注意，對于 let 和 const 來說，變量不能重新聲明，所以一旦賦值的變量以前聲明過，就會報錯。

let a; const obj = { a:"aaa" }; {a} = obj; a // SyntaxError: Unexpected token =

解決方法：在第二行代碼加上“()”

let a; const obj = { a:"aaa" }; ({a} = obj); a // "aaa"

上面代碼中，解析器會將起首的大括號，理解成一個代碼塊，而非賦值語句。

和數組一樣，解構也可以用于嵌套結構的對象。

var obj = {A: {a: {x: 1,}} }; var { A: { a: { x }} } = obj; A // undefined a // undefined x // 1

上面代碼中，只有x是變量，A和a都是模式，不會被賦值。

?

2、默認值

對象的解構也可以指定默認值。

var {a = 1} = {}; a // 1

var {a, b = 2} = {a: 1}; a // 1 b // 2
var { a: x = 1 } = {}; x // 1

默認值生效的條件是，對象的屬性值嚴格等于undefined。

var {a = 1} = {a: undefined}; a // 1

var {a = 3} = {a: null}; a // null

如果將大括號寫在行首，JavaScript 會將其解釋為代碼塊。

var x; {x} = {x: 1}; // SyntaxError: syntax error

上面代碼的寫法會報錯，因為 JavaScript 引擎會將{x}理解成一個代碼塊，從而發生語法錯誤。

// 解決方法 ({x} = {x: 1});

?

三、字符串的解構賦值

字符串也可以解構賦值，因為字符串被轉換成了一個類似數組的對象。

const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o"

類似數組的對象都有一個 length 屬性，因此還可以對這個屬性解構賦值。

let {length : len} = 'hello'; len // 5

?

四、數值和布爾值的解構賦值

解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象。

let {toString: s} = 123; s === Number.prototype.toString // true

let {toString: s} = true; s === Boolean.prototype.toString // true

上面代碼中，數值和布爾值的包裝對象都有toString屬性，因此變量s都能取到值。

解構賦值的規則是，只要等號右邊的值不是對象，就先將其轉為對象。

由于undefined和null無法轉為對象，所以對它們進行解構賦值，都會報錯。

let { prop: x } = undefined; // TypeError

let { prop: y } = null; // TypeError

?

五、函數參數的解構賦值

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

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

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

function iPhone(a = "x", b = "A11", c = "1200"){console.log(a, b, c); } iPhone("xs","A12"); // xs A12 1200

?

六、圓括號問題

1、不能使用圓括號的情況

（ 1 ）變量聲明語句中，不能帶有圓括號。

// 全部報錯 var [(a)] = [1]; var {x: (c)} = {}; var ({x: c}) = {}; var {(x: c)} = {}; var {(x): c} = {}; var { o: ({ p: p }) } = { o: { p: 2 } };

（ 2 ）函數參數中，模式不能帶有圓括號。

// 報錯 function f([(z)]) { return z; }?

（ 3 ）賦值語句中，不能將整個模式，或嵌套模式中的一層，放在圓括號之中。

// 全部報錯 ({ p: a }) = { p: 42 }; ([a]) = [5];

• 上面代碼將整個模式放在圓括號之中，導致報錯。

?

2、可以使用圓括號的情況

• 可以使用圓括號的情況只有一種：賦值語句的非模式部分。

[(b)] = [3]; // 正確 ({ p: (d) } = {}); // 正確 [(parseInt.prop)] = [3]; // 正確

• 上面三行語句都可以正確執行，因為首先它們都是賦值語句，而不是聲明語句；
• 其次它們的圓括號都不屬于模式的一部分。
• 第一行語句中，模式是取數組的第一個成員，跟圓括號無關；
• 第二行語句中，模式是 p ，而不是 d ；
• 第三行語句與第一行語句的性質一致.

?

七、解構賦值的應用

1、交換變量的值

[x, y] = [y, x]; // 交換變量x和y的值

?

2、從函數返回多個值

// 返回一個數組 function arr() {return [1, 2, 3]; } var [a, b, c] = arr();
// 返回一個對象 function obj() {return {a: 1,b: 2}; } var { a, b } = obj();

?

3、函數參數的定義

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

?

4、提取 JSON 數據

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

?

轉載于:https://www.cnblogs.com/Leophen/p/11179027.html

總結

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

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