Javascript 解構(gòu)賦值

其余的 ‘…’

通常，如果數(shù)組比左邊的列表長，那么“其余”的數(shù)組項會被省略。

例如，這里只取了兩項，其余的就被忽略了：

let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar
// 其余數(shù)組項未被分配到任何地方

如果我們還想收集其余的數(shù)組項 —— 我們可以使用三個點 "..." 來再加一個參數(shù)以獲取其余數(shù)組項：

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

// rest 是包含從第三項開始的其余數(shù)組項的數(shù)組
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

rest 的值就是數(shù)組中剩下的元素組成的數(shù)組。

不一定要使用變量名 rest，我們也可以使用任何其他的變量名。只要確保它前面有三個點，并且在解構(gòu)賦值的最后一個參數(shù)位置上就行了：

let [name1, name2, ...titles] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
// 現(xiàn)在 titles = ["Consul", "of the Roman Republic"]

默認值

如果數(shù)組比左邊的變量列表短，這里不會出現(xiàn)報錯。缺少對應值的變量都會被賦 undefined：

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

如果我們想要一個“默認”值給未賦值的變量，我們可以使用 = 來提供：

// 默認值
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius（來自數(shù)組的值）
alert(surname); // Anonymous（默認值被使用了）

默認值可以是更加復雜的表達式，甚至可以是函數(shù)調(diào)用。不過，這些表達式或函數(shù)只會在這個變量未被賦值的時候才會被計算。

舉個例子，我們使用了 ?prompt? 函數(shù)來提供兩個默認值：

// 只會提示輸入姓氏
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];

alert(name);    // Julius（來自數(shù)組）
alert(surname); // 你輸入的值

請注意：prompt 將僅針對缺失值（surname）運行。

對象解構(gòu)

解構(gòu)賦值同樣適用于對象。

基本語法是：

let {var1, var2} = {var1:…, var2:…}

在等號右側(cè)是一個已經(jīng)存在的對象，我們想把它拆分到變量中。等號左側(cè)包含了對象相應屬性的一個類對象“模式（pattern）”。在最簡單的情況下，等號左側(cè)的就是 {...} 中的變量名列表。

如下所示：

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

屬性 options.title、options.width 和 options.height 值被賦給了對應的變量。

變量的順序并不重要，下面這個代碼也是等價的：

// 改變 let {...} 中元素的順序
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

等號左側(cè)的模式（pattern）可以更加復雜，指定屬性和變量之間的映射關系。

如果我們想把一個屬性賦值給另一個名字的變量，比如把 options.width 屬性賦值給名為 w 的變量，那么我們可以使用冒號來設置變量名稱：

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

冒號的語法是“從對象中什么屬性的值：賦值給哪個變量”。上面的例子中，屬性 width 被賦值給了 w，屬性 height 被賦值給了 h，屬性 title 被賦值給了同名變量。

對于可能缺失的屬性，我們可以使用 "=" 設置默認值，如下所示：

let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

就像數(shù)組或函數(shù)參數(shù)一樣，默認值可以是任意表達式甚至可以是函數(shù)調(diào)用。它們只會在未提供對應的值時才會被計算/調(diào)用。

在下面的代碼中，prompt 提示輸入 width 值，但不會提示輸入 title 值：

let options = {
  title: "Menu"
};

let {width = prompt("width?"), title = prompt("title?")} = options;

alert(title);  // Menu
alert(width);  // (prompt 的返回值)

我們還可以將冒號和等號結(jié)合起來：

let options = {
  title: "Menu"
};

let {width: w = 100, height: h = 200, title} = options;

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

如果我們有一個具有很多屬性的復雜對象，那么我們可以只提取所需的內(nèi)容：

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// 僅提取 title 作為變量
let { title } = options;

alert(title); // Menu

剩余模式（pattern）"…"

如果對象擁有的屬性數(shù)量比我們提供的變量數(shù)量還多，該怎么辦？我們可以只取其中的某一些屬性，然后把“剩余的”賦值到其他地方嗎？

我們可以使用剩余模式（pattern），與數(shù)組類似。一些較舊的瀏覽器不支持此功能（例如 IE，可以使用 Babel 對其進行 polyfill），但可以在現(xiàn)代瀏覽器中使用。

看起來就像這樣：

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 名為 title 的屬性
// rest = 存有剩余屬性的對象
let {title, ...rest} = options;

// 現(xiàn)在 title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100

不使用 ?let? 時的陷阱

在上面的示例中，變量都是在賦值中通過正確方式聲明的：let {…} = {…}。當然，我們也可以使用已有的變量，而不用 let，但這里有一個陷阱。

以下代碼無法正常運行：

let title, width, height;

// 這一行發(fā)生了錯誤
{title, width, height} = {title: "Menu", width: 200, height: 100};

問題在于 JavaScript 把主代碼流（即不在其他表達式中）的 {...} 當做一個代碼塊。這樣的代碼塊可以用于對語句分組，如下所示：

{
  // 一個代碼塊
  let message = "Hello";
  // ...
  alert( message );
}

因此，這里 JavaScript 假定我們有一個代碼塊，這就是報錯的原因。我們需要解構(gòu)它。

為了告訴 JavaScript 這不是一個代碼塊，我們可以把整個賦值表達式用括號 ?(...)? 包起來：

let title, width, height;

// 現(xiàn)在就可以了
({title, width, height} = {title: "Menu", width: 200, height: 100});

alert( title ); // Menu

嵌套解構(gòu)

如果一個對象或數(shù)組嵌套了其他的對象和數(shù)組，我們可以在等號左側(cè)使用更復雜的模式（pattern）來提取更深層的數(shù)據(jù)。

在下面的代碼中，options 的屬性 size 是另一個對象，屬性 items 是另一個數(shù)組。賦值語句中等號左側(cè)的模式（pattern）具有相同的結(jié)構(gòu)以從中提取值：

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 為了清晰起見，解構(gòu)賦值語句被寫成多行的形式
let {
  size: { // 把 size 賦值到這里
    width,
    height
  },
  items: [item1, item2], // 把 items 賦值到這里
  title = "Menu" // 在對象中不存在（使用默認值）
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

對象 options 的所有屬性，除了 extra 屬性在等號左側(cè)不存在，都被賦值給了對應的變量：

最終，我們得到了 width、height、item1、item2 和具有默認值的 title 變量。

注意，size 和 items 沒有對應的變量，因為我們?nèi)〉氖撬鼈兊膬?nèi)容。

智能函數(shù)參數(shù)

有時，一個函數(shù)有很多參數(shù)，其中大部分的參數(shù)都是可選的。對用戶界面來說更是如此。想象一個創(chuàng)建菜單的函數(shù)。它可能具有寬度參數(shù)，高度參數(shù)，標題參數(shù)和項目列表等。

下面是實現(xiàn)這種函數(shù)的一個很不好的寫法：

function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}

在實際開發(fā)中，記憶如此多的參數(shù)的位置是一個很大的負擔。通常集成開發(fā)環(huán)境（IDE）會盡力幫助我們，特別是當代碼有良好的文檔注釋的時候，但是…… 另一個問題就是，在大部分的參數(shù)只需采用默認值的情況下，調(diào)用這個函數(shù)時會需要寫大量的 undefined。

像這樣：

// 在采用默認值就可以的位置設置 undefined
showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])

這太難看了。而且，當我們處理更多參數(shù)的時候可讀性會變得很差。

解構(gòu)賦值可以解決這些問題。

我們可以用一個對象來傳遞所有參數(shù)，而函數(shù)負責把這個對象解構(gòu)成各個參數(shù)：

// 我們傳遞一個對象給函數(shù)
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

// ……然后函數(shù)馬上把對象解構(gòu)成變量
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items – 提取于 options，
  // width, height – 使用默認值
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}

showMenu(options);

我們也可以使用帶有嵌套對象和冒號映射的更加復雜的解構(gòu)：

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

function showMenu({
  title = "Untitled",
  width: w = 100,  // width goes to w
  height: h = 200, // height goes to h
  items: [item1, item2] // items first element goes to item1, second to item2
}) {
  alert( `${title} ${w} ${h}` ); // My Menu 100 200
  alert( item1 ); // Item1
  alert( item2 ); // Item2
}

showMenu(options);

完整語法和解構(gòu)賦值是一樣的：

function({
  incomingProperty: varName = defaultValue
  ...
})

對于參數(shù)對象，屬性 incomingProperty 對應的變量是 varName，默認值是 defaultValue。

請注意，這種解構(gòu)假定了 showMenu() 函數(shù)確實存在參數(shù)。如果我們想讓所有的參數(shù)都使用默認值，那我們應該傳遞一個空對象：

showMenu({}); // 不錯，所有值都取默認值

showMenu(); // 這樣會導致錯誤

我們可以通過指定空對象 {} 為整個參數(shù)對象的默認值來解決這個問題：

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}

showMenu(); // Menu 100 200

在上面的代碼中，整個參數(shù)對象的默認是 {}，因此總會有內(nèi)容可以用來解構(gòu)。

總結(jié)

• 解構(gòu)賦值可以簡潔地將一個對象或數(shù)組拆開賦值到多個變量上。
• 解構(gòu)對象的完整語法：

let {prop : varName = default, ...rest} = object

這表示屬性 prop 會被賦值給變量 varName，如果沒有這個屬性的話，就會使用默認值 default。


沒有對應映射的對象屬性會被復制到 rest 對象。


• 解構(gòu)數(shù)組的完整語法：

let [item1 = default, item2, ...rest] = array

數(shù)組的第一個元素被賦值給 item1，第二個元素被賦值給 item2，剩下的所有元素被復制到另一個數(shù)組 rest。


• 從嵌套數(shù)組/對象中提取數(shù)據(jù)也是可以的，此時等號左側(cè)必須和等號右側(cè)有相同的結(jié)構(gòu)。

任務

解構(gòu)賦值

重要程度: 5

我們有一個對象：

let user = {
  name: "John",
  years: 30
};

寫一個解構(gòu)賦值語句使得：

• ?name? 屬性賦值給變量 ?name?。
• ?years? 屬性賦值給變量 ?age?。
• ?isAdmin? 屬性賦值給變量 ?isAdmin?（如果屬性缺失則取默認值 false）。

下面是賦值完成后的值的情況：

let user = { name: "John", years: 30 };

// 等號左側(cè)是你的代碼
// ... = user

alert( name ); // John
alert( age ); // 30
alert( isAdmin ); // false

解決方案

let user = {
  name: "John",
  years: 30
};

let {name, years: age, isAdmin = false} = user;

alert( name ); // John
alert( age ); // 30
alert( isAdmin ); // false

最高薪資

重要程度: 5

這兒有一個 ?salaries? 對象：

let salaries = {
  "John": 100,
  "Pete": 300,
  "Mary": 250
};

新建一個函數(shù) topSalary(salaries)，返回收入最高的人的姓名。

• 如果 ?salaries? 是空的，函數(shù)應該返回 ?null?。
• 如果有多個收入最高的人，返回其中任意一個即可。

P.S. 使用 ?Object.entries? 和解構(gòu)語法來遍歷鍵/值對。

解決方案

function topSalary(salaries) {

  let maxSalary = 0;
  let maxName = null;

  for(let [name, salary] of Object.entries(salaries)) {
    if (maxSalary < salary) {
      maxSalary = salary;
      maxName = name;
    }
  }

  return maxName;
}