ES6解構(gòu)賦值學(xué)習(xí)總結(jié)

levinit 發(fā)布于2019-08-23 13:59 / 1366人閱讀

摘要：提供了解構(gòu)賦值的方式，這樣子在賦值多個變量或者進(jìn)行注釋時可以方便很多，不同場景下也有很多新的應(yīng)用，個人常使用的有數(shù)組的解構(gòu)賦值，對象的解構(gòu)賦值和函數(shù)參數(shù)的解構(gòu)賦值，函數(shù)參數(shù)的解構(gòu)賦值之前總結(jié)過，這里寫下數(shù)組的和對象的簡單總結(jié)吧函數(shù)參數(shù)的解構(gòu)

ES6提供了解構(gòu)賦值的方式，這樣子在賦值多個變量或者進(jìn)行注釋時可以方便很多，不同場景下也有很多新的應(yīng)用，個人常使用的有數(shù)組的解構(gòu)賦值，對象的解構(gòu)賦值和函數(shù)參數(shù)的解構(gòu)賦值，函數(shù)參數(shù)的解構(gòu)賦值之前總結(jié)過，這里寫下數(shù)組的和對象的簡單總結(jié)吧
函數(shù)參數(shù)的解構(gòu)賦值總結(jié)點(diǎn)擊這里

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

先來個最簡單的

let [a, b] = [1, 2];
a;//輸出1
b;//輸出2

這種模式就容易為多個變量賦值，因?yàn)榈忍栍疫吺菙?shù)組，所以有需要獲取數(shù)組元素時，如下使用更為方便

let array = [1,2,3];
let [a, b, c] = array;
a;//輸出1
b;//輸出2
c;//輸出3

當(dāng)然，數(shù)組中的元素是不限類型的

let [a, array, c] = [1, [2,3], 4];
a;//輸出1
array;//輸出[2,3]
c;//輸出4

另外，可將剩余元素賦值給一個變量

let [a, ...b] = [1,2,3,4];
a;//輸出1
b;//輸出[2, 3, 4]

其實(shí)只要等號右邊具有Iterator接口均可使用解構(gòu)賦值

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

先給個最簡單的例子

let {name, sex} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
sex;//"male"

這里的賦值是變量名對應(yīng)屬性名賦值，如果變量名與屬性名沒有對應(yīng)上的話，則會賦值失敗，如下所示

let {name, gender} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
gender;//undefined，因?yàn)闆]有對應(yīng)屬性名

其實(shí)以上寫法只是如下寫法的簡寫

let {name:name, sex:sex} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
sex;//"male"

所以其實(shí)是把對應(yīng)的屬性名提取出來給一個變量，所以可以這樣使用

let {name:username, sex:gender} = {name:"Jonithan", sex:"male"}
username;//"Jonithan"
gender;//"male"

以上僅列出了較為簡單的情況，更多具體情況查詢MDN吧，或者翻看阮老師的《ES6標(biāo)準(zhǔn)入門》

GPU云服務(wù)器云服務(wù)器解構(gòu)賦值機(jī)器學(xué)習(xí)學(xué)習(xí)總結(jié) 機(jī)器學(xué)習(xí)總結(jié) javascript學(xué)習(xí)總結(jié)

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

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

相關(guān)文章

ES6學(xué)習(xí)總結(jié)（1）

摘要：返回一個對象，遍歷對象自身和繼承的所有可枚舉屬性不含，與相同和在紅寶書中就已經(jīng)提到過屬性，表示的是引用類型實(shí)例的一個內(nèi)部指針，指向該實(shí)例的構(gòu)造函數(shù)的原型對象。半個月前就決定要將ES6的學(xué)習(xí)總結(jié)一遍，結(jié)果拖延癥一犯，半個月就過去了，現(xiàn)在補(bǔ)起來，慚愧慚愧。阮一峰的《ES6標(biāo)準(zhǔn)入門》這本書有300頁左右，除了幾個新的API和js語法的擴(kuò)展,真正有價值的內(nèi)容并不多。所謂存在即合理，每部分的...

happyfish 2019-08-20 15:38 評論0 收藏0
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)賦值，都會報錯。 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 2019-08-23 15:29 評論0 收藏0
《ES6學(xué)習(xí)2》變量的解構(gòu)賦值

摘要：解構(gòu)賦值的分類數(shù)組解構(gòu)賦值對象解構(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)值將生效。報錯報錯函數(shù)參數(shù)的解構(gòu)賦值函數(shù)的參數(shù)也可以使用解構(gòu)賦值和指定默認(rèn)值 ES6可以從數(shù)組和對象中提取值，然后對變量進(jìn)行賦值。解構(gòu)賦值的分類：數(shù)組解構(gòu)賦值、對象解構(gòu)賦值、字符串解構(gòu)賦值、數(shù)值解構(gòu)賦值、布爾值解構(gòu)賦值、函數(shù)參...

mist14 2019-08-26 13:52 評論0 收藏0
ES6系統(tǒng)學(xué)習(xí)----從Apollo Client看解構(gòu)賦值

摘要：第四類布爾值和數(shù)值的解構(gòu)賦值這類解構(gòu)賦值目前為止我并未在實(shí)際開發(fā)中遇到，以后遇到會結(jié)合實(shí)際情況進(jìn)行說明。解構(gòu)賦值時，如果等號的郵編時數(shù)值或者是布爾值，那么他就會先轉(zhuǎn)換成對象，再進(jìn)行解構(gòu)賦值。一：背景在前一篇關(guān)于Apollo Client 的博客中已經(jīng)說明了Apollo Client 是一個強(qiáng)大的JavaScript GraphQL 客戶端。既然是一個JavaScript的客戶端，他...

Miyang 2019-08-23 15:12 評論0 收藏0
ES6學(xué)習(xí) 第二章變量的解構(gòu)賦值

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

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637