es6解構賦值

2021-09-07 14:37:21 字數 2466 閱讀 7904

自從學習了es6的解構賦值之後,覺得就好像發現了新大陸。對於乙個前端工程師來講,使用解構賦值不僅可以帶來更好的編碼體驗,減少繁瑣的賦值操作,還大大精簡了**。

逼格高不高我不知道,但是好用我信了。

先看看我們以往的賦值操作跟解構賦值有何不同:

//以往的賦值方法

let a=1,

b=2,

c=3;

//解構賦值

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

咦,好像並沒有太大的區別嘛,不過就是個語法糖嘛。

那如果獲取這樣的資料的所有值呢?

let obj = 

]};

這當然也難不倒程式設計師了,他們可能會這樣寫:

let obj = 

]};let preson,

hello,

sayhello;

if(obj.hasownproperty("person"))

if(typeof item==="object")

})}else

}

用解構賦值來寫:

let obj = 

]};let ],person:[1]};

一行**就搞定了。

所以,因為他對於某些結構解析有用,所以是有必要掌握他的用法的。

解構賦值用乙個或者乙個{}表示。

let [a,b]=[1,2];//表示用[1,2]來解構變數a和b

let =;

對於陣列,等號左邊的每個變數依次等於右邊的變數,=號表示預設值,只有右邊的對應屬性為undefined,預設值才會生效。

let [foo, bar, baz,bat="ok"] = [1, 2, 3]];

foo // 1

bar // 2

baz // 3

bat//ok,依次解構,輪到bat的時候源變數已經全部解構完畢,沒有bat對應的值,即為undefined,預設值生效

對於物件,左邊部分的:號左邊的變數表示模式,右邊的變數表示變數名,=號表示預設值,只有右邊的對應屬性為undefined,預設值才會生效。

let =;

//bb='b'

//aa='a'

//cc='e',因為源變數不存在c這個屬性,即為undefined,故而預設值生效

將阮一峰老師的教程看了一遍之後我大致將解構賦值分為兩個部分,乙個是模式的匹配順序,乙個是模式的匹配規則。

(1)模式的匹配順序

等號左邊稱為賦值變數,右邊稱為源變數。

陣列解構的時候賦值變數按照順序依次解構。

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

foo // 1

bar // 2

baz // 3

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

foo // 1

baz // [[2], 3]

而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。

let  = ;

foo // "aaa"

bar // "bbb"

let = ;

baz // undefined

這也說明,物件的解構賦值的內部機制,是先找到同名屬性,然後再賦給對應的變數。真正被賦值的是後者,而不是前者。

(2)模式的匹配規則

a.不完全解構。即等號左邊的模式,只匹配一部分的等號右邊的陣列。這種情況下,解構依然可以成功。

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

x // 1

y // 2

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

a // 1

b // 2

d // 4

b.解構賦值允許指定預設值。es6 內部使用嚴格相等運算子(===),判斷乙個位置是否有值。所以,只有當乙個陣列成員嚴格等於undefined,預設值才會生效。

let [foo = true] = ;

foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'

let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

let [x = 1] = [undefined];

x // 1

let [x = 1] = [null];

x // null

此外,還有字串,boolean值以及函式引數的解構賦值,巢狀結構的解構賦值,以及解構賦值的應用,本文不再鰲述,請自行翻閱阮一峰老師的文件

ES6 解構賦值

陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...

ES6解構賦值

一 基本用法 解構 destructuring 按照一定的模式,從陣列或者物件中提取值,對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...

es6解構賦值

coding changes the world accumulating makes yourself 主要從三個方面講述 陣列式的解構賦值 物件式的解構賦值 函式中的解構賦值 preface 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...