一篇文章帶你瞭解JavaScript的解構賦值
目錄
- 1. 什麼是解構賦值 ？
- 2. 陣列的解構賦值
- 2.1) 陣列解構賦值的預設值
- 2.2) 陣列解構賦值的應用
- 類陣列中的應用
- 交換變數的值
- 3. 物件的解構賦值
- 3.1) 物件解構賦值的預設值
- 3.2)對一個已宣告的變數解構賦值
- 4. 字串的解構賦值
- 總結
1. 什麼是解構賦值 ？
將屬性/值從物件/陣列中取出,賦值給其他變數
通俗來說，即解析某一資料的結構，將我們想要的東西http://www.cppcns.com提取出來，賦值給變數或常量。
讓我們通過一個例子看看：
const [a,b,c] = [1,2,3]; console.log(a,c);
將陣列的值獲取出來，賦值給a
b,c
2. 陣列的解構賦值
模式（結構）匹配
即左邊與右邊的結構相同 (如左邊是陣列，右邊也要是陣列)
索引值相同的完成賦值
即左邊與右邊的索引值相同的完成賦值
通過例子來理解一下：
對於第一個：
let [e,[,f],g] = [1,[2,4,5],3]; // 可以正確輸出 console.log(e,f,g);
但是如果寫成這樣，則會報錯。
let [e,[g]] = [1,3]; console.log(e,g);
因為左邊與右邊的結構不匹配，右邊索引為 2 的地方是個 3，而左邊是個陣列，無法完成匹配。
對於第二個
let [,a,] = [1,3]; console.log(a);
索引值相同的完成賦值，a的索引值是 1，對應右邊索引值為 1 的值是 2，所以a = 2。
2.1) 陣列解構賦值的預設值
const [a,b] = [];console.log(a,b);
當左邊對應的索引在右邊為undefined時(如右邊不存在這個值的情況)，此時賦值的是undefined
那我們如何修改這個賦值呢 ？
通過在左邊給變數寫個 = 想要的值http://www.cppcns.com，即預設值。
所以，當左邊的值=== undefined時，如果有預設值，左邊的值會等於預設值
const [a = 1,b = 2] = []; console.log(a,b);
2.2) 陣列解構賦值的應用
類陣列中的應用
比如arguments中的應用
將arguments中的值提取出來
function fun() {
const [a,c] = arguments;
console.log(a,b);
}
fun(1,3,4);
比如NodeList中的應用
在這裡，將p元素提取出來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=http://www.cppcns.com"X-UA-Compatible" content="IE=edgehttp://www.cppcns.com">
<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,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: 2});
console.log(a,b);
除此之外，物件的解構賦值可以取到繼承的屬性！
4. 字串的解構賦值
可以用陣列和物件的形式進行結構賦值
const [a,b] = "Hello";
// 左邊物件的屬性名對應右邊字串的字元下標序號
const {2: c,4: e} = "Hello";
console.log(a,c,e);
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!