定義

JavaScript中，可以使用解構(gòu)賦值的方式來對(duì)數(shù)組或者對(duì)象進(jìn)行變量解構(gòu)，也可以簡(jiǎn)單的理解為就是對(duì)變量拆解屬性進(jìn)行賦值。

數(shù)組解構(gòu)

數(shù)組解構(gòu)唯一要注意的就是下標(biāo)的位置，只要解構(gòu)賦值變量所處下標(biāo)位置相同，那么就能夠成功解構(gòu)賦值：

數(shù)組長(zhǎng)度等于1

const arr1 = [6];
const [id] = arr1;
console.log(id);	// 6

數(shù)組長(zhǎng)度大于1 按數(shù)組下標(biāo)進(jìn)行索引賦值，僅有一個(gè)id變量：

const arr2 = [1,2,3,4,5];
const [id] = arr2;
console.log(id);	// 1

多個(gè)變量解構(gòu)，如果中間有不需要解構(gòu)的，也需要以逗號(hào)進(jìn)行分割，主要確保需要解構(gòu)的索引位置準(zhǔn)確：

const arr3 = [1,2,3,4,5];
const [num1,,num2,,num3] = arr3;
console.log(num1);	// 1
console.log(num2);	// 3
console.log(num3);	// 5

數(shù)組全量解構(gòu)，即所有索引位置都對(duì)應(yīng)解構(gòu)參數(shù)：

const arr4 = [1,2,3];
const [num1,num2,num3] = arr4;
console.log(num1);	// 1
console.log(num2);	// 2
console.log(num3);	// 3

數(shù)組解構(gòu)默認(rèn)值設(shè)置，使用（變量名=默認(rèn)值）進(jìn)行解構(gòu)默認(rèn)值設(shè)置：

const arr5 = [1,,3];
const [num1,num2=22,num3] = arr5;
console.log(num1);	// 1
console.log(num2);	// 22
console.log(num3);	// 3

用于變量值交換，只需將兩個(gè)或多個(gè)變量存放到等號(hào)兩邊的數(shù)組，對(duì)應(yīng)好要交換的位置即可：

const a=1;
const b=2;
[a, b] = [b, a];
console.log(a + '-' + b);	// 2-1

對(duì)象解構(gòu)

掌握了上面的數(shù)據(jù)解構(gòu)，那么對(duì)象解構(gòu)也就不難理解了，數(shù)組與對(duì)象的區(qū)別就是索引方式不同，數(shù)組是根據(jù)下標(biāo)索引，而對(duì)象則是key-value的索引方式，所以這里我們只需要解構(gòu)賦值變量的key相同，那么就能夠成功解構(gòu)賦值：

對(duì)象單個(gè)/多個(gè)參數(shù)解構(gòu)賦值，在等號(hào)左邊定義解構(gòu)對(duì)象對(duì)應(yīng)的key參數(shù)進(jìn)行解構(gòu)：

const obj1 = {id:1001, name:'張三'};
const {id, name} = obj1;
console.log(id + '-' + name);	// 1001-張三

對(duì)象解構(gòu)默認(rèn)值設(shè)置，使用（變量名=默認(rèn)值）進(jìn)行解構(gòu)默認(rèn)值設(shè)置：

const obj2 = {id:1002, name:'李四'};
const {id, name, age=18} = obj2;
console.log(id + '-' + name + '-' + age);	// 1002-李四-18

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

• 代碼簡(jiǎn)潔明了，便于閱讀和維護(hù)。
• 可以直接從對(duì)象或數(shù)組中提取需要的屬性或元素，避免編寫大量的取值代碼。
• 可以同時(shí)定義多個(gè)變量，減少了代碼量和冗余。
• 多個(gè)變量值的交換變得更加方便。
• 從對(duì)象、數(shù)組中取值時(shí)，默認(rèn)值設(shè)置方便。

缺點(diǎn)：

• 解構(gòu)賦值會(huì)改變?cè)瓕?duì)象或數(shù)組的結(jié)構(gòu)，可能會(huì)導(dǎo)致意外的結(jié)果。
• 嵌套結(jié)構(gòu)的對(duì)象進(jìn)行解構(gòu)相對(duì)復(fù)雜，代碼可讀性差。
• 需要有一定的js基礎(chǔ)，不同于普通的語法基礎(chǔ)，需要花些時(shí)間去學(xué)習(xí)。

總結(jié)

js解構(gòu)也是很流行的代碼寫法，掌握基礎(chǔ)的用法也非常簡(jiǎn)單，用上了真的會(huì)停不下來，日常使用也只需要我們上面的案例就夠了，其他的自己有需要可以再深入研究，不過也不建議研究的太多，因?yàn)槟菚?huì)使代碼可讀性變得更加復(fù)雜。

到此這篇關(guān)于詳解JS如何進(jìn)行變量解構(gòu)的文章就介紹到這了,更多相關(guān)JS變量解構(gòu)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論