es6 解構(gòu)賦值

oliverhuang 發(fā)布于2019-04-23 13:28 / 3605人閱讀

摘要：結(jié)構(gòu)賦值即按照一種模式對(duì)變量進(jìn)行賦值，分為數(shù)組解構(gòu)賦值和對(duì)象結(jié)構(gòu)賦值數(shù)組結(jié)構(gòu)賦值數(shù)組類(lèi)型解構(gòu)賦值輸出若左右沒(méi)有配對(duì)成功，則會(huì)輸出。即為可以進(jìn)行交換，輸出輸出輸出輸出對(duì)象解構(gòu)賦值對(duì)象解構(gòu)賦值左右都是對(duì)象輸出

結(jié)構(gòu)賦值即按照一種模式對(duì)變量進(jìn)行賦值，分為數(shù)組解構(gòu)賦值和對(duì)象結(jié)構(gòu)賦值

1. 數(shù)組結(jié)構(gòu)賦值

let a;
[a,b]=[1,2]//數(shù)組類(lèi)型解構(gòu)賦值
console.log(a);//1


[a,b,...rest]=[1,2,3,4,5,6]//輸出1,2,[3,4,5,6]


[a,b,c=3]=[1,2] //a=1,b=2,c=3

[a,b,c]=[1,2]//若左右沒(méi)有配對(duì)成功，則會(huì)輸出undefined。即c為undefined


let a=1;
let b=2;
[a,b]=[b,a];//可以進(jìn)行交換，輸出2,1


function f(){
    return [1,2]
}
let a,b;
[a,b]=f();//輸出1,2


function f(){
    return [1,2,3,4,5]
}
let a,b,c;
[a,,,b]=f();//a,b輸出1,4


function f(){
    return [1,2,3,4,5]
}
let a,b,c;
[a,...b]=f();//a,b輸出1,[2,3,4,5]

2.對(duì)象解構(gòu)賦值

let o={p:42,q:true} 
let {p,q}=o;//對(duì)象解構(gòu)賦值左右都是對(duì)象
console.log(p,q);//42,true


let {a=10,b=5}={a:3};
console.log(a,b);//3,5


let metaData={
    title:"abc",
    test:[{
        title:"test",
        desc:"description"
    }]
}
let {title:esTitle,test:[{title:cnTitle}]}=metaData;
console.log(esTitle,cnTitle);//輸出abc,test

云服務(wù)器 GPU云服務(wù)器解構(gòu)賦值對(duì)象解構(gòu) 解構(gòu)函數(shù) ES6

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

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

相關(guān)文章

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

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

iOS122 2019-08-23 15:29 評(píng)論0 收藏0
es6 - 解構(gòu)賦值

摘要：比如上面展示的情況都是可以聯(lián)合使用的比如對(duì)象的解構(gòu)賦值對(duì)象的解構(gòu)賦值是基于屬性的。當(dāng)給已存在的變量解構(gòu)賦值時(shí)，注意加這是由于如果不加會(huì)把左邊看成一個(gè)代碼塊，會(huì)報(bào)錯(cuò)。注意事項(xiàng)數(shù)組的解構(gòu)賦值中，使用的變量必須放在最后。解構(gòu)賦值解構(gòu)賦值是一個(gè)聽(tīng)起來(lái)比較高大上的特性，但按我的理解，它就是一種語(yǔ)法糖。它并沒(méi)有賦予js更強(qiáng)大的能力，只是讓賦值操作更加的靈活，效率。在es6之前，賦值操作需要=...

DirtyMind 2019-08-26 11:45 評(píng)論0 收藏0
ES6學(xué)習(xí) 第二章變量的解構(gòu)賦值

摘要：前言前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)。對(duì)象的解構(gòu)賦值是根據(jù)對(duì)象值進(jìn)行匹配。前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接：變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)（Destructuring）。解構(gòu)賦值是對(duì)賦值運(yùn)...

番茄西紅柿 2021-11-24 09:38 評(píng)論0 收藏2637
ES6學(xué)習(xí) 第二章變量的解構(gòu)賦值

摘要：前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)。對(duì)象的解構(gòu)賦值是根據(jù)對(duì)象值進(jìn)行匹配。前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接：變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)...

番茄西紅柿 2021-11-24 09:38 評(píng)論0 收藏2637
ES6-變量的解構(gòu)賦值(3)

摘要：數(shù)組的解構(gòu)賦值特點(diǎn)根據(jù)數(shù)據(jù)的下標(biāo)來(lái)賦值的，有次序。模式能夠匹配起來(lái)，如長(zhǎng)度為數(shù)值和布爾值的解構(gòu)賦值解構(gòu)賦值的規(guī)則是只要等號(hào)右邊的值不是對(duì)象或數(shù)組，就先將其轉(zhuǎn)為對(duì)象。布爾值解構(gòu)賦值為字符串的一種。在很多獨(dú)立細(xì)小的方面，解構(gòu)賦值都非常有用。 1、解構(gòu)賦值簡(jiǎn)介官方解釋?zhuān)喊凑找欢ǖ哪Ｊ?，從?shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)（Destructuring）。舉個(gè)例子，想獲取數(shù)組中...

Jason_Geng 2019-08-23 16:46 評(píng)論0 收藏0
《ES6學(xué)習(xí)2》變量的解構(gòu)賦值

摘要：解構(gòu)賦值的分類(lèi)數(shù)組解構(gòu)賦值對(duì)象解構(gòu)賦值字符串解構(gòu)賦值數(shù)值解構(gòu)賦值布爾值解構(gòu)賦值函數(shù)參數(shù)解構(gòu)賦值。嵌套情況默認(rèn)值解構(gòu)賦值允許設(shè)置默認(rèn)值，當(dāng)數(shù)組成員嚴(yán)格等于，默認(rèn)值將生效。報(bào)錯(cuò)報(bào)錯(cuò)函數(shù)參數(shù)的解構(gòu)賦值函數(shù)的參數(shù)也可以使用解構(gòu)賦值和指定默認(rèn)值 ES6可以從數(shù)組和對(duì)象中提取值，然后對(duì)變量進(jìn)行賦值。解構(gòu)賦值的分類(lèi)：數(shù)組解構(gòu)賦值、對(duì)象解構(gòu)賦值、字符串解構(gòu)賦值、數(shù)值解構(gòu)賦值、布爾值解構(gòu)賦值、函數(shù)參...

mist14 2019-08-26 13:52 評(píng)論0 收藏0