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

資訊專欄INFORMATION COLUMN

常用的ES6新特性--解構(gòu)賦值

0x584a / 883人閱讀

摘要:因?yàn)橄劝呀鈽?gòu)賦給,把值賦給,所以,都為對象的解構(gòu)賦值數(shù)組的解構(gòu)和對象的解構(gòu)有一個不同,數(shù)組的元素按次序排列,變量的取值由其位置決定而對象的屬性沒有次數(shù),變量必需和屬性同名,才能取得正確的值。

let和const

由于var可以重復(fù)聲明,而且無法限制修改,也沒有塊級作用域,在一些時候不是很合適,所以出現(xiàn)了let和const

let:不能重復(fù)聲明,可以修改,有塊級作用域,適合for循環(huán)等一些場景

const:不能重復(fù)聲明,有塊級作用域,不可以修改,比較適合做全局

變量的結(jié)構(gòu)賦值

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

let [a,b,c] = [1,2,3]
let [d,[[e],f]] = [1,[[2],3]]//d=1,e=2,f=3
let [x,y,...z] =["a"];//x="a",y=undefined,z=[]  結(jié)構(gòu)不成功變量的值就為undefined

不完全解構(gòu)

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

對于set結(jié)構(gòu),可以使用數(shù)組的解構(gòu)數(shù)組

let [x,y,z] = new Set(["a","b","c"]);//a=a,y=b,z=c

主要數(shù)據(jù)結(jié)構(gòu)具有Iterator接口,都可以采用數(shù)組形式的解構(gòu)賦值,如下斐波那契數(shù)列的例子,利用generator函數(shù)

function* fibs(){
    let a = 0 ;
    let b = 1;
    while(true){
        yield a;//利用yield返回中間值
        [a,b] = [b,a+b];
    }
}
let [first,second,third,fourth,fifth,sixth] = fibs();
//first=0,second=1,third=1,fourth=2,fifth=3,sixth=5

默認(rèn)值

解構(gòu)賦值允許指定默認(rèn)值,es6內(nèi)部使用嚴(yán)格相等運(yùn)算符===判斷一個位置是否有值,所以只有當(dāng)一個數(shù)組成員嚴(yán)格等于undefined,默認(rèn)值才會生效;默認(rèn)值可以引用解構(gòu)賦值的其他變量,但該變量必須已經(jīng)聲明。

let [x,y="b"] = ["a"];//x="a",y="b"
let [x=1] = [undefined];//x=1
let [x=1] = [null];//x=null
let [x=1,y=x] = [2];//x=2,y=2   因?yàn)橄劝?解構(gòu)賦給x,x把值賦給y,所以x,y都為2
let [x=1,y=x]=[1,2];//x=1,y=2

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

數(shù)組的解構(gòu)和對象的解構(gòu)有一個不同,數(shù)組的元素按次序排列,變量的取值由其位置決定;而對象的屬性沒有次數(shù),變量必需和屬性同名,才能取得正確的值。

let {foo:foo,bar:bar} = {foo:"qqq",bar:"www"}//foo=qqq,bar=www
//嵌套解構(gòu)
let obj = {p:["hello",{y:"world"}]};
let {p:[x,{y}]} = obj//x=hello,y=world  此時p作為模式不會被賦值
let {p,p:[x,{y}]} = obj//p=["hello",{y:"world"}]  此時P作為變量賦值

以下實(shí)例進(jìn)行了三次解構(gòu),分別是對loc,start,line三個屬性,但是最后解構(gòu)賦值時,只有l(wèi)ine是屬性,start和loc都是模式,而不是變量

const node = {
    loc:{
        start:{
            line:1,
            column:5
        }
    }
};
//第一個參數(shù)是對loc進(jìn)行解構(gòu),得到loc = { start: { line: 1, column: 5 } }
//第二個參數(shù)對start進(jìn)行解構(gòu),得到start = { line: 1, column: 5 }
//第三個參數(shù)對line進(jìn)行解構(gòu),得到 line = 1
let{ loc,loc:{start},loc:{start:{line}}} = node;
console.log(loc);//{ start: { line: 1, column: 5 } }
console.log(start);    //{ line: 1, column: 5 }
console.log(line);//1

嵌套賦值

let obj = {};
let arr = [];
({foo:obj.prop, bar:arr[0]} = {foo:123,bar:true});
console.log(obj);//{prop:123}
console.log(arr);//[true]

對象的默認(rèn)值,和數(shù)組的默認(rèn)值相似

var {x:y=3}={x:5}//y=5
var {x=3} = {x:undefined}//x=3
var {x=3} = {x:null}//x=null
var {foo} = {bar:"bz}//foo=undefined解構(gòu)失敗變量的值等于undefined

一些錯誤寫法:

let _tmp = {baz :"bz"};
_tmp.foo.baz;//報(bào)錯,因?yàn)閒oo已經(jīng)是undefined,再取子屬性會報(bào)錯
let x;
{x} = {x:1};//會報(bào)錯,因?yàn)镴avaScript引擎會把{x}解釋成代碼塊,只有避免將大括號寫在行首,避免將其解釋成代碼塊,才能避免報(bào)錯
let x;
({x} = {x:1});//正確寫法

字符串的解構(gòu)賦值

const [a,b,c,d,e] = "hello"http://a="h",b="e",....
let {length:len}="hello"http://len=5

數(shù)值和布爾值的解構(gòu)賦值

解構(gòu)賦值時,如果等號右邊是數(shù)值和布爾值,會先轉(zhuǎn)為對象;而undefined和null無法轉(zhuǎn)為對象,所以對它們解構(gòu)賦值會報(bào)錯

let {toString:s} = 123;
console.log(s === Number.prototype.toString);//true
let {toString:s} = true;
console.log(s === Boolean.prototype.toString);//true
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

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

[[1, 2], [3, 4]].map(([a, b]) => a + b);//[3,7]

函數(shù)參數(shù)的解構(gòu)可以使用默認(rèn)值,但是不同的寫法會有區(qū)別,有如下兩種情況,一種是為函數(shù)的參數(shù)指定默認(rèn)值,一種是為變量指定默認(rèn)值

變量的默認(rèn)值

函數(shù)test的參數(shù)是一個對象,通過對對象的解構(gòu),得到參數(shù)x,y,解構(gòu)失敗,參數(shù)為默認(rèn)值

function test({x=0,y=0} ={}){
    return [x,y];
}
console.log(test({x:2,y:5}));//[2,5]
console.log(test({x:2}));//[2,0]
console.log(test({}));//[0,0]
console.log(test());//[0,0]

函數(shù)參數(shù)的默認(rèn)值,下面是為函數(shù)的參數(shù)指定默認(rèn)值

function test({x,y} = {x:0,y:0}){
    return [x,y];
}
console.log(test({x:2,y:5}));//[2,5]
console.log(test({x:2}));//[ 2, undefined ]
console.log(test({}));//[ undefined, undefined ]
console.log(test());[0,0]?                                  

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

交換變量的值

從函數(shù)返回多個值

函數(shù)參數(shù)的定義

提取JSON數(shù)據(jù)

函數(shù)參數(shù)的默認(rèn)值

遍歷Map結(jié)構(gòu)

輸入模塊的指定方法

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

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

相關(guān)文章

  • ES6常用特性——讀《Understanding ECMAScript 6》總結(jié)

    摘要:對象解構(gòu)對象解構(gòu)語法在賦值語句的左側(cè)使用了對象字面量,例如代碼中,的值被存儲到本地變量中,的值則存儲到變量中。當(dāng)使用解構(gòu)賦值語句時,如果所指定的本地變量在對象中沒有找到同名屬性,那么該變量會被賦值為。 現(xiàn)在ES6在很多項(xiàng)目中大量使用。最近我也花時間看了一下《Understanding ECMAScript6》的中文電子書。在這里總結(jié)了一些在實(shí)際開發(fā)中常用的新特性。 塊級作用域 在ES6...

    jsliang 評論0 收藏0
  • ES6 常用特性講解

    摘要:一共講解了個常用的新特性,講解過程也是由淺入深。最后一個新增的方法主要是為了彌補(bǔ)當(dāng)做構(gòu)造函數(shù)使用時產(chǎn)生的怪異結(jié)果。特性共享父級對象共享父級不能當(dāng)做構(gòu)造函數(shù)語法最簡表達(dá)式前后對比很容易理解,可以明顯看出箭頭函數(shù)極大地減少了代碼量。 showImg(https://segmentfault.com/img/bVQ5GW?w=1024&h=675); 上周在公司組織了 ES6 新特性的分享會...

    荊兆峰 評論0 收藏0
  • 工作中常用es6+特性

    摘要:結(jié)合工作中使用情況,簡單對進(jìn)行一些復(fù)習(xí)總結(jié),包括常用的語法,等,以及短時間內(nèi)要上手需要重點(diǎn)學(xué)習(xí)的知識點(diǎn)不同工作環(huán)境可能有一些差別,主要參考鏈接是阮一峰的博客以及外文博客阮老師大部分文章是直接翻譯的這個博客簡介先說一下,是一個標(biāo)準(zhǔn)化組織,他們 結(jié)合工作中使用情況,簡單對es6進(jìn)行一些復(fù)習(xí)總結(jié),包括常用的語法,api等,以及短時間內(nèi)要上手需要重點(diǎn)學(xué)習(xí)的知識點(diǎn)(不同工作環(huán)境可能有一些差別),...

    xcold 評論0 收藏0
  • ES6-解構(gòu)

    摘要:對象和數(shù)組是中常用的數(shù)據(jù)解構(gòu),由于的普及,二者已經(jīng)成為語言中特別重要的一個部分。解構(gòu)是一種打破數(shù)據(jù)結(jié)構(gòu),將其拆分成更小部分的過程。數(shù)組解構(gòu)數(shù)組解構(gòu)和對象解構(gòu)非常相似,只是將對象替換成數(shù)組。例這種解構(gòu)對從配置中抽取數(shù)據(jù)來說尤為有用。 對象和數(shù)組是js中常用的數(shù)據(jù)解構(gòu),由于JSON的普及,二者已經(jīng)成為語言中特別重要的一個部分。ES6中添加了可以簡化解析這種解構(gòu)的新特性:解構(gòu)。解構(gòu)是一種打破...

    import. 評論0 收藏0
  • ES6解構(gòu)賦值運(yùn)算符

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

    qpal 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<