ES6允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。它在語法上比ES5所提供的更加簡潔、緊湊、清晰。它不僅能減少你的代碼量，還能從根本上改變你的編碼方式。

以前，為變量賦值，我們只能直接指定值，比如

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

現在可以用數組解構的方式來進行賦值

let [a, b, c] = [1, 2, 3];console.log(a, b, c); // 1, 2, 3

這是數組解構最基本類型的用法，還可以解構對象數組

// 對象數組解構let [a, b, c] = [{name: ’jacky’}, {name: ’monkey’}, {name: ’houge’}];console.log(a, b, c); // {name: ’jacky’}, {name: ’monkey’}, {name: ’houge’}3.數組模式和賦值模式統一

這條可以理解為等號左邊和等號右邊的形式要統一，如果不統一解構將失敗。

let [a, [b, c], d] = [1, [2, 3], 4];console.log(a, b, c, d); // 1 2 3 4 // 提取除第二、三個外的所有數值let [a, , , d] = [1, 2, 3, 4];console.log(a, d); //1 4 let [a, ...b] = [1, 2, 3, 4];console.log(a, b); // 1 [2, 3, 4]let [a, , , ...d] = [1, 2, 3, 4, 5];console.log(a, d); // 1 [4, 5]如果解構不成功，變量的值就等于undefinedlet [a, b, c] = [2, 3];console.log(a, b, c); // 2 3 undefinedlet [c] = [];console.log(c); // undefined

如果解構不成功，變量的值就等于undefined

let [a, b, c] = [2, 3];console.log(a, b, c); // 2 3 undefinedlet [c] = [];console.log(c); // undefined

上述是完全解構的情況，還有一種是不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的數組，解構依然可以成功。

let [x, y] = [1, 2, 3]; console.log(x, y); // 1 2let [a, [b], d] = [1, [2, 3], 4];console.log(a, b, d); // 1 2 44.解構的默認值

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

let [a, b=2] = [1];console.log(a, b); // 1 2let [a=1, b=2, c, d=13] = [10, 11, 12];console.log(a, b, c, d); // 10 11 12 135.對象的解構賦值

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

// 對象解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而非前者。let obj = { a: 'aaa', b: 'bbb' };let { a: x, b: y } = obj; console.log(x, y); // aaa bbblet { a, b } = { a: ’aaa’, b: ’bbb’ };console.log(a, b); // aaa bbb// 不按照順序let { b, a } = { a: ’test1’, b: ’test2’ }console.log(a, b) // test1 test2// 嵌套解構let { obj: { name }} = { obj: { name: ’jacky’, age: ’22’ } }console.log(name) // jacky// 稍微復雜的嵌套let obj = { p: [’Hello’,{ y: ’World’ } ]};let { p: [x, { y }] } = obj;console.log(x, y); // Hello World

如果變量名與屬性名不一致，必須寫成下面這樣。

var { foo: rename } = { foo: 'aaa',bar: 'bbb' };console.log(rename); // aaaconsole.log(foo); // Uncaught ReferenceError: foo is not defined

如果在解構之前就定義了變量，這時候再解構會出現問題。下面是錯誤的代碼，編譯會報錯（因為js引擎會將{a}理解成一個代碼塊，從而發生語法錯誤。只有不將大括號寫在行首，避免js將其解釋成代碼塊，才能解決這個問題）

let a;let obj = { a: 'aaa' };{a} = obj; // Uncaught SyntaxError: Unexpected token ’=’

要解決報錯，使程序正常，這時候只要在解構的語句外邊加一個圓括號就可以了

let a;let obj = { a: 'aaa' };( {a} = obj );console.log(a); // aaa6.函數參數

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

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

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

function fn(x, y = 7) { return x + y;}console.log(fn(3)); // 107.字符串解構

字符串被轉換成了一個類似數組的對象。

const [a, b, c, d, e, f] = 'hello';console.log(a); //hconsole.log(b); //econsole.log(c); //lconsole.log(d); //lconsole.log(e); //oconsole.log(f); //undefined8.數值和布爾值的解構賦值

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

let {toString: s} = 0;console.log(s === Number.prototype.toString); // truelet {toString: s} = true;console.log(s === Boolean.prototype.toString); // true

解構賦值的規則是，只要等號右邊的值不是對象或數組，就先將其轉為對象。由于undefined和null無法轉為對象，所以對它們進行解構賦值，都會報錯

let { prop: x } = undefined; // TypeErrorlet { prop: y } = null; // TypeError9.解構賦值的應用1.交換變量的值

通常交換兩個變量的方法需要一個額外的臨時變量,如下

let a = 1;let b = 2;let temp;temp = a;a = b;b = temp;console.log(a, b); // 2 1

用ES6解構賦值的話，會變得很簡潔

let a = 1;let b = 2;[a, b] = [b ,a];console.log(a, b); // 2 12.從函數返回多個值

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

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

有種場景，比如有一個數組（可能為空）。并且希望訪問數組的第一個、第二個或第n個項，但如果該項不存在，則使用指定默認值。

通常會使用數組的length屬性來判斷

const list = [];let firstItem = ’hello’;if (list.length > 0) { firstItem = list[0];}console.log(firstItem); // hello

如果用ES6解構賦值來實現上述邏輯

const list = [];const [firstItem = ’hello’] = list;console.log(firstItem); // ’hello’4.提取 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]5.遍歷 Map 結構

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

const 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) { // ...}

以上就是詳解JS ES6變量的解構賦值的詳細內容，更多關于JS ES6變量解構賦值的資料請關注好吧啦網其它相關文章！