成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6筆記之 變量解構(gòu)賦值

baukh789 / 2339人閱讀

摘要：變量的解構(gòu)賦值中允許按照一定模式，從數(shù)組和對象中提取，對變量進(jìn)行賦值。數(shù)組的解構(gòu)賦值上面的代碼標(biāo)示可以從數(shù)組中提取值，按照位置的對應(yīng)關(guān)系對變量進(jìn)行賦值。默認(rèn)值解構(gòu)賦值允許指定默認(rèn)值。

變量的解構(gòu)賦值

ES6中允許按照一定模式，從數(shù)組和對象中提取，對變量進(jìn)行賦值。

數(shù)組的解構(gòu)賦值 
var [a,b,c] = [1,2,3];
a // 1;
b // 2;
c // 3;

上面的代碼標(biāo)示可以從數(shù)組中提取值，按照位置的對應(yīng)關(guān)系對變量進(jìn)行賦值。
本質(zhì)上，這種寫法屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應(yīng)的值。

let [foo,[[bar],baz]] = [1,[[2],3]];
foo //1;
bar //2;
baz //3;

let [,,third] = ["foo","bar","baz"];
third //"baz"

let [head,...tail] = [1,2,3,4]
head //1;
tail //[2,3,4]

如果解構(gòu)不成功，變量的值就等于undefined。

let [x,y,z] = ["a"]
x // "a";
y // undefined
z //[]
不完全解構(gòu)

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

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

如果等號右邊不是數(shù)組，那么將會報(bào)錯。（不具備可遍歷的結(jié)構(gòu)）。

只要某種數(shù)據(jù)結(jié)構(gòu)具有Iterator接口，都可以采用數(shù)組形式的解構(gòu)賦值

function* fibs(){
    var a = 0;
    var b = 1;
    while(true){
        yield a;
        [a,b] = [b,a+b];
    }
}

var [first,second,third,fourth,fifth,sixth] = fibs();
sixth  // 5

fibs是一個Generator函數(shù)，原生具有Iterator接口，解構(gòu)賦值會依次從這個接口獲取值。

默認(rèn)值

解構(gòu)賦值允許指定默認(rèn)值。

var [foo=true] = [];
foo   //true

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

var [x = 1] = [undefined]
x  // 1

var [x = 1] = [null]
x  // null

表達(dá)式也可以作為默認(rèn)值，如果表達(dá)式作為默認(rèn)值的時候，該表達(dá)式是惰性求值的，只有在用到的時候才會求值。

function f(){
    console.log("aaa")
}

let [x = f()] = [1]

在上面的代碼中，函數(shù)f不會執(zhí)行，是因?yàn)閤能取到值。

默認(rèn)值可以引用解構(gòu)賦值的其他變量，但該變量必須已經(jīng)聲明。

對象的解構(gòu)賦值

解構(gòu)賦值可以應(yīng)用在數(shù)組上，同樣也可以用于對象。

 var {foo,bar} = {foo:"aaa",bar:"bbb"}
 foo  // "aaa"
 bar  // "bbb"

對象的解構(gòu)賦值與數(shù)組有一個不同點(diǎn)，就是數(shù)組的元素是按次序排序的，變量的取值由它的位置決定，而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

var {bar,foo} = {foo:"aaa",bar:"bbb"}
foo  //"aaa"
bar  //"bbb"


var {baz} = {foo:"aaa",bar:"bbb"}
baz  //undefined

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

var {foo:baz} = {foo:"aaa"}
baz  //"aaa"

實(shí)際上對象的解構(gòu)賦值是以下的形式簡寫：

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

對象的解構(gòu)賦值的內(nèi)部機(jī)制，是先找到同名屬性，然后再賦給對應(yīng)的變量，真正被賦值的是后者，而不是前者。

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

對象的解構(gòu)也可以用于嵌套結(jié)構(gòu)的對象。

var obj = {
    p: [
        "hello" ,
        {
            y : "world"
        }
    ]
}

var {p:[x,{y}]} = obj

x  //"hello"
y  //"world"

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

對象的解構(gòu)賦值也可以指定默認(rèn)值，默認(rèn)值的生效條件是，對象的屬性值嚴(yán)格等于undefined。

var {x=3} = {x:undefined}
x  //3

var {x=3} = {x:null}
x  //null

如果解構(gòu)模式是嵌套對象，而且子對象所在的父屬性不存在，那么將會報(bào)錯。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78642.html

相關(guān)文章

  • ES6 學(xué)習(xí)筆記（一）let，const和解構(gòu)賦值

    摘要：另外對于已經(jīng)聲明的變量進(jìn)行解構(gòu)賦值時，要非常小心。因此在行首加，將其強(qiáng)制轉(zhuǎn)化為表達(dá)式執(zhí)行。由于和無法轉(zhuǎn)為對象，所以對它們進(jìn)行解構(gòu)賦值，都會報(bào)錯。 let和const let和const是es6新增的兩個變量聲明關(guān)鍵字，與var的不同點(diǎn)在于： （1）let和const都是塊級作用域，在{}內(nèi)有效，這點(diǎn)在for循環(huán)中非常有用，只在循環(huán)體內(nèi)有效。var為函數(shù)作用域。 （2）使用let和con...

    iOS122 評論0 收藏0

  • 《深入理解ES6》筆記——解構(gòu)：使數(shù)據(jù)訪問更便捷（5）

    摘要：解構(gòu)，一種黑魔法解構(gòu)是從對象中提取出更小元素的過程。賦值是對解構(gòu)出來的元素進(jìn)行重新賦值?？偨Y(jié)本章講解了對象解構(gòu)賦值和數(shù)組解構(gòu)賦值，以及對象和數(shù)組混合情況下的解構(gòu)賦值操作，最后一個知識點(diǎn)是解構(gòu)函數(shù)的參數(shù)。 解構(gòu)，一種黑魔法 解構(gòu)是從對象中提取出更小元素的過程。賦值是對解構(gòu)出來的元素進(jìn)行重新賦值。 下面的代碼你可能無法在瀏覽器上實(shí)時測試，推薦在babel官網(wǎng)在線測試代碼：在線測試ES6代碼...

    Drinkey 評論0 收藏0

  • ES6學(xué)習(xí)筆記

    摘要：學(xué)習(xí)筆記在學(xué)習(xí)的過程中做的一些記錄，用于未來的快速回憶。數(shù)組成員為時，默認(rèn)值仍會生效因?yàn)樵趦?nèi)部使用嚴(yán)格相等運(yùn)算符，判斷一個位置是否有值，所以當(dāng)一個數(shù)組成員嚴(yán)格等于默認(rèn)值才會生效。 ES6學(xué)習(xí)筆記 在學(xué)習(xí)ES6的過程中做的一些記錄，用于未來的快速回憶。 let&const 作用域的概念 ES6新增塊級作用域的概念（一個大括號括起來的部分就是一個塊作用域） let與const用于在塊級作...

    mengbo 評論0 收藏0

  • es6 解構(gòu)筆記分享

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

    Hancock_Xu 評論0 收藏0

發(fā)表評論

0條評論

baukh789

男|高級講師

TA的文章

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