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

資訊專欄INFORMATION COLUMN

ES6解構(gòu)賦值原理詳解

wing324 / 2780人閱讀

摘要：中還存在字符串?dāng)?shù)組布爾值等各種解構(gòu)賦值，基本概念和原理都和對(duì)象的解構(gòu)賦值類似，這里就不在全部列舉了。

ES6解構(gòu)賦值

ES6變量的解構(gòu)賦值本質(zhì)上是“模式匹配”,只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予匹配的右邊的值，如果匹配不成功變量的值就等于undefined

數(shù)組的解構(gòu)賦值

ES6中只要某種數(shù)據(jù)有Iterator接口（也就是可以循環(huán)迭代），都可以進(jìn)行數(shù)組的解構(gòu)賦值。
Example1：數(shù)組的解構(gòu)

var [a,b,c] = [1,2,3];
var [d,[e],...f] = [4,[5],6,7,8];
console.log(a); //結(jié)果為1，b,c結(jié)果是2，3
console.log(e,f) //e結(jié)果為5，f的結(jié)果是一個(gè)數(shù)組：[6,7,8]

Example2：Set解構(gòu)賦值

let [x,y] = new Set([1,2]);
console.log(x,y);   //結(jié)果為1和2

Example3：Generator函數(shù)解構(gòu)賦值

function* fun(){
    let a = 0;
    let b = 1;
    while(true){
        yield a;
        [a,b] = [b,a+b];
    }
}
let [first,second,third,fourth,fifth,sixth] = fun();
console.log(sixth); //結(jié)果為5

Example4：默認(rèn)值

var [a=3,b=5] = [undefined,4];
console.log(a,b); //結(jié)果為3和4

代碼解讀：上面的代碼等同于如下：
Example4:

var a;
var b;
var c = [undefined,4];  //這步驟是另加上去作為數(shù)組引用的
if(c[0] !== undefined){
    a = c[0];
}else{
    a = 3;
}
if(c[1] !== undefined){
    b = c[1];
}else{
    b = 5;
}
console.log(a,b);   //結(jié)果為3，4
對(duì)象的解構(gòu)賦值

數(shù)組的解構(gòu)是按次序排列的，變量取值由位置決定的，而對(duì)象的屬性是沒有順序的，變量必須與屬性同名才能取到正確的值。

Example

var {b,a} = {a:3,b:4}
console.log(a,b);   //結(jié)果為3，4

代碼解讀：上面的代碼等同下面的代碼
Example

var _ab = {a:3,b:4};
var b = _ab.b;
var a = _ab.a;
console.log(a,b);   //結(jié)果為3，4

注意：對(duì)象的解構(gòu)相當(dāng)于先定義了后一個(gè)對(duì)象變量為_ab，再對(duì)前一個(gè)對(duì)象解構(gòu)出來(lái)的變量按照對(duì)象先后順序分別進(jìn)行申明并使用對(duì)象_ab去按照該變量名賦值相應(yīng)的值。如果前一個(gè)對(duì)象中的變量和后一個(gè)對(duì)象中的屬性不一致，直接定義是肯定賦值失敗的，解決方法如下：
Example

var {b:c,a:d} = {a:3,b:4};
console.log(b,c,a,d)    // 分別是undefined,4,undefined,3

代碼解讀：上面代碼等同下面的代碼

Example

var _ab = {a:3,b:4};
var c = _ab.b;
var d = _ab.a;
console.log(b,c,a,d)    // 分別是undefined,4,undefined,3

注意：例子可以看出對(duì)象的解構(gòu)的內(nèi)部機(jī)制是先找到同名屬性，然后再賦予相應(yīng)的變量，真正被賦予的是前一個(gè)對(duì)象的后一個(gè)變量，即c,d;而不是前一個(gè)對(duì)象的前一個(gè)模式，即b,a;

發(fā)現(xiàn)：如果想要上一個(gè)例子的模式不為undefined，那么代碼可以寫成如下： 
var e = {b:c,a:d} = {a:3,b:4};
console.log(e.b,b,c,e.a,a,d)    // 分別是4,undefined,4,3,undefined,3

注意：以上代碼在使用babel轉(zhuǎn)換的時(shí)候可能會(huì)出錯(cuò)，只在瀏覽器中有用，所以最好不要代碼中使用，只理解就好

對(duì)象解構(gòu)賦值與數(shù)組解構(gòu)賦值在申明的時(shí)候的一點(diǎn)區(qū)別：

Example1：數(shù)組

let a;
[a] = [3]
console.log(a); //結(jié)果為3

Example2：對(duì)象

let a;
{a} = {a:3}
console.log(a); // 報(bào)錯(cuò)：SyntaxError

代碼解讀：JavaScript引擎會(huì)將[a]理解成一個(gè)數(shù)組，而將{a}理解成什么呢？對(duì)于{a}這個(gè)代碼在JS中可能會(huì)存在兩種解釋，一種是它是一個(gè)表達(dá)式，表示含有a屬性的一個(gè)對(duì)象；第二種它是一個(gè)語(yǔ)句(代碼塊)，為了消除這種歧義，js開發(fā)人員規(guī)定只要行首是大括號(hào)的，一律解析成代碼塊。解決上訴問(wèn)題的代碼如下：
Example3：對(duì)象

let a;
({a} = {a:3})   //JS中括號(hào)中的都是表達(dá)式
console.log(a); // 結(jié)果3
解構(gòu)賦值中的圓括號(hào)問(wèn)題

Example

let [(a)] = [1];
let {(b):c} = {b:2};
let {d:(e)} = {d:2};    //都報(bào)錯(cuò)：SyntaxError

注意：以上出現(xiàn)錯(cuò)誤的原因都是：1、它們都是申明語(yǔ)句；2、圓括號(hào)中的都屬于模式中的一部分。要同時(shí)不滿足以上兩個(gè)條件是比較困難的，所以，ES6規(guī)定，只要可能導(dǎo)致解構(gòu)歧義就不得使用圓括號(hào)。所以，建議在寫的過(guò)程中除了上面的那個(gè)對(duì)象圓括號(hào)的例子可以使用外，其他的情況都不能使用。

ES6中還存在字符串、數(shù)組、布爾值等各種解構(gòu)賦值，基本概念和原理都和對(duì)象的解構(gòu)賦值類似，這里就不在全部列舉了。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83986.html

相關(guān)文章

  • ES6語(yǔ)法詳解(一)

    摘要：凍結(jié)對(duì)象可以使用方法。對(duì)象的解構(gòu)賦值必須要屬性名相同，順序毫無(wú)影響。數(shù)組解構(gòu)賦值默認(rèn)值，當(dāng)?shù)忍?hào)右邊的值時(shí)，默認(rèn)值生效。 let變量 let聲明的變量在let命令所在的代碼塊中有效。不存在變量提升，只能先聲明后使用。 暫存死區(qū) 如果區(qū)塊中存在let和const命令，這個(gè)區(qū)塊對(duì)這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量。 var a = 1; { ...

    wendux 評(píng)論0 收藏0

  • ES6學(xué)習(xí)手稿之基本類型擴(kuò)展

    摘要：它是一個(gè)通用標(biāo)準(zhǔn)，奠定了的基本語(yǔ)法。年月發(fā)布了的第一個(gè)版本，正式名稱就是標(biāo)準(zhǔn)簡(jiǎn)稱。結(jié)語(yǔ)的基本擴(kuò)展還有一些沒有在這里詳細(xì)介紹。 前言 ES6標(biāo)準(zhǔn)以及頒布兩年了，但是，好像還沒有完全走進(jìn)我們的日常開發(fā)。這篇文章從ES6的基本類型擴(kuò)展入手，逐步展開對(duì)ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...

    tommego 評(píng)論0 收藏0

  • ES6學(xué)習(xí)（二）之解構(gòu)賦值及其原理

    摘要：基本原理解構(gòu)是提供的語(yǔ)法糖，其實(shí)內(nèi)在是針對(duì)可迭代對(duì)象的接口，通過(guò)遍歷器按順序獲取對(duì)應(yīng)的值進(jìn)行賦值。屬性值返回一個(gè)對(duì)象的無(wú)參函數(shù)，被返回對(duì)象符合迭代器協(xié)議。迭代器協(xié)議定義了標(biāo)準(zhǔn)的方式來(lái)產(chǎn)生一個(gè)有限或無(wú)限序列值。 更多系列文章請(qǐng)看 1、基本語(yǔ)法 1.1、數(shù)組 // 基礎(chǔ)類型解構(gòu) let [a, b, c] = [1, 2, 3] console.log(a, b, c) // 1, 2, ...

    chunquedong 評(píng)論0 收藏0

  • ES6解構(gòu)賦值運(yùn)算符

    摘要：本次我領(lǐng)到的任務(wù)是在中有一個(gè)解構(gòu)賦值運(yùn)算符，可以大大方便數(shù)據(jù)字段的獲取。解構(gòu)賦值運(yùn)算符配合會(huì)比較有用。 本次我領(lǐng)到的任務(wù)是： 在ES6中有一個(gè)解構(gòu)賦值運(yùn)算符，可以大大方便數(shù)據(jù)字段的獲取。 比如 const [a, b] = [1, 2, 3]; const {name, age} = {name: helijia, age: 3}; 上面的語(yǔ)句是我們常用的，可是你能解釋為什么下面的...

    qpal 評(píng)論0 收藏0

  • ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解

    摘要：變量聲明與賦值值傳遞淺拷貝與深拷貝詳解歸納于筆者的現(xiàn)代開發(fā)語(yǔ)法基礎(chǔ)與實(shí)踐技巧系列文章。變量聲明在中，基本的變量聲明可以用方式允許省略，直接對(duì)未聲明的變量賦值。按值傳遞中函數(shù)的形參是被調(diào)用時(shí)所傳實(shí)參的副本。 ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解歸納于筆者的現(xiàn)代 JavaScript 開發(fā)：語(yǔ)法基礎(chǔ)與實(shí)踐技巧系列文章。本文首先介紹 ES6 中常用的三種變量聲明方式，然后討論了...

    snowLu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<