JavaScript解構(gòu)賦值詳解
概念
ES6提供了更簡潔的賦值模式,從數(shù)組和對象中提取值,這被稱為解構(gòu)
示例:
[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, 40, 50]
數(shù)組解構(gòu)
數(shù)組解構(gòu)是非常簡單簡潔的,在賦值表達(dá)式的左側(cè)使用數(shù)組字面量,數(shù)組字面量中的每個變量名稱映射為解構(gòu)數(shù)組的相同索引項(xiàng)
這是什么意思呢,就是如下面這個示例一樣,左邊數(shù)組中的項(xiàng)分別得到了右側(cè)解構(gòu)數(shù)組相應(yīng)索引的值
let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c = 3
聲明分別賦值
你可以通過變量聲明分別解構(gòu)賦值
示例:聲明變量,分別賦值
// 聲明變量 let a, b; // 然后分別賦值 [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2
解構(gòu)默認(rèn)值
如果解構(gòu)取出的值是undefined,可以設(shè)置默認(rèn)值:
let a, b; // 設(shè)置默認(rèn)值 [a = 5, b = 7] = [1]; console.log(a); // 1 console.log(b); // 7
在上面的例子中,我們給a和b均設(shè)置了默認(rèn)值
這種情況下,如果a或b的值是undefined,它將把設(shè)置的默認(rèn)值賦給相應(yīng)變量(5賦給a,7賦給b)
交換變量值
以往我們進(jìn)行兩個變量的交換,都是使用
//交換ab c = a; a = b; b = c;
或者異或的方法
然而在解構(gòu)賦值中,我們可以在一個解構(gòu)表達(dá)式中交換兩個變量值
let a = 1; let b = 3; //交換a和b的值 [a, b] = [b, a]; console.log(a); // 3 console.log(b); // 1
解構(gòu)函數(shù)返回的數(shù)組
我們可以直接解構(gòu)一個返回值為數(shù)組的函數(shù)
function c() { return [10, 20]; } let a, b; [a, b] = c(); console.log(a); // 10 console.log(b); // 20
在上面的例子中,**c()**的返回值[10,20]可以在單獨(dú)的同一行代碼中使用解構(gòu)
忽略返回值(或跳過某一項(xiàng))
你可以有選擇性的跳過一些不想得到的返回值
function c() { return [1, 2, 3]; } let [a, , b] = c(); console.log(a); // 1 console.log(b); // 3
賦值數(shù)組剩余值給一個變量
當(dāng)你使用數(shù)組解構(gòu)時,你可以把賦值數(shù)組剩余的部分全部賦給一個變量
let [a, ...b] = [1, 2, 3]; console.log(a); // 1 console.log(b); // [2, 3]
這樣的話b也會變成一個數(shù)組了,數(shù)組中的項(xiàng)是剩余的所有項(xiàng)
注意:
這里要小心結(jié)尾是不能再寫逗號的,如果多了一個逗號將會報錯
let [a, ...b,] = [1, 2, 3]; // SyntaxError: rest element may not have a trailing comma
嵌套數(shù)組解構(gòu)
像對象一樣,數(shù)組也可以進(jìn)行嵌套解構(gòu)
示例:
const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)']; // Use nested destructuring to assign red, green and blue // 使用嵌套解構(gòu)賦值 red, green, blue const [hex, [red, green, blue]] = color; console.log(hex, red, green, blue); // #FF00FF 255 0 255
字符串解構(gòu)
在數(shù)組解構(gòu)中,解構(gòu)的目標(biāo)若為可遍歷對象,皆可進(jìn)行解構(gòu)賦值,可遍歷對象即實(shí)現(xiàn)Iterator接口的數(shù)據(jù)
let [a, b, c, d, e] = 'hello'; /* a = 'h' b = 'e' c = 'l' d = 'l' e = 'o' */
對象解構(gòu)
基礎(chǔ)對象解構(gòu)
let x = { y: 22, z: true }; let { y, z } = x; // let {y:y,z:z} = x;的簡寫 console.log(y); // 22 console.log(z); // true
賦值給新變量名
當(dāng)使用對象解構(gòu)時可以改變變量的名稱
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 的變量
解構(gòu)默認(rèn)值
如果解構(gòu)取出的對象值是undefined,我們可以設(shè)置默認(rèn)值
let { a = 10, b = 5 } = { a: 3 }; console.log(a); // 3 console.log(b); // 5
賦值給新對象名的同時提供默認(rèn)值
前面提到過我們賦值給新的對象名,這里我們可以給這個新的對象名提供一個默認(rèn)值,如果沒有解構(gòu)它,就會自動使用默認(rèn)值
let { a: aa = 10, b: bb = 5 } = { a: 3 }; console.log(aa); // 3 console.log(bb); // 5
同時使用數(shù)組和對象解構(gòu)
在結(jié)構(gòu)中數(shù)組和對象可以一起使用
const props = [ { id: 1, name: 'Fizz' }, { id: 2, name: 'Buzz' }, { id: 3, name: 'FizzBuzz' }, ]; const [, , { name }] = props; console.log(name); // "FizzBuzz"
不完全解構(gòu)
let obj = {p: [{y: 'world'}] }; let {p: [{ y }, x ] } = obj;//不解構(gòu)x // x = undefined // y = 'world'
賦值剩余值給一個對象
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; // a = 10 // b = 20 // rest = {c: 30, d: 40}
嵌套對象解構(gòu)(可忽略解構(gòu))
let obj = {p: ['hello', {y: 'world'}] }; let {p: [x, { y }] } = obj; // x = 'hello' // y = 'world' let obj = {p: ['hello', {y: 'world'}] }; let {p: [x, { }] } = obj;//忽略y // x = 'hello'
注意事項(xiàng)
小心使用已聲明變量進(jìn)行解構(gòu)
錯誤示范:
let x; {x} = {x: 1};
JavaScript引擎會將{x}理解為一個代碼塊,從而產(chǎn)生語法錯誤,我們要避免將大括號寫在行首,避免JavaScript將其解釋為代碼塊
正確寫法:
let x; ({x} = {x: 1});
正確寫法將整個解構(gòu)賦值語句放在一個圓括號里,就可以正確執(zhí)行了
函數(shù)參數(shù)的解構(gòu)賦值
函數(shù)的參數(shù)也可以使用解構(gòu)賦值
function add([x, y]) { return x + y; } add([1, 2]);
上面代碼中,函數(shù)add的參數(shù)表面上是一個數(shù)組,但在傳參的時候,數(shù)組參數(shù)就被解構(gòu)為變量x和y了,對于函數(shù)內(nèi)部來說,就和直接傳入x和y是一樣的
解構(gòu)的用途
解構(gòu)賦值的用法很多
交換變量的值
let x = 1; let y = 2; [x, y] = [y, x];
上面的代碼交換x和y的值,這樣的寫法不僅簡潔而且易讀,語義清晰
從函數(shù)返回多個值
函數(shù)只能返回一個值,如果要返回多個值,我們只能將這些值放置數(shù)組或?qū)ο罄锓祷?,?dāng)我們有了解構(gòu)賦值后,從對象或數(shù)組里取出這些值猶如探囊取物
// 返回一個數(shù)組 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一個對象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();
提取JSON數(shù)據(jù)
解構(gòu)賦值對于提取JSON對象中的數(shù)據(jù),尤其有用
示例:
let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]
使用上面的代碼,我們就可以快速取出JSON數(shù)據(jù)中的值
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Flutter自適用高度PageView的實(shí)現(xiàn)方案
在?Flutter?中,PageView?是一個非常常用的組件,能夠?qū)崿F(xiàn)多個頁面的滑動切換,這篇文章主要介紹了Flutter-自適用高度PageView,需要的朋友可以參考下2024-08-08JavaScript中的作用域與閉包、原型與原型鏈、異步與單線程
JavaScript的三座大山指的是:作用域和閉包、原型和原型鏈、異步與單線程,這些概念在日常的開發(fā)工作中經(jīng)常被提及,并對我們理解和編寫高質(zhì)量的JavaScript代碼至關(guān)重要2024-02-02Bootstrap開發(fā)中Tab標(biāo)簽頁切換圖表顯示問題的解決方法
這篇文章主要給大家介紹了關(guān)于Bootstrap開發(fā)中Tab標(biāo)簽頁切換圖表顯示問題的解決方法,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07ES6使用新特性Proxy實(shí)現(xiàn)的數(shù)據(jù)綁定功能實(shí)例
這篇文章主要介紹了ES6使用新特性Proxy實(shí)現(xiàn)的數(shù)據(jù)綁定功能,結(jié)合具體實(shí)例形式分析了ES6使用Proxy實(shí)現(xiàn)數(shù)據(jù)綁定具體原理、操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05