示例

1. 變換變數的值

[x,y] = [y,x]

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

2. 從函式返回多個值

函式只能返回一個值，如果要返回多個值，只能將其放在陣列或物件中返回。有了解構賦值，取出這些值就非常方便。

// 返回一個陣列
function example(){
  return [1,2,3];
}
var [a,b,c] = example();

// 返回一個物件
function example(){
  return {
    foo:1,
    bar:2
  };
}
var { foo,bar } = example();

3. 函式引數的定義

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

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

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

4. 提取 JSON 資料

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

上面的程式碼可以快速提取 JSON 資料的值。

5. 函式引數的預設值

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

指定引數的預設值，就避免了在函式體內部再寫 var foo = config.foo || "default foo"; 這樣的語句。

6. 遍歷 Map 結構

Map.prototype.set() - JavaScript | MDN

任何部署了 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){
  console.log(key);
}
// first
// second

// 獲取鍵值
for(let [,value] of map){
  console.log(value);
}
// hello
// world

7. 輸入模組的指定方法

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

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

出處

• 程式碼來源：《ES 6 標準入門》（第2版） -- 阮一峰 著 ---- 第3章 變數的解構賦值