一篇文章帶你了解JavaScript的解構(gòu)賦值
1. 什么是解構(gòu)賦值 ？
將屬性/值從對象/數(shù)組中取出,賦值給其他變量
通俗來說，即解析某一數(shù)據(jù)的結(jié)構(gòu)，將我們想要的東西提取出來，賦值給變量或常量。
讓我們通過一個例子看看：
const [a, b, c] = [1, 2, 3]; console.log(a, b, c);
將數(shù)組的值獲取出來，賦值給a, b, c
2. 數(shù)組的解構(gòu)賦值
模式（結(jié)構(gòu)）匹配
即左邊與右邊的結(jié)構(gòu)相同 (如左邊是數(shù)組，右邊也要是數(shù)組)
索引值相同的完成賦值
即左邊與右邊的索引值相同的完成賦值
通過例子來理解一下：
對于第一個：
let [e, [ , , f], g] = [1, [2, 4, 5], 3]; // 可以正確輸出 console.log(e, f, g);
但是如果寫成這樣，則會報錯。
let [e, [ , , f], [g]] = [1, [2, 4, 5], 3]; console.log(e, f, g);
因為左邊與右邊的結(jié)構(gòu)不匹配，右邊索引為 2 的地方是個 3，而左邊是個數(shù)組，無法完成匹配。
對于第二個
let [, a, ] = [1, 2, 3]; console.log(a);
索引值相同的完成賦值，a的索引值是 1，對應(yīng)右邊索引值為 1 的值是 2，所以a = 2。
2.1) 數(shù)組解構(gòu)賦值的默認(rèn)值
const [a, b] = [];console.log(a, b);
當(dāng)左邊對應(yīng)的索引在右邊為undefined時(如右邊不存在這個值的情況)，此時賦值的是undefined
那我們?nèi)绾涡薷倪@個賦值呢 ？
通過在左邊給變量寫個 = 想要的值，即默認(rèn)值。
所以，當(dāng)左邊的值=== undefined時，如果有默認(rèn)值，左邊的值會等于默認(rèn)值
const [a = 1, b = 2] = []; console.log(a, b);
2.2) 數(shù)組解構(gòu)賦值的應(yīng)用
類數(shù)組中的應(yīng)用
比如arguments中的應(yīng)用
將arguments中的值提取出來
function fun() {
const [a, b, c] = arguments;
console.log(a, b);
}
fun(1, 2, 3, 4);
比如NodeList中的應(yīng)用
在這里，將p元素提取出來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>解構(gòu)賦值的應(yīng)用</title>
</head>
<body>
<p>one</p>
<p>two</p>
<p>three</p>
<script>
// 利用數(shù)組解構(gòu)賦值將 p 元素獲取的同時解構(gòu)出來
const [p1, p2, p3] = document.querySelectorAll('p');
console.log(p1, p2, p3);
</script>
</body>
</html>
交換變量的值
let a = 1, b = 2; [a, b] = [b, a]; // 相當(dāng)于 [a, b] = [2, 1]; console.log(a, b);
3. 對象的解構(gòu)賦值
模式（結(jié)構(gòu)）匹配
即左邊與右邊的結(jié)構(gòu)相同 (如左邊是對象，右邊也要是對象)
屬性名相同的完成賦值
即左邊與右邊的屬性名相同的完成賦值
通過例子來理解一下：
const {val, objName} = {objName: "object", val: 1};
console.log(objName, val);
屬性名相同的完成賦值，不用管左邊屬性名出現(xiàn)的順序是否與右邊出現(xiàn)的順序一致。
這里還可以這么寫，給新的變量名賦值：
const {val: vvv, objName: objnnn} = {objName: "object", val: 1};
console.log(objnnn, vvv);
3.1) 對象解構(gòu)賦值的默認(rèn)值
與數(shù)組解構(gòu)賦值類似
對象的屬性值=== undefined時，如果有默認(rèn)值，等于對應(yīng)的默認(rèn)值
const {age: val = 18} = {};
console.log(val);
3.2)對一個已聲明的變量解構(gòu)賦值
在數(shù)組中，我們可以直接這么寫：
let a, b; [a, b] = [1, 2]; console.log(a, b);
但是，在對象中，直接這么寫則會報錯
let a, b;
{a, b} = {a: 1, b: 2};
console.log(a, b);
因為在這里，左邊的花括號，瀏覽器會把它當(dāng)成是一個代碼塊。
那么，我們?nèi)绾谓鉀Q這個問題呢 ？
在外面加個圓括號
let a, b;
({a, b} = {a: 1, b: 2});
console.log(a, b);
除此之外，對象的解構(gòu)賦值可以取到繼承的屬性！
4. 字符串的解構(gòu)賦值
可以用數(shù)組和對象的形式進(jìn)行結(jié)構(gòu)賦值
const [a, b] = "Hello";
// 左邊對象的屬性名對應(yīng)右邊字符串的字符下標(biāo)序號
const {2: c, 4: e} = "Hello";
console.log(a, b, c, e);
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
js HTML5多圖片上傳及預(yù)覽實例解析（不含前端的文件分割）
這篇文章主要詳細(xì)解析了js HTML5多圖片上傳及預(yù)覽實例，不含前端的文件分割，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
我們在各種網(wǎng)頁中經(jīng)常見到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實現(xiàn)輪播圖效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
javascript實現(xiàn)網(wǎng)站加入收藏功能
這篇文章主要介紹了javascript實現(xiàn)網(wǎng)站加入收藏功能的相關(guān)資料,需要的朋友可以參考下2015-12-12
JavaScript中實現(xiàn)鍵值對應(yīng)的字典與哈希表結(jié)構(gòu)的示例
字典或者哈希表這樣的鍵值對應(yīng)結(jié)構(gòu)在其他很多語言中都有內(nèi)置,非常好用,這里我們來看一下JavaScript中實現(xiàn)鍵值對應(yīng)的字典與哈希表結(jié)構(gòu)的示例:2016-06-06
這篇文章主要介紹了深入理解Javascript中this的作用域,本文用大量例子來深入探討this的作用域,需要的朋友可以參考下2014-08-08
JavaScript實現(xiàn)同一頁面內(nèi)兩個表單互相傳值的方法
這篇文章主要介紹了JavaScript實現(xiàn)同一頁面內(nèi)兩個表單互相傳值的方法,涉及javascript鼠標(biāo)事件及頁面元素賦值操作的相關(guān)技巧,需要的朋友可以參考下2015-08-08
本文給大家匯總介紹了javascript格式化日期時間的五種常用方法，個人對第五種個性化輸出時間比較有興趣，基本上只要項目中能用到都是使用第五種，推薦給小伙伴們。2015-06-06
圖片懶加載是日常開發(fā)會經(jīng)常使用的一個功能,但是在日常中可能使用v-lazy便直接實現(xiàn)了圖片懶加載,但是本文將通過原生js來實現(xiàn)一下圖片懶加載的功能，感興趣的同學(xué)跟著小編一起來看看吧2023-07-07
JavaScript null和undefined區(qū)別分析
在JavaScript開發(fā)中，被人問到：null與undefined到底有啥區(qū)別？2009-10-10
基于ajax與msmq技術(shù)的消息推送功能實現(xiàn)代碼
這篇文章主要介紹了基于ajax與msmq技術(shù)的消息推送功能實現(xiàn)代碼，具有一定的參考價值，有興趣的可以了解一下。2016-12-12