什么是變量的解構(gòu)(Destructuring)賦值钮莲?
ES6 允許按照一定模式男翰,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值盏袄,這被稱為解構(gòu)
只要等號(hào)兩邊的模式相同,左邊的變量就會(huì)被賦予對(duì)應(yīng)的值
- 數(shù)組解構(gòu)賦值
let [m,n]=[9,4];
console.log(m,n); // m 9; n 4
- 對(duì)象解構(gòu)賦值(對(duì)象的結(jié)構(gòu)賦值宋光,與順序無(wú)關(guān)因?yàn)樽兞勘仨毰c屬性同名貌矿,才能取到正確的值)
let {p,q}={q:"hello",p:"hi"};
console.log(p,q); //hi hello
注:
1.如果解構(gòu)不成功,變量的值就等于undefined
let {p} = {q: 'a'};
p // undefined
2.解構(gòu)也可以用于嵌套結(jié)構(gòu)的對(duì)象
let [a, [b], c] = [1, [2], 3]; //a=1 ; b=2; c=3;
3.如果要將一個(gè)已經(jīng)聲明的變量用于解構(gòu)賦值,要在 {} 外加上 () 否則JavaScript引擎會(huì)將 {p} 理解成一個(gè)代碼塊
let p;
({p} = {p: 8});
但是在有些情況下是不能使用圓括號(hào)的:
1.變量聲明語(yǔ)句中罪佳,不能帶有圓括號(hào)
2.函數(shù)參數(shù)中逛漫,模式不能帶有圓括號(hào)
3.賦值語(yǔ)句中,不能將整個(gè)模式赘艳,或嵌套模式中的一層酌毡,放在圓括號(hào)之中
所以可以使用 () 的情況只有一種 —— 賦值語(yǔ)句的非模式部分,可以使用圓括號(hào)
用途
<1> 交換兩個(gè)變量的值
let a=1,b=2;
[a,b]=[b,a]; //a=2 b=1
<2>從函數(shù)返回多個(gè)值
一般要返回多個(gè)值的話蕾管,我們只能用數(shù)組存值枷踏,然后輸出,有了解構(gòu)賦值就可以提取出多個(gè)值
function fun() {
return [1, 2, 3];
}
let [a, b, c] = fun();
console.log(a,b,c); // 輸出1 2 3