ECMAScript6(2)：解構賦值

tinylcy 發布于2019-08-23 11:45 / 3275人閱讀

摘要：解構賦值解構賦值簡單來說就是對應位置數組或對應鍵名對象的變量匹配過程。字符串集合使用結構賦值實現疊加并交換變量對象的解構賦值對象的解構賦值與變量位置次序無關只取決于鍵名是否嚴格相等。

解構賦值

解構賦值簡單來說就是對應位置(數組)或對應鍵名(對象)的變量匹配過程。如果匹配失敗, 對于一般變量匹配不到結果就是 undefined, 對于具有展開運算符(...)的變量結果就是空數組。

數組的解構賦值

var [a, b, c] = [1, 2, 3];   //a=1, b=2, c=3
var [, , c] = [1, 2, 3];   //c=3
var [x, , y] = [1, 2, 3];  //x=1, y=3
var [head, ...tail] = [1, 2, 3, 4];   //head = 1, tail = [2, 3, 4];
var [x, y, ...z] = [1];   //x=1, y=undefined, z=[];
var [a, [b, c], d] = [1, [2, 3], 4];   //a=1.b=2, c=3, d=4
var [a, [b], d] = [1, [2, 3], 4];   //a=1.b=2, d=4

數組的解構賦值可以具有默認值, 在 ES6中對于目標數據使用嚴格相等(===)比較是否為空(undedined)。如果默認值是表達式, 那么對于該表達式采用惰性求值, 即只有在對應位置為空(undedined)時才執行該表達式。

var [a=1, b] = [];   //a=1, b=undefined
var [a=1, b] = [2, 3];  //a=2, b=3
var [a=1, b] = [undefined, 3];   //a=1.b=3
var [a=1, b] = [null, 3];  //a=null, b=3
var [a=1, b] = [NaN, 3];  //a=NaN, b=3

function f(){
  console.log("done");
  return 2;
}
var [a=f()] = [1];    //a=1
var [a=f()] = [];    //a=2, 輸出 "done"

解構賦值的右側表達式在必要的隱式轉換后如果不具有 iterator 則遍歷失敗, 關于 iterator, 具體看iterator部分。這里可以先記住, 左邊是數組結構的解構賦值, 右側可以是數組, 字符串, 集合, Generator 函數, map等。

//字符串
var [a, b, c, d] = "123";   //a="1", b="2", c="3", d=undefined

//集合
var [a, b, c] = new Set(["1", "2", "3"]);  //a="1", b="2", c="3"

//Generator
function* fib(){
  let a = 1;
  let b = 1;
  while(1){
    yield a;
    [a, b] = [b, a + b];      //使用結構賦值實現疊加并交換變量
  }
}
var [a, b, c, d, e, f] = fib();  //a=1, b=1, c=2, d=3, e=5, f=8

//map
var map = new Map();
map.set("a", 1);
map.set("b", 2);
var [a, b] = map;  //a=["a", 1], b=["b", 2]

對象的解構賦值

對象的解構賦值與變量位置次序無關, 只取決于鍵名是否嚴格相等(===)。如果匹配失敗, 結果就是 undefined

var {a, b, f} = {b:2, a:3, d:4};  //a=3, b=2, f=undefined
var node = {
  loc: {
    start:{
      x:1,
      y:2
    }
  }
};
var {loc: {start: {x:line}}} = node;  //line=1

可以在復制時對屬性重命名, 但此時原名只用于匹配參數, 不生成變量：

var {name:alias} = {name:"Bob"};  //alias="Bob"
console.log(name);   //"global"
console.log(alias);   //"Bob"

對象解構同樣可以指定默認值, 默認值生效(或表達式被行)的條件是對應屬性值嚴格等于(===) undefined

var {a:3, b} = {b:2}; //a=3, b=2
var {a:3, b} = {a:null, b:2}; //a=null, b=2

解構嵌套對象父屬性不存在會報錯：

var {foo:{bar}} = {ba: 2};   //報錯

解構對象如果和聲明分開, 獨立成為一行要加圓括號, 就想用 eval 解析 JSON 字符串的時候一樣。因為系統會把一行開頭花括號默認作為塊級作用域的開始, 而不是對象的開始。

var a, b;
({a, b} = {a:2, b:10});   //a=2, b=10
{a, b} = {a:2, b:10};   //報錯

//以下表達式無意義, 但沒有錯
({}=[1, 2]);
({}="abc");
({}=[]);

注意, 除了這樣的情況, 不要濫用圓括號

右側變量通過隱式類型轉換可以轉為對象的情況下也可以結構賦值：

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

技巧：解構的用處很多, 包括交換變量, 簡化傳參(可帶默認值),

//參數傳遞
function f([x, y, z=4]){
  return [x+1, y+2, z+3];
}
var [a, b, c] = f([1, 2]);  //a=2, b=4, c=7
[[1, 2], [3, 4]].map(([a, b]) => a + b);   //返回 [3, 7]

//交換變量
var a=2, b=4;
[a, b] = [b, a];  //a=4, b=2

云服務器 GPU云服務器解構賦值 ECMAScript6 對象解構解構函數

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

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

ECMAScript6 新特性——“變量的解構賦值”

摘要：數組的解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。如果變量名與屬性名不一致，必須寫成下面這樣。 1 數組的解構賦值 ES6允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。基本用法 { var [a,[b,c],d,,...f] = [1,[2,3],4,5,6,7]; console...

Eric 2019-08-19 17:59 評論0 收藏0
常用ECMAScript6語法歸納

摘要：對象的解構賦值函數執行后，返回的是一個對象。分別取出對象中屬性為和的值，根據解構賦值的規則，在左側聲明變量，放在大括號中，變量名要和屬性名保持一致。箭頭函數在中，箭頭函數就是函數的一種簡寫形式允許使用箭頭定義函數。原文博客地址，歡迎學習交流:點擊預覽聲明變量可以使用let、const關鍵字聲明變量，而不推薦使用var聲明變量 var聲明變量的問題：可以多次重復聲明同一個變量...

raledong 2019-08-22 15:14 評論0 收藏0
ECMAScript6標準入門（一）新增變量與數據結構

摘要：一簡介與的關系是的規格，是的一種實現另外的方言還有和轉碼器命令行環境安裝直接運行代碼命令將轉換成命令瀏覽器環境加入，代碼用環境安裝，，根目錄建立文件加載為的一個鉤子設置完文件后，在應用入口加入若有使用，等全局對象及上方法安裝一、ECMAScript6 簡介 (1) 與JavaScript的關系 ES是JS的規格，JS是ES的一種實現（另外的ECMAScript方言還有Jscript和...

Tangpj 2019-08-21 14:26 評論0 收藏0
ECMAScript6(5)：函數的擴展

摘要：否則調用時依然需要傳參報錯注意這里不能用觸發默認值這里我們還需要單獨討論一下默認參數對的影響很明顯，默認參數并不能加到中。關于作用域集中在函數擴展的最后討論。那如果函數的默認參數是函數呢燒腦的要來了如果基礎好那就根本談不上不燒腦。參數默認值 ES5中設置默認值非常不方便, 我們這樣寫: function fun(a){ a = a || 2; console.log(a); ...

afishhhhh 2019-08-23 11:45 評論0 收藏0
JavaScript中的解構賦值

摘要：是這樣描述解構賦值的解構賦值語法是一種表達式用來將數組中的值或對象中的屬性取出來區分為不同變量。現在讓我們將坐標點放進一個數組中現在要對這些點進行處理，傳統可以想到的方法是這樣的借助解構賦值，能變得這樣簡潔使用箭頭函數更簡潔 JavaScript是一種很有趣的語言，我個人很喜歡它，雖然仍還有些人不大喜歡它。在ECMAScript6（ES6）中，有許多有用的特性來使JavaScript開...

Panda 2019-08-23 18:07 評論0 收藏0