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)中，存儲變量的數(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í)際上，解構(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)文章
使用ESLint禁止項(xiàng)目導(dǎo)入特定模塊的方法步驟
這篇文章主要介紹了使用ESLint禁止項(xiàng)目導(dǎo)入特定模塊的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
讓瀏覽器DOM元素最后加載的方法有很多，本例為大家介紹下，通過js如何實(shí)現(xiàn)2014-07-07
JavaScript設(shè)計(jì)模式之單例模式詳解
單例模式（Singleton Pattern）是一種創(chuàng)建型設(shè)計(jì)模式,確保一個(gè)類只有一個(gè)實(shí)例,并提供全局訪問該實(shí)例的方式,這在某些場景下非常有用,例如配置管理類、日志類或數(shù)據(jù)庫連接管理類,需要的朋友可以參考下2024-08-08
JavaScript中Window對象stop()方法用于停止頁面載入,該方法類似在瀏覽器上點(diǎn)擊停止載入按鈕,如果頁面在載入圖片或框架(iframe)時(shí)間過長,我門可以使用該方法來停止載入,可以應(yīng)用在判斷頁面載入時(shí)間,過長就不加載特效2023-09-09
LRU是Least?Recently?Used的縮寫，即最近最少使用。作為一種經(jīng)典的緩存策略，它的基本思想是長期不被使用的數(shù)據(jù)，在未來被用到的幾率也不大，所以當(dāng)新的數(shù)據(jù)進(jìn)來時(shí)我們可以優(yōu)先把這些數(shù)據(jù)替換掉。本文用JavaScript實(shí)現(xiàn)這一算法，需要的可以參考一下2022-09-09
JavaScript實(shí)現(xiàn)簡單精致的圖片左右無縫滾動(dòng)效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡單精致的圖片左右無縫滾動(dòng)效果,涉及javascript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2017-03-03
JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度功能
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度的效果,通過點(diǎn)擊三角按鈕旋轉(zhuǎn)180度,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-02-02
原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)
這篇文章主要介紹了原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
本篇文章小編為大家介紹，關(guān)于ExtJS4.1 快捷鍵支持的問題。需要的朋友參考下2013-04-04
onkeydown事件解決按回車鍵直接提交數(shù)據(jù)的需求
登陸頁面需要撲捉用戶按下回車自動(dòng)提交的需求，于是相到在body里添加onkeydown事件跳javascript在提交表單，具體看下實(shí)現(xiàn)代碼，希望對你有所幫助2013-04-04