ES6中的解構賦值

2022-06-13 16:48:06 字數 3844 閱讀 9056

按照「模式匹配」,只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值。

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

a為1,b為2,c為3

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

foo: 1 bar: 2 baz: 3

let [ , , third] = ["foo", "bar", "baz"]; //

third: "baz"

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

x: 1 y: 3

let [head, ...tail] = [1, 2, 3, 4]; //

head: 1 tail: [2, 3, 4]

let [x, y, ...z] = ['a']; //

x: "a" y: undefined z:

如果左邊的值匹配不上,就會被賦值為undefined

解構賦值允許指定預設值。es6 內部使用嚴格相等運算子(===),判斷等號右邊該位置是否有值。所以,等號右邊該值嚴格等於undefined(空也等於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:1let [x = 1] = [null]; //

x:null

如果等號的右邊不是陣列(或者嚴格地說如果不是可遍歷的結構),那麼將會報錯。

//

報錯let [foo] = 1;

let [foo] = false

;let [foo] =nan;

let [foo] =undefined;

let [foo] = null

;let [foo] = {};

預設值可以引用其他的變數,但該變數必須已經宣告過,否則將會報錯。

let [x = 1, y = x] = ;     //

x=1; y=1

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

x=2; y=2

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

x=1; y=2

let [x = y, y = 1] = ; //

referenceerror: y is not defined 此時在x用y做預設值時,y還沒有宣告。

物件的解構與陣列不太一樣,陣列的元素是按次序排列的,變數的取值由位置決定;而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值

let  = ;  //

foo:"aaa" bar:"bbb"

let = ; //

foo:"aaa" bar:"bbb" 次序不影響賦值,變數名才影響

let = ; //

baz:undefined 變數名匹配不上將會賦值為undefined

如果變數名與屬性名不一致,可以寫成這樣:

let  = ;  //

baz:"aaa"

let obj = ;

let = obj; //

f: 'hello' l: 'world'

物件的解構賦值的內部機制,是先找到等號左邊的同名屬性,然後再賦給左邊對應的變數。真正被賦值的是左邊同名屬性後面的變數,而不是那個同名屬性。

物件的解構也可以指定預設值。

var  = {};  //

x: 3

var = ; //

x: 1 y: 5

var = {}; //

y: 3

var = ; //

y: 5

var = {}; //

msg: "something went wrong"

預設值生效的條件是,等號右邊物件的屬性值嚴格等於undefined

var  = ; //

x: 3

var = ; //

x: null

給已經定義好的變數進行解構賦值有可能會報錯:

let a, b; 

= ; // 報錯顯示:

uncaught syntaxerror: unexpected token =

上面的**將會報錯,因為 js 引擎遇到 {} 會當成乙個**塊,語法規定,**塊語句不允許出現在賦值語句左側。

所以解構賦值時' = );

console.log(a, b)

//123 456

解構賦值的拷貝是淺拷貝,如果乙個鍵的值是復合型別的值(陣列、物件、函式)、那麼解構賦值拷貝的是這個值的引用,而不是這個值的副本。

let obj = , c: 100 };

let =obj;  //obj中 a 的值是物件,所以解構賦值時拷貝的是 a 的引用,而 c 的值是簡單型別,所以obj.c改變不影響x

obj.a.b = 2; obj.c = 200;

console.log(x.a.b,c)     

//2 100

function

add([x, y])

add([1, 2]); //

3

(1)普通引數預設值:

function show(age, name='www', c=false

) show();

//undefined "www" false

show(12); //

12 "www" false

show(12, 'aaa'); //

12 "aaa" false

show(12, 'aaa', true); //

12 "aaa" true

(2)當函式的引數是乙個物件時,預設值的寫法:

function move( ={}) 

move(); //

[3, 8]

move(); //

[3, 0]

move({}); //

[0, 0]

move(); //

[0, 0]

上面**中, 意思是x,y的預設值分別是0,後面的={}意思是如果函式沒有傳參時引數預設是{},而且由於前面給x,y預設值了,所以總的來說,引數的預設值是。

如果沒有寫後面的={},直接 move() 這樣呼叫將會報錯,但其他形式的呼叫不會有問題。實際上後面的 ={} 才表示預設值。

注意,下面的寫法會得到不一樣的結果。

function move( = ) 

move(); //

[3, 8]

move(); //

[3, undefined]

move({}); //

[undefined, undefined]

move(); //

[0, 0]

上面的寫法表示的是函式的引數預設是,但如果有引數的話即使引數只傳x的值,此時預設值便不起作用。

ES6中解構賦值

理解 解構賦值就是從目標物件或陣列中提取自己想要的變數。最常用的場景是 element ui 或 vant ui 按需引入,請求介面返回想要的資料。陣列解構 乙個蘿蔔乙個坑,按照順序進行 var a,b,c 12,13 a,b 這個寫法報錯 invalid destructuring assignm...

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...