按照「模式匹配」,只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值。
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
functionadd([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...