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