亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

一篇文章帶你了解JavaScript的解構(gòu)賦值

 更新時(shí)間：2022年01月24日 16:11:21   作者：CSPsy  
這篇文章主要為大家介紹了JavaScript的解構(gòu)賦值，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1. 什么是解構(gòu)賦值 ？

將屬性/值從對(duì)象/數(shù)組中取出,賦值給其他變量

通俗來說，即解析某一數(shù)據(jù)的結(jié)構(gòu)，將我們想要的東西提取出來，賦值給變量或常量。

讓我們通過一個(gè)例子看看：

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ù)組)

索引值相同的完成賦值

即左邊與右邊的索引值相同的完成賦值

通過例子來理解一下：

對(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ù)組，無法完成匹配。

對(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è)賦值呢 ？

通過在左邊給變量寫個(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中的值提取出來

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 元素獲取的同時(shí)解構(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. 對(duì)象的解構(gòu)賦值

模式（結(jié)構(gòu)）匹配

即左邊與右邊的結(jié)構(gòu)相同 (如左邊是對(duì)象，右邊也要是對(duì)象)

屬性名相同的完成賦值

即左邊與右邊的屬性名相同的完成賦值

通過例子來理解一下：

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è)問題呢 ？

在外面加個(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é)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

最新評(píng)論