一篇文章帶你瞭解JavaScript的解構賦值

Posted on by

1. 什麼是解構賦值 ？

將屬性/值從對象/數組中取出,賦值給其他變量

通俗來說，即解析某一數據的結構，將我們想要的東西提取出來，賦值給變量或常量。

讓我們通過一個例子看看：

const [a, b, c] = [1, 2, 3];
console.log(a, b, c);

在這裡插入圖片描述

將數組的值獲取出來，賦值給a, b, c

2. 數組的解構賦值

模式（結構）匹配

即左邊與右邊的結構相同 (如左邊是數組，右邊也要是數組)

索引值相同的完成賦值

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

通過例子來理解一下：

對於第一個：

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);

在這裡插入圖片描述

因為左邊與右邊的結構不匹配，右邊索引為 2 的地方是個 3，而左邊是個數組，無法完成匹配。

對於第二個

let [, a, ] = [1, 2, 3];
console.log(a);

索引值相同的完成賦值，a的索引值是 1，對應右邊索引值為 1 的值是 2，所以a = 2。

2.1) 數組解構賦值的默認值

const [a, b] = [];console.log(a, b);

在這裡插入圖片描述

當左邊對應的索引在右邊為undefined時(如右邊不存在這個值的情況)，此時賦值的是undefined

那我們如何修改這個賦值呢 ？

通過在左邊給變量寫個 = 想要的值，即默認值。

所以，當左邊的值=== undefined時，如果有默認值，左邊的值會等於默認值

const [a = 1, b = 2] = [];
console.log(a, b);

在這裡插入圖片描述

2.2) 數組解構賦值的應用

類數組中的應用

比如arguments中的應用

將arguments中的值提取出來

function fun() {
    const [a, b, c] = arguments;
    console.log(a, b);
}

fun(1, 2, 3, 4);

在這裡插入圖片描述

比如NodeList中的應用

在這裡，將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>解構賦值的應用</title>
</head>
<body>
    <p>one</p>
    <p>two</p>
    <p>three</p>
    <script>
    	// 利用數組解構賦值將 p 元素獲取的同時解構出來
    	const [p1, p2, p3] = document.querySelectorAll('p');
    	console.log(p1, p2, p3);
	</script>
</body>
</html>

在這裡插入圖片描述

交換變量的值

let a = 1, b = 2;
[a, b] = [b, a]; // 相當於 [a, b] = [2, 1];
console.log(a, b);

在這裡插入圖片描述

3. 對象的解構賦值

模式（結構）匹配

即左邊與右邊的結構相同 (如左邊是對象，右邊也要是對象)

屬性名相同的完成賦值

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

通過例子來理解一下：

const {val, objName} = {objName: "object", val: 1};
console.log(objName, val);

在這裡插入圖片描述

屬性名相同的完成賦值，不用管左邊屬性名出現的順序是否與右邊出現的順序一致。

這裡還可以這麼寫，給新的變量名賦值：

const {val: vvv, objName: objnnn} = {objName: "object", val: 1};
console.log(objnnn, vvv);

在這裡插入圖片描述

3.1) 對象解構賦值的默認值

與數組解構賦值類似

對象的屬性值=== undefined時，如果有默認值，等於對應的默認值

const {age: val = 18} = {};
console.log(val);

在這裡插入圖片描述

3.2)對一個已聲明的變量解構賦值

在數組中，我們可以直接這麼寫：

let a, b;
[a, b] = [1, 2];
console.log(a, b);

在這裡插入圖片描述

但是，在對象中，直接這麼寫則會報錯

let a, b;
{a, b} = {a: 1, b: 2};
console.log(a, b);

在這裡插入圖片描述

因為在這裡，左邊的花括號，瀏覽器會把它當成是一個代碼塊。

那麼，我們如何解決這個問題呢 ？

在外面加個圓括號

let a, b;
({a, b} = {a: 1, b: 2});
console.log(a, b);

在這裡插入圖片描述

除此之外，對象的解構賦值可以取到繼承的屬性！

4. 字符串的解構賦值

可以用數組和對象的形式進行結構賦值

const [a, b] = "Hello";
// 左邊對象的屬性名對應右邊字符串的字符下標序號
const {2: c, 4: e} = "Hello";
console.log(a, b, c, e);

在這裡插入圖片描述

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：