ES6精華：解構賦值

468122151 發布于2019-08-26 11:54 / 2554人閱讀

摘要：按一定的匹配模式，從數組或對象中解構出相應值，并賦值給變量。和是單值，沒有相應的構造函數，不能被解構。等價于報錯解構方式左側的解構符決定如何看待右側的解構值。解構符意味著視右側的值為對象，采用對象解構。

按一定的匹配模式，從數組或對象中解構出相應值，并賦值給變量。

let [a] = [3]; // a = 3
let [, a] = [3, [7]]; // a = [7]
let {a} = {a: 3}; // a = 3，{a} 相當 {a: a}
let {a: {b}} = {a: {b: 3}}; // b = 3

應用舉例

快速的聲明并賦予相應的屬性值

// --- 以前
let id = obj.id;
let name = obj.name;
let ago = obj.ago;

// --- 現在
let { id, name, ago } = obj;

函數配置參數的解構和賦默認值

// --- 以前
function dealUser(id, conf) {
  let name = conf.name || "";
  let ago = conf.ago || 0;
}

// --- 現在
// 可以直接使用 name 等，以及設置默認值（類型也易見）。
function dealUser(id, {
  name = "",
  ago = 0
}) {
  // 函數體
}

解構非對象

當解構的目標為非對象時，會將目標轉化成相應類型的對象。
NaN可以使用Number構造函數生成，可以被解構。
null和undefined是單值，沒有相應的構造函數，不能被解構。

let {length: a} = "ab"; // a = 2
// 等價于
let {length: a} = new String("ab"); // a = 2

let {toString: a} = NaN; // a = function
let {toString: a} = null; // 報錯

解構方式

左側的解構符決定如何看待右側的解構值。
解構符{}意味著視右側的值為對象，采用對象解構。
解構符[]意味著視右側的值為數組，采用數組解構。
以此可以推斷：數組即支持數組解構也支持對象解構。

原生類數組對象有迭代接口，也支持兩種解構。（arguments, NodeList, new String()）

let [a] = "ab"; // a = "a"，a 為第一個元素。
let {length: a} = "ab"; // a = 2
let {length: a} = ["a", "b"]; // a = 2
let [a] = {0: a, length: 1}; // 報錯，自定義對象沒有迭代接口。

解構失敗 解構不成功

右側沒有相對應的值，解構不報錯，變量值為undefined。

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

解構出錯

當右側值（包括轉換后）不滿足左側要求的類型時，解構失敗。

let [[a]] = [1]; // 報錯，目標 1 不是數組。
let [a] = {a: 3}; // 報錯，目標 {a: 3} 不是數組。

指定默認值

可以為待賦值的變量指定默認值。
默認值可以使用解構中其他變量，但該變量的解構必須在此之前。

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

云服務器 GPU云服務器解構賦值對象解構解構函數精華帖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107787.html

ES6精華：函數擴展

摘要：在函數方面的擴展比較豐富也很實用，本篇概括了這中的精華知識。所以無法成為構造函數，不能使用操作符。參數將擴展運算符作用于參數，即為參數。聲明式，直接為函數名。通過構造函數生成的，為。函數的屬性，在其描述對象的屬性上，為函數名。 ES6在函數方面的擴展比較豐富也很實用，本篇概括了這中的精華知識。 1 箭頭函數箭頭函數是ES6中定義函數的新形式。新形式不僅簡化了定義方式，更為函數本身...

lansheng228 2019-08-22 18:11 評論0 收藏0
ES6 學習筆記（一）let，const和解構賦值

摘要：另外對于已經聲明的變量進行解構賦值時，要非常小心。因此在行首加，將其強制轉化為表達式執行。由于和無法轉為對象，所以對它們進行解構賦值，都會報錯。 let和const let和const是es6新增的兩個變量聲明關鍵字，與var的不同點在于：（1）let和const都是塊級作用域，在{}內有效，這點在for循環中非常有用，只在循環體內有效。var為函數作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 評論0 收藏0
es6 - 解構賦值

摘要：比如上面展示的情況都是可以聯合使用的比如對象的解構賦值對象的解構賦值是基于屬性的。當給已存在的變量解構賦值時，注意加這是由于如果不加會把左邊看成一個代碼塊，會報錯。注意事項數組的解構賦值中，使用的變量必須放在最后。解構賦值解構賦值是一個聽起來比較高大上的特性，但按我的理解，它就是一種語法糖。它并沒有賦予js更強大的能力，只是讓賦值操作更加的靈活，效率。在es6之前，賦值操作需要=...

DirtyMind 2019-08-26 11:45 評論0 收藏0
ES6學習第二章變量的解構賦值

摘要：前言前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據對象值進行匹配。前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接：變量的解構賦值解構賦值ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。解構賦值是對賦值運...

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637
ES6學習第二章變量的解構賦值

摘要：前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據對象值進行匹配。前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接：變量的解構賦值解構賦值ES6 允許按照一定模式，從數組和對象中提取值，對...

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637