国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES6筆記之 變量解構賦值

baukh789 / 2343人閱讀

摘要:變量的解構賦值中允許按照一定模式,從數組和對象中提取,對變量進行賦值。數組的解構賦值上面的代碼標示可以從數組中提取值,按照位置的對應關系對變量進行賦值。默認值解構賦值允許指定默認值。

變量的解構賦值

ES6中允許按照一定模式,從數組和對象中提取,對變量進行賦值。

數組的解構賦值

</>復制代碼

  1. var [a,b,c] = [1,2,3];
  2. a // 1;
  3. b // 2;
  4. c // 3;

上面的代碼標示可以從數組中提取值,按照位置的對應關系對變量進行賦值。
本質上,這種寫法屬于“模式匹配”,只要等號兩邊的模式相同,左邊的變量就會被賦予對應的值。

</>復制代碼

  1. let [foo,[[bar],baz]] = [1,[[2],3]];
  2. foo //1;
  3. bar //2;
  4. baz //3;
  5. let [,,third] = ["foo","bar","baz"];
  6. third //"baz"
  7. let [head,...tail] = [1,2,3,4]
  8. head //1;
  9. tail //[2,3,4]

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

</>復制代碼

  1. let [x,y,z] = ["a"]
  2. x // "a";
  3. y // undefined
  4. z //[]
不完全解構

如果等號左邊的模式只匹配等號右邊數組的一部分,解構依然可以成功,這種情況叫做不完全解構。

</>復制代碼

  1. let [x,y] = [1,2,3]
  2. x //1
  3. y //2

如果等號右邊不是數組,那么將會報錯。(不具備可遍歷的結構)。

只要某種數據結構具有Iterator接口,都可以采用數組形式的解構賦值

</>復制代碼

  1. function* fibs(){
  2. var a = 0;
  3. var b = 1;
  4. while(true){
  5. yield a;
  6. [a,b] = [b,a+b];
  7. }
  8. }
  9. var [first,second,third,fourth,fifth,sixth] = fibs();
  10. sixth // 5

fibs是一個Generator函數,原生具有Iterator接口,解構賦值會依次從這個接口獲取值。

默認值

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

</>復制代碼

  1. var [foo=true] = [];
  2. foo //true

ES6內部使用嚴格相等于運算符(===)判斷一個位置是否有值。所以,一個數組成員如果不嚴格等于undefined,默認值便不會生效。

</>復制代碼

  1. var [x = 1] = [undefined]
  2. x // 1
  3. var [x = 1] = [null]
  4. x // null

表達式也可以作為默認值,如果表達式作為默認值的時候,該表達式是惰性求值的,只有在用到的時候才會求值。

</>復制代碼

  1. function f(){
  2. console.log("aaa")
  3. }
  4. let [x = f()] = [1]

在上面的代碼中,函數f不會執行,是因為x能取到值。

默認值可以引用解構賦值的其他變量,但該變量必須已經聲明。

對象的解構賦值

解構賦值可以應用在數組上,同樣也可以用于對象。

</>復制代碼

  1. var {foo,bar} = {foo:"aaa",bar:"bbb"}
  2. foo // "aaa"
  3. bar // "bbb"

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

</>復制代碼

  1. var {bar,foo} = {foo:"aaa",bar:"bbb"}
  2. foo //"aaa"
  3. bar //"bbb"
  4. var {baz} = {foo:"aaa",bar:"bbb"}
  5. baz //undefined

如果變量名與屬性名不一致,那必須寫成這樣:

</>復制代碼

  1. var {foo:baz} = {foo:"aaa"}
  2. baz //"aaa"

實際上對象的解構賦值是以下的形式簡寫:

</>復制代碼

  1. var {foo:foo,bar:bar} = {foo:"aaa",bar:"bbb"}

對象的解構賦值的內部機制,是先找到同名屬性,然后再賦給對應的變量,真正被賦值的是后者,而不是前者。

但是,采取上面的寫法時,變量的聲明和賦值是一起的,對于let和const而言,變量不能重新聲明,所以一旦賦值的變量以前聲明過,就會報錯。

對象的解構也可以用于嵌套結構的對象。

</>復制代碼

  1. var obj = {
  2. p: [
  3. "hello" ,
  4. {
  5. y : "world"
  6. }
  7. ]
  8. }
  9. var {p:[x,{y}]} = obj
  10. x //"hello"
  11. y //"world"

這時p是模式,不是變量,因此不會被賦值。

對象的解構賦值也可以指定默認值,默認值的生效條件是,對象的屬性值嚴格等于undefined。

</>復制代碼

  1. var {x=3} = {x:undefined}
  2. x //3
  3. var {x=3} = {x:null}
  4. x //null

如果解構模式是嵌套對象,而且子對象所在的父屬性不存在,那么將會報錯。

</>復制代碼

  1. var {foo:{bar}} = {baz:"baz"}

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

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

相關文章

  • ES6 學習筆記(一)let,const和解構賦值

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

    iOS122 評論0 收藏0
  • 《深入理解ES6筆記——解構:使數據訪問更便捷(5)

    摘要:解構,一種黑魔法解構是從對象中提取出更小元素的過程。賦值是對解構出來的元素進行重新賦值。總結本章講解了對象解構賦值和數組解構賦值,以及對象和數組混合情況下的解構賦值操作,最后一個知識點是解構函數的參數。 解構,一種黑魔法 解構是從對象中提取出更小元素的過程。賦值是對解構出來的元素進行重新賦值。 下面的代碼你可能無法在瀏覽器上實時測試,推薦在babel官網在線測試代碼:在線測試ES6代碼...

    Drinkey 評論0 收藏0
  • ES6學習筆記

    摘要:學習筆記在學習的過程中做的一些記錄,用于未來的快速回憶。數組成員為時,默認值仍會生效因為在內部使用嚴格相等運算符,判斷一個位置是否有值,所以當一個數組成員嚴格等于默認值才會生效。 ES6學習筆記 在學習ES6的過程中做的一些記錄,用于未來的快速回憶。 let&const 作用域的概念 ES6新增塊級作用域的概念(一個大括號括起來的部分就是一個塊作用域) let與const用于在塊級作...

    mengbo 評論0 收藏0
  • es6 解構筆記分享

    摘要:只要某種數據結構具有接口,都可以采用數組形式的解構賦值。解構賦值允許指定默認值。默認值可以引用解構賦值的其他變量,但該變量必須已經聲明。解構也可以用于嵌套結構的對象。 Es6 新增了destructuring(解構)語法糖, 我們快來了解一下: 可以按照一定的模式從數組/對象中提取值,為變量賦值數組解構 var a = 1; var b = 2; var c = 3; 可以寫作: v...

    Hancock_Xu 評論0 收藏0

發表評論

0條評論

baukh789

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<