深入理解JavaScript 解構(gòu)賦值
JavaScript 的解構(gòu)賦值是一種從數(shù)組 or 對象中提取值并將其賦給變量的語法。這種語法讓我們從復(fù)雜的數(shù)據(jù)結(jié)構(gòu)中提取數(shù)據(jù)變得簡潔和易讀。解構(gòu)賦值可以用在數(shù)組、對象以及嵌套結(jié)構(gòu)中。
解構(gòu)是：使用 ES6 的一種語法規(guī)則，將一個對象或數(shù)組的某個屬性提取到某個變量中。
解構(gòu)不會對被解構(gòu)的目標造成任何影響。
1. 數(shù)組解構(gòu)賦值
數(shù)組解構(gòu)賦值允許我們將數(shù)組中的值提取到變量中?；菊Z法如下：
const [a, b, c] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3
如果數(shù)組的某個位置沒有值，可以為其設(shè)置默認值：
const [x = 1, y = 2] = [10]; console.log(x); // 10 console.log(y); // 2
使用 ... 運算符可以將剩余的元素放入一個數(shù)組中：
const [first, ...rest] = [1, 2, 3, 4, 5]; console.log(first); // 1 console.log(rest); // [2, 3, 4, 5]
2. 對象解構(gòu)賦值
對象解構(gòu)賦值允許我們將對象的屬性值提取到變量中。基本語法如下：
const { name, age } = { name: 'Alice', age: 18 };
console.log(name); // 'Alice'
console.log(age); // 18如果對象中沒有指定的屬性，可以為其設(shè)置默認值：
const { name, age = 30 } = { name: 'Bob' };
console.log(name); // 'Bob'
console.log(age); // 30可以給解構(gòu)出來的屬性重新命名：
const { name: fullName, age: years } = { name: 'Charlie', age: 35 };
console.log(fullName); // 'Charlie'
console.log(years); // 35可以解構(gòu)嵌套的對象：
const person = {
name: 'Dave',
address: {
city: 'New York',
zip: '10001'
}
};
const { name, address: { city, zip } } = person;
console.log(name); // 'Dave'
console.log(city); // 'New York'
console.log(zip); // '10001'在嵌套解構(gòu)中設(shè)置默認值：
const person = {
name: 'Eve',
address: {}
};
const { name, address: { city = 'Unknown' } } = person;
console.log(name); // 'Eve'
console.log(city); // 'Unknown'3. 解構(gòu)賦值在函數(shù)參數(shù)中的應(yīng)用
解構(gòu)賦值可以直接在函數(shù)參數(shù)中使用，簡化函數(shù)調(diào)用：
function greet({ name, age }) {
console.log(`Hello ${name}, you are ${age} years old.`);
}
const user = { name: 'Frank', age: 4 };
greet(user); // Hello Frank, you are 4 years old.4. 解構(gòu)賦值與變量交換
可以利用解構(gòu)賦值來交換變量的值：
let a = 1; let b = 2; [a, b] = [b, a]; console.log(a); // 2 console.log(b); // 1
5. 注意點
5.1 默認值的計算
當使用默認值時，這些默認值是在解構(gòu)賦值操作時計算的：
const { x = Math.random() } = {};
console.log(x); // 每次運行都可能是不同的值如果對象中的屬性已經(jīng)有值，則默認值不會被使用，只在目標屬性為 undefined 時使用。
const { x = Math.random() } = {x: 10};
console.log(x); // 105.2 解構(gòu)賦值中的 undefined 和 null
解構(gòu)賦值僅對 undefined 提供默認值，不對 null 提供。如果對象的屬性是 null，默認值不生效。
const { a = 1 } = { a: null };
console.log(a); // null5.3 解構(gòu)賦值的深度
深度解構(gòu)需要確保每一層的對象結(jié)構(gòu)都存在。否則會引發(fā)錯誤：
const obj = { a: { b: 1 } };
const { a: { b, c = 2 } } = obj;
console.log(b); // 1
console.log(c); // 2
// 如果 obj = {}，則會拋出錯誤
// const { a: { b, c = 2 } } = {};
5.4 解構(gòu)賦值的計算順序
在對象解構(gòu)賦值中，計算順序可能會影響結(jié)果：
const obj = { a: 1 };
const { a, b = a } = obj;
console.log(a); // 1
console.log(b); // 1
此處，a 賦值為 1，b 的默認值是 a，因此 b 的值是 1。
const obj = { a: 1, b: 2 };
const { a = 10, b = a } = obj;
console.log(a); // 1
console.log(b); // 2
此處，a 和 b 各自存在值，均不使用默認值。
5.5 解構(gòu)賦值與函數(shù)參數(shù)
在函數(shù)參數(shù)中使用解構(gòu)賦值時，要確保傳入的參數(shù)結(jié)構(gòu)與解構(gòu)的變量名一致：
function func({ a, b }) {
console.log(a, b);
}
func({ a: 1, b: 2 }); // 1 2
func({ a: 1 }); // 1 undefined
func({}); // undefined undefined5.6 解構(gòu)賦值與函數(shù)默認參數(shù)
在函數(shù)的參數(shù)解構(gòu)中使用默認值時，需要注意函數(shù)參數(shù)的默認值的順序：
function func({ a = 1, b = a } = {}) {
console.log(a, b);
}
func(); // 1 1
func({ a: 2 }); // 2 2
func({ b: 3 }); // 1 35.7 防止解構(gòu)賦值錯誤
確保在解構(gòu)賦值之前檢查對象或數(shù)組是否存在。如果對象或數(shù)組是 null 或 undefined，嘗試解構(gòu)將會引發(fā)錯誤：
let obj = null;
// const { a } = obj; // 這會拋出錯誤
obj = {};
const { a = 1 } = obj;
console.log(a); // 15.8 解構(gòu)賦值中的計算屬性名
如果需要解構(gòu)具有動態(tài)計算屬性名的對象，確保正確地使用方括號語法：
const key = 'b';
const obj = { a: 1, [key]: 2 };
const { [key]: value } = obj;
console.log(value); // 2到此這篇關(guān)于深入理解JavaScript 解構(gòu)賦值的文章就介紹到這了,更多相關(guān)JavaScript 解構(gòu)賦值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了新版小程序登錄授權(quán)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
新手學(xué)習(xí)前端之js模仿淘寶主頁網(wǎng)站
淘寶網(wǎng)大家在熟悉不過了，那么淘寶網(wǎng)首頁模板是怎么做的呢？今天小編抽時間給大家分享新手學(xué)習(xí)前端之js模仿淘寶主頁網(wǎng)站的相關(guān)資料,需要的朋友可以參考下2016-10-10
柱狀圖主要用于表示離散數(shù)據(jù)的頻數(shù),也是一種基礎(chǔ)可視化圖,這篇文章主要給大家介紹了關(guān)于Echarts Bar橫向柱狀圖的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
有時候我們經(jīng)常看到有些blog出現(xiàn)一些點擊頁面出現(xiàn)小紅心的效果，很是喜歡，這里就為大家分享一下代碼直接引用即可2018-05-05
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)滾動加載更多，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
本文主要介紹了聊一聊JavaScript中的內(nèi)存泄漏，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05![Javascript驗證上傳圖片大小[前臺處理]](http://img.jbzj.com/images/xgimg/bcimg6.png)
在做上傳圖片的時候，如果不限制上傳圖片大小，后果非常的嚴重。解決這個問題有兩種方式：后臺處理、前臺處理2014-07-07
JavaScript和Vue分別實現(xiàn)逐字彈出(打字機)效果
這篇文章主要為大家詳細介紹了如何通過CSS、JavaScript和Vue分別實現(xiàn)逐字彈出(打字機)效果,文中的示例代碼講解詳細,需要的小伙伴可以參考一下2024-01-01
這篇文章主要介紹了小程序點擊圖片實現(xiàn)png轉(zhuǎn)jpg,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
這篇文章主要為大家詳細介紹了js實現(xiàn)注冊頁面校驗功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08