JavaScript解構賦值詳解
目錄
- 概念
- 陣列解構
- 宣告分別賦值
- 解構預設值
- 交換變數值
- 解構函式返回的陣列
- 忽略返回值(或跳過某一項)
- 賦值陣列剩餘值給一個變數
- 巢狀陣列解構
- 字串解構
- 物件解構
- 基礎物件解構
- 賦值給新變數名
- 解構預設值
- 賦值給新物件名的同時提供預設值
- 同時使用陣列和物件解構
- 不完全解構
- 賦值剩餘值給一個物件
- 巢狀物件解構(可忽略解構)
- 注意事項
- 小心使用已宣告變數進行解構
- 函式引數的解構賦值
- 解構的用途
- 交換變數的值
- 從函式返回多個值
- 提取ON資料
- 總結
概念
ES6提供了更簡潔的賦值模式,從陣列和物件中提取值,這被稱為解構
示例:
[a,b] = [50,100]; console.log(a); // expected output: 50 console.log(b); // expected output: 100 [a,b,...rest] = [10,20,30,40,50]; console.log(rest); // expected output: [30,www.cppcns.com50]
陣列解構
陣列解構是非常簡單簡潔的,在賦值表示式的左側使用陣列字面量,陣列字面量中的每個變數名稱對映為解構陣列的相同索引項
這是什麼意思呢,就是如下面這個示例一樣,左邊陣列中的項分別得到了右側解構陣列相應索引的值
let [a,c] = [1,2,3]; // a = 1 // b = 2 // c = 3
宣告分別賦值
你可以通過變數宣告分別解構賦值
示例:宣告變數,分別賦值
// 宣告變數 let a,b; // 然後分別賦值 [a,b] = [1,2]; console.log(a); // 1 console.log(b); // 2
解構預設值
如果解構取出的值是undefined,可以設定預設值:
let a,b; // 設定預設值 [a = 5,b = 7] = [1]; console.log(a); // 1 console.log(b); // 7
在上面的例子中,我們給a和b均設定了預設值
這種情況下,如果a或b的值是undefined,它將把設定的預設值賦給相應變數(5賦給a,7賦給b)
交換變數值
以往我們進行兩個變數的交換,都是使用
//交換ab c = a; a = b; b = c;
或者異或的方法
然而在解構賦值中,我們可以在一個解構表示式中交換兩個變數值
let a = 1; let b = 3; //交換a和b的值 [a,b] = [b,a]; console.log(a); // 3 console.log(b); // 1
解構函式返回的陣列
我們可以直接解構一個返回值為陣列的函式
function c() { return [10,20]; } let a,b; [a,b] = c(); console.log(a); // 10 console.log(b); // 20
在上面的例子中,**c()**的返回值[10,20]可以在單獨的同一行程式碼中使用解構
忽略返回值(或跳過某一項)
你可以有選擇性的跳過一些不想得到的返回值
function c() { return [1,3]; } let [a,b] = c(); console.log(a); // 1 console.log(b); // 3
賦值陣列剩餘值給一個變數
當你使用陣列解構時,你可以把賦值陣列剩餘的部分全部賦給一個變數
let [a,...b] = [1,3]; console.log(a); // 1 console.log(b); // [2,3]
這樣的話b也會變成一個數組了,陣列中的項是剩餘的所有項
注意:
這裡要小心結尾是不能再寫逗號的,如果多了一個逗號將會報錯
let [a,...b,] = [1,3]; // SyntaxError: rest element may not have a trailing comma
巢狀陣列解構
像物件一樣,陣列也可以進行巢狀解構
示例:
const color = ['#FF00FF',[255,255],'rgb(255,255)'];
// Use nested destrucwww.cppcns.comturing twww.cppcns.como assign red,green and blue
// 使用巢狀解構賦值 red,green,blue
const [hex,[red,blue]] = color;
console.log(hex,red,blue); // #FF00FF 255 0 255
字串解構
在陣列解構中,解構的目標若為可遍歷物件,皆可進行解構賦值,可遍歷物件即實現Iterator介面的資料
let [http://www.cppcns.coma,c,d,e] = 'hello'; /* a = 'h' b = 'e' c = 'l' d = 'l' e = 'o' */
物件解構
基礎物件解構
let x = { y: 22,z: true }; let { y,z } = x; // let {y:y,z:z} = x;的簡寫 console.log(y); // 22 console.log(z); // true
賦值給新變數名
當使用物件解構時可以改變變數的名稱
let o = { p: 22,q: true }; let { p: foo,q: bar } = o; console.log(foo); // 22 console.log(bar); // true
如上程式碼var {p: foo} = o 獲取物件 o 的屬性名 p,然後賦值給一個名稱為 foo 的變數
解構預設值
如果解構取出的物件值是undefined,我們可以設定預設值
let { a = 10,b = 5 } = { a: 3 }; console.log(a); // 3 console.log(b); // 5
賦值給新物件名的同時提供預設值
前面提到過我們賦值給新的物件名,這裡我們可以給這個新的物件名提供一個預設值,如果沒有解構它,就會自動使用預設值
let { a: aa = 10,b: bb = 5 } = { a: 3 }; console.log(aa); // 3 console.log(bb); // 5
同時使用陣列和物件解構
在結構中陣列和物件可以一起使用
const props = [ { id: 1,name: 'Fizz' },{ id: 2,name: 'Buzz' },{ id: 3,name: 'FizzBuzz' },]; const [,{ name }] = props; console.log(name); // "FizzBuzz"
不完全解構
let obj = {p: [{y: 'world'}] }; let {p: [{ y },x ] } = obj;//不解構x // x = undefined // y = 'world'
賦值剩餘值給一個物件
let {a,...rest} = {a: 10,b: 20,c: 30,d: 40}; // a = 10 // b = 20 // rest = {c: 30,d: 40}
巢狀物件解構(可忽略解構)
let obj = {p: ['hello',{y: 'world'}] }; let {p: [x,{ y }] } = obj; // x = 'hello' // y = 'world' let obj = {p: ['hello',{ }] } = obj;//忽略y // x = 'hello'
注意事項
小心使用已宣告變數進行解構
錯誤示範:
let x; {x} = {x: 1};
引擎會將{x}理解為一個程式碼塊,從而產生語法錯誤,我們要避免將大括號寫在行首,避免Script將其解釋為程式碼塊
正確寫法:
let x; ({x} = {x: 1});
正確寫法將整個解構賦值語句放在一個圓括號裡,就可以正確執行了
函式引數的解構賦值
函式的引數也可以使用解構賦值
function add([x,y]) { return x + y; } add([1,2]);
上面程式碼中,函式add的引數表面上是一個數組,但在傳參的時候,陣列引數就被解構為變數x和y了,對於函式內部來說,就和直接傳入x和y是一樣的
解構的用途
解構賦值的用法很多
交換變數的值
let x = 1; let y = 2; [x,y] = [y,x];
上面的程式碼交換x和y的值,這樣的寫法不NSxzrMIGj僅簡潔而且易讀,語義清晰
從函式返回多個值
函式只能返回一個值,如果要返回多個值,我們只能將這些值放置陣列或物件裡返回,當我們有了解構賦值後,從物件或數組裡取出這些值猶如探囊取物
// 返回一個數組 function example() { return [1,c] = example(); // 返回一個物件 function example() { return { foo: 1,bar: 2 }; } let { foo,bar } = example();
提取JSON資料
解構賦值對於提取JSON物件中的資料,尤其有用
示例:
let jsonData = { id: 42,status: "OK",data: [867,5309] }; let { id,status,data: number } = jsonData; console.log(id,number); // 42,"OK",[867,5309]
使用上面的程式碼,我們就可以快速取出JSON資料中的值
總結
本篇文章就到這裡了,希望能夠給你帶來幫助,也希望您能夠多多關注我們的更多內容!