JavaScript解構(gòu)賦值的實(shí)用技巧指南
一、基本概念
為什么需要解構(gòu)呢，先來看一個(gè)例子：
const student = {
name: 'ZhangSan',
age: 18,
scores: {
math: 19,
english: 85,
chinese: 100
}
};
function displayInfo(student) {
console.log('name:', student.name);
console.log('math:', student.scores.math);
console.log('english:', student.scores.english);
console.log('chinese:', student.scores.chinese);
}
displayInfo(student);這樣寫也能實(shí)現(xiàn)預(yù)期效果，但是代碼看起來比較冗余。并且，如果對象內(nèi)部嵌套較深時(shí)，那么對象的訪問鏈就會(huì)變得很長。雖然這并不是什么大問題，但是使用解構(gòu)賦值會(huì)讓代碼變得更簡單和易讀。 ?
下面就來看看什么是解構(gòu)賦值。MDN 中對解構(gòu)賦值的描述：
解構(gòu)賦值語法是一種 Javascript 表達(dá)式。通過解構(gòu)賦值, 可以將屬性值從對象/數(shù)組中取出,賦值給其他變量。
實(shí)際上，結(jié)構(gòu)賦值就是將復(fù)雜的結(jié)構(gòu)分解為簡單的部分。解構(gòu)賦值語法可以用于變量聲明或者變量賦值。除此之外，還可以使用嵌套的解構(gòu)賦值語法來處理嵌套結(jié)構(gòu)。 ?
比如，對上面例子中的對象進(jìn)行解構(gòu)：
function displayInfo(student) {
const { name, scores: {math, english, chinese} } = student;
console.log('name:', name);
console.log('math:', math);
console.log('english:', english);
console.log('chinese:', chinese);
}這樣看起來是不是簡潔多了。
二、解構(gòu)分類
根據(jù)MDN對解構(gòu)賦值的定義，我們可以將解構(gòu)賦值分為兩大類：
- 對象解構(gòu)
- 數(shù)組解構(gòu)
?下面就分別來看看這兩種解構(gòu)賦值。
1. 對象的解構(gòu)賦值
對象解構(gòu)又稱為對象屬性分配模式，它允許我們將對象的屬性值分配給相應(yīng)的變量。它有兩種寫法：
let obj = {x: 1, y: 2, z: 3};
let {x: a, y: b, z: c} = obj;
console.log(a, b, c)
let {x, y, z} = obj;
console.log(x, y, z)- 第一種（第3行）是對象解構(gòu)的完整形式，對象的每個(gè)屬性都將被分配一個(gè)變量，其中冒號前面的是源對象中的屬性，冒號后面的是要賦值屬性;
- 第二種（第5行）是對象解構(gòu)的簡寫形式，對象的屬性與要分配的屬性一致時(shí)可以使用這種形式。
?如果需要給已有變量賦值，就需要額外注意了：
let obj = {x: 1, y: 2, z: 3};
let x = 0, y = 0, z = 0;
({x, y, z} = obj)
console.log(x, y, z)這里需要注意，需要將賦值表達(dá)式使用括號括起來，如果省略，解構(gòu)對象將被視為一個(gè)塊語句，而塊語句時(shí)不能放在賦值表達(dá)式左側(cè)的。 ?
當(dāng)使用解構(gòu)賦值時(shí)，可以給變量傳遞一個(gè)默認(rèn)值：
const person = {
name: 'ZhangSan',
height: 180
};
const { name, height, age = 25 } = person;
console.log(name, height, age);這里我們給age分配了一個(gè)默認(rèn)值，當(dāng)對源對象上不存在age屬性時(shí)，age就會(huì)被賦上默認(rèn)值25，而不是undefined。 ?
如果分配的對象屬性為undefined，那么就會(huì)使用默認(rèn)值：
const {x = 2} = {x: undefined};
console.log(x); // 22. 數(shù)組的解構(gòu)賦值
在使用數(shù)組解構(gòu)時(shí)，實(shí)際上會(huì)使用迭代器將所需要的值與結(jié)構(gòu)源分開。因此，我們可以對可迭代值使用數(shù)組結(jié)構(gòu)，包括字符串、數(shù)組、集合、函數(shù)映射、DOM元素。我們還可以將解構(gòu)賦值與擴(kuò)展運(yùn)算符結(jié)合使用。
（1）字符串
let message = 'Hello'; let [a, b] = message; let [x, y, ...z] = message; console.log(a, b); // H e console.log(x, y, z); // H e ['l', 'l', 'o']
（2）數(shù)組
let numbers = [1, 2, 3]; let [x, y, z] = numbers; console.log(x, y, z); // 1 2 3
（3）集合
let set = new Set().add('foo').add('bar');
let [a, b] = set;
console.log(a, b); // foo bar（4）Map
let map = new Map().set('a', 1).set('b', 2);
let [x, y] = map;
console.log(x, y); // ["a", 1] ["b", 2]在數(shù)組的解構(gòu)中，存儲(chǔ)變量的數(shù)組中的每個(gè)變量都會(huì)映射到解構(gòu)數(shù)組上相同索引處的相應(yīng)項(xiàng)。 ?
如果解構(gòu)中某一項(xiàng)不需要，可以使用逗號操作符進(jìn)行分隔：
const rgb = [200, 255, 100]; const [,, blue] = rgb; console.log(blue); // 100
與對象解構(gòu)一樣，可以使用數(shù)組解構(gòu)為局部變量設(shè)置默認(rèn)值：
const rgb = [200];
const [red = 255, green, blue = 255] = rgb;
console.log(`R: ${red}, G: ${green}, B: ${blue}`);如果變量已經(jīng)存在，就可以這么寫：
let red = 100, green = 200, blue = 50;
const rgb = [200, 255, 100];
[red, green] = rgb;
console.log(`R: ${red}, G: ${green}, B: ${blue}`);與對象解構(gòu)不同的是，這里不需要括號將數(shù)組括起來。 ?
如果給變量分配的值是undefined，那么就會(huì)使用默認(rèn)值：
const [x = 1] = [undefined]; console.log(x); // 1
這里的默認(rèn)值并不一定是一個(gè)固定值，它可以是一個(gè)計(jì)算屬性：
function foo() {
return 1;
}
let obj1 = {x: 2};
let obj2 = {x: undefined};
let {x=foo()} = obj1;
console.log(x); // 2
let {x=foo()} = obj2;
console.log(x); // 1如果我們想將數(shù)組中的一些元素分配給變量，而將數(shù)組中的其余項(xiàng)分配給特定的變量就可以這樣做：
let [greeting,...intro] = ["Hello", "I" , "am", "CUGGZ"]; console.log(greeting); // "Hello" console.log(intro); // ["I", "am", "CUGGZ"]
三、嵌套解構(gòu)
上面我們說的解構(gòu)的知識(shí)普通的數(shù)組和對象。實(shí)際上，解構(gòu)賦值可以用于嵌套數(shù)組和嵌套對象。比如，文章最開始的例子中，就是解構(gòu)的嵌套對象：
const student = {
name: 'ZhangSan',
age: 18,
scores: {
math: 19,
english: 85,
chinese: 100
}
};
const { name, scores: {math, english, chinese} } = student; 再來看一個(gè)嵌套數(shù)組解構(gòu)的例子：
let numbers = [1, [2, 3, 4], 5]; let [a, [b, c, d], e] = numbers; console.log(a, b, c, d, e); // 1 2 3 4 5
四、使用技巧
1. 函數(shù)解構(gòu)
（1）解構(gòu)函數(shù)參數(shù)
可以對函數(shù)參數(shù)使用解構(gòu)賦值：
function foo([a, b]) {
console.log(a + b);
}
foo([1, 2]); // 3
function bar({x, y}) {
console.log(x, y);
}
foo({x: 1, y: 2}); // 1 2可以對函數(shù)返回值使用解構(gòu)賦值：
function getStudentInfo() {
return {
name: 'ZhangSan',
age: 18,
scores: {
math: 19,
english: 85,
chinese: 100
}
};
}
const { name, scores: {math, english, chinese} } = getStudentInfo();
console.log(name, math, english, chinese);2. 循環(huán)中的解構(gòu)
當(dāng)我們需要循環(huán)中的對象鍵值時(shí)，也可以使用對象解構(gòu)：
const students = [
{
'name': 'ZhangSan',
'grade': 80
},
{
'name': 'LiSi',
'grade': 75
},
{
'name': 'WangWu',
'grade': 95
}
];
for(let {name, grade} of students){
console.log(name, grade);
}3. 動(dòng)態(tài)屬性解構(gòu)
很多時(shí)候我們不知道對象屬性的key，只有運(yùn)行時(shí)才知道。比如有一個(gè)方法getStudentInfo，它以一個(gè)key為參數(shù)，并返回相應(yīng)的屬性值：
getStudentInfo('name');
getStudentInfo('age'); 這里傳遞給getStudentInfo方法的參數(shù)是動(dòng)態(tài)的，因此可以這樣寫：
const getStudentInfo = key => {
const {[key]: value} = student;
return value;
}需要注意，包裹key的方括號不能少，否則會(huì)出現(xiàn)undefined值。
4. 交換變量
數(shù)組結(jié)構(gòu)一個(gè)很實(shí)用的功能就是實(shí)現(xiàn)交換局部變量。通常，我們會(huì)借助臨時(shí)變量來實(shí)現(xiàn)變量的交換：
let width = 300; let height = 400; let temp = width; width = height; height = temp; console.log(width, height)
如果使用數(shù)組的解構(gòu)賦值，就會(huì)變得很簡單：
let width = 300; let height = 400; [width, height] = [height, width]; console.log(width, height)
5. 數(shù)組拷貝
可以使用解構(gòu)賦值和rest運(yùn)算符來實(shí)現(xiàn)數(shù)組的拷貝：
const rgb = [200, 255, 100]; const [...newRgb] = rgb; // 等同于 const newRgb = [...rgb] console.log(newRgb)
四、解構(gòu)賦值注意點(diǎn)
為了防止從數(shù)組中取出一個(gè)值為undefined的對象，可以在表達(dá)式左邊的數(shù)組中為任意對象預(yù)設(shè)默認(rèn)值。
意思是：定義這個(gè)變量或者變量的值設(shè)置為 undefined的時(shí)候，而null、 '' 、false 在變量解析的過程中都是有值得情況，所以我們默認(rèn)賦值會(huì)不成功。
示例如下：
const {a = '1', b = '2', c = '3', d = '4', e = '5'} = {a: 'a', b: null, c: undefined, d: false, e: ''}
console.log(a); //a
console.log(b); //null
console.log(c); //3
console.log(d); //false
console.log(e); // ""如果只是根據(jù)屬性的存在與否來綁定默認(rèn)值的時(shí)候，可以使用解構(gòu)賦值。
總結(jié)
到此這篇關(guān)于JavaScript解構(gòu)賦值的文章就介紹到這了,更多相關(guān)JavaScript解構(gòu)賦值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js實(shí)現(xiàn)添加可信站點(diǎn)、修改activex安全設(shè)置,禁用彈出窗口阻止程序
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)添加可信站點(diǎn)、修改activex安全設(shè)置,禁用彈出窗口阻止程序。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
Javascript將數(shù)字轉(zhuǎn)化成為貨幣格式字符串
這篇文章主要介紹Javascript將數(shù)字轉(zhuǎn)化成為貨幣格式字符串的方法,通俗易懂,需要的朋友可以參考下。2016-06-06
這里我們來解析瀏覽器端的AJAX緩存機(jī)制,來共同看一下AJAX緩存與HTTP緩存的關(guān)系以及AJAX緩存的刷新時(shí)間問題2016-06-06
JS實(shí)現(xiàn)超過長度限制后自動(dòng)跳轉(zhuǎn)下一款文本框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)超過長度限制后自動(dòng)跳轉(zhuǎn)下一款文本框的方法,涉及javascript操作字符及本文框的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
基于JavaScript代碼實(shí)現(xiàn)兼容各瀏覽器的設(shè)為首頁和加入收藏
但是由于瀏覽器的兼容性問題，之前用的很多代碼都失去效果，下面就給出一段能夠兼容各個(gè)瀏覽器的代碼，也不能夠算是兼容，只能說在不支持的瀏覽器中能夠給出提示，對js兼容各個(gè)瀏覽器設(shè)為首頁加入收藏相關(guān)知識(shí)感興趣的朋友可以參考下本文2016-01-01
JavaScript面向?qū)ο笕齻€(gè)基本特征實(shí)例詳解【封裝、繼承與多態(tài)】
這篇文章主要介紹了JavaScript面向?qū)ο笕齻€(gè)基本特征,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript面向?qū)ο笕齻€(gè)基本特征封裝、繼承與多態(tài)的概念、原理、用法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
使用Promise鏈?zhǔn)秸{(diào)用解決多個(gè)異步回調(diào)的問題
這篇文章主要給大家介紹了使用Promise鏈?zhǔn)秸{(diào)用解決多個(gè)異步回調(diào)問題的方法，文中給出了詳細(xì)的介紹和示例代碼，有需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01
js瀏覽器滾動(dòng)條卷去的高度scrolltop(實(shí)例講解)
下面小編就為大家?guī)硪黄猨s瀏覽器滾動(dòng)條卷去的高度scrolltop(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
js實(shí)現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動(dòng)廣告條代碼
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動(dòng)廣告條代碼,涉及javascript基于鼠標(biāo)事件操作頁面元素樣式的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09
JavaScript利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳
斷點(diǎn)續(xù)傳即在文件上傳期間因?yàn)橐恍┰蚨鴮?dǎo)致上傳終止時(shí)，下次再次上傳同一個(gè)文件就從上一次上傳到一半的地方繼續(xù)上傳，以節(jié)省上傳時(shí)間。本文將利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳功能，快來跟隨小編一起學(xué)一學(xué)吧2022-03-03