ES6基礎(chǔ)之解構(gòu)賦值(destructuring assignment)
我們經(jīng)??梢栽谄渌幊陶Z(yǔ)言(如GO語(yǔ)言)中看到多返回值這種特性,因?yàn)樵诤芏鄬?shí)際場(chǎng)景中,函數(shù)的返回值中,函數(shù)的返回值并不只有一個(gè)單一的值。ES6之前,并沒(méi)有可以直接使用語(yǔ)法來(lái)實(shí)現(xiàn)多返回值的特性。ES6終于出現(xiàn)了解構(gòu)賦值的語(yǔ)法糖來(lái)解決此類(lèi)問(wèn)題。
解構(gòu)賦值是一種表達(dá)式,允許您使用數(shù)組或?qū)ο?,將可迭代?duì)象的值或?qū)傩苑峙浣o變量。解構(gòu)賦值能讓我們用更簡(jiǎn)短的語(yǔ)法進(jìn)行多個(gè)變量的賦值,大大的減少了代碼量。解構(gòu)表達(dá)式有兩種:array和object。
今天的文章筆者將從以下方面進(jìn)行介紹:
- 使用數(shù)組表達(dá)式解構(gòu)賦值
- 常規(guī)用法
- 忽略數(shù)組中的某些值
- 使用展開(kāi)語(yǔ)法
- 默認(rèn)參數(shù)值
- 嵌套數(shù)組解構(gòu)
- 作為函數(shù)參數(shù)
- 使用對(duì)象表達(dá)式解構(gòu)賦值
- 常規(guī)用法
- 默認(rèn)參數(shù)值
- 嵌套對(duì)象
- 作為函數(shù)參數(shù)
- 其他
- 解構(gòu)對(duì)象的方法
- 獲取字符串長(zhǎng)度
- 拆分字符串
- 交換變量
- 遍歷Map結(jié)構(gòu)
- 加載指定模塊的方法
- 常用場(chǎng)景介紹
使用數(shù)組表達(dá)式解構(gòu)賦值
常規(guī)用法
如何將一個(gè)數(shù)組的值,賦值給多個(gè)變量?數(shù)組解構(gòu)語(yǔ)法能讓我們快速的迭代數(shù)組的元素,并賦值給多個(gè)變量。
E6之前,我們可以這種形式將數(shù)組的內(nèi)容賦值給多個(gè)變量:
var myArray = [1, 2, 3]; var a = myArray[0]; var b = myArray[1]; var c = myArray[2];
ES6后,我們可以通過(guò)數(shù)組解構(gòu)語(yǔ)法,在一行語(yǔ)句里完成上述操作。
let myArray = [1, 2, 3]; let a, b, c; [a, b, c] = myArray; //array destructuring assignment syntax
上述代碼中,[a, b, c]就是解構(gòu)表達(dá)式。在數(shù)組解構(gòu)語(yǔ)句的左側(cè)就是需要進(jìn)行賦值的多個(gè)變量,等號(hào)右側(cè)則是我們需要分配的值。
我們還可以讓上述代碼更短,你還可以這么寫(xiě),代碼如下:
let [a, b, c] = [1, 2, 3];
我們?cè)谕恍姓Z(yǔ)句中創(chuàng)建變量,而不是分別創(chuàng)建。是不是更清爽。
如果左邊的數(shù)值少于右邊數(shù)組的項(xiàng)數(shù),左邊變量的值只會(huì)和右邊數(shù)組的內(nèi)容一一對(duì)應(yīng),多于的內(nèi)容將會(huì)忽略。
忽略數(shù)組中某些值
如果只有兩個(gè)變量,我們數(shù)組內(nèi)容有三項(xiàng),我們想跳過(guò)數(shù)組中的第二項(xiàng),我們?nèi)绾问褂脭?shù)組解構(gòu)賦值呢?代碼如下:
let [a, , b] = [1, 2, 3]; console.log(a); console.log(b);
上述代碼我們使用, ,忽略數(shù)組中的第二項(xiàng),建議中間有空格,方便我們閱讀。
使用展開(kāi)語(yǔ)法
上篇文章 《【ES6基礎(chǔ)】展開(kāi)語(yǔ)法(Spread syntax)》 ,筆者介紹了展開(kāi)語(yǔ)法的幾個(gè)應(yīng)用場(chǎng)景,由于上篇文章沒(méi)介紹解構(gòu)賦值,所以在這里給大家介紹展開(kāi)語(yǔ)法在解構(gòu)賦值的應(yīng)用。如下段代碼所示:
let [a, ...b] = [1, 2, 3, 4, 5, 6]; console.log(a); console.log(Array.isArray(b)); console.log(b);”
上述代碼則會(huì)輸出:
1
true
2,3,4,5,6
上述代碼,你可以看到b變量被解構(gòu)賦值成數(shù)組,這里...就是我們上篇文章提到的剩余參數(shù)場(chǎng)景的運(yùn)用。
如果想跳過(guò)數(shù)組中的部分值,我們可以這么做,如下段代碼所示:
let [a, , ,...b] = [1, 2, 3, 4, 5, 6]; console.log(a); console.log(b);
上述代碼則會(huì)輸出:
1
4,5,6
這段代碼我們跳過(guò)了數(shù)組的第2項(xiàng)和第3項(xiàng)。
默認(rèn)參數(shù)值
筆者在 《【ES6基礎(chǔ)】默認(rèn)參數(shù)值》 給大家介紹了如何使用默認(rèn)參數(shù)值,在解構(gòu)賦值中,我們?nèi)绾卧O(shè)置變量的默認(rèn)值呢,如下段代碼所示:
let [a, b, c = 3] = [1, 2]; console.log(c); //Output "3”
嵌套數(shù)組
我們還可以從多維數(shù)組中提取值并分配給變量,如下段代碼所示:
let [a, b, [c, d]] = [1, 2, [3, 4]];
作為函數(shù)參數(shù)
我們還可以使用數(shù)組解構(gòu)表達(dá)式作為函數(shù)參數(shù)來(lái)提取可迭代數(shù)組的值,作為參數(shù)傳遞給函數(shù)參數(shù),如下段代碼所示:
function myFunction([a, b, c = 3]) { console.log(a, b, c); //Output "1 2 3" } myFunction([1, 2]);
筆者在《【ES6基礎(chǔ)】默認(rèn)參數(shù)值》 提及到我們可以傳遞undefined,指定某個(gè)具體的參數(shù)使用默認(rèn)值,我們可以使用結(jié)構(gòu)賦值為相關(guān)變量提供一組默認(rèn)值,并傳入undefined,如下段代碼所示:
function myFunction([a, b, c = 3] = [1, 2, 3]) { console.log(a, b, c); //Output "1 2 3" } myFunction(undefined);
在這里,我們將undefined作為參數(shù)傳遞,因此使用默認(rèn)數(shù)組[1,2,3]進(jìn)行提取賦值。
使用對(duì)象表達(dá)式解構(gòu)賦值
常規(guī)用法
對(duì)象解構(gòu)賦值將對(duì)象屬性的值賦給多個(gè)變量。ES6之前我們可以這樣把對(duì)象的屬性賦值給多個(gè)變量,如下段代碼所示:
var object = {name : "John", age : 23}; var name = object.name; var age = object.age;
在ES6里,我們可以使用對(duì)象解構(gòu)表達(dá)式,在單行里給多個(gè)變量賦值,如下段代碼所示:
let object = {name : "John", age : 23}; let name, age; ({name, age} = object); //object destructuring assignment syntax
對(duì)象解構(gòu)賦值的左側(cè)為解構(gòu)賦值表達(dá)式,右側(cè)為對(duì)應(yīng)要分配賦值的對(duì)象。解構(gòu)語(yǔ)句的兩邊千萬(wàn) 不要遺漏左右括號(hào)() ,否則會(huì)報(bào)錯(cuò)。
還有一點(diǎn)需要格外注意,解構(gòu)對(duì)象 變量的名稱(chēng)一定要和右邊對(duì)象的屬性名稱(chēng)保持一致 ,否則會(huì)提示變量的值為undefined。如果你想以其它的變量名進(jìn)行命名,你可以這么做,如下段代碼所示:
let object = {name : "John", age : 23}; let x, y; ({name: x, age: y} = object);
上述代碼x,y為對(duì)應(yīng)對(duì)象屬性的值John,23。如果你輸出name或age,編譯器則會(huì)提示ReferenceError: 變量 is not defined
我們可以讓代碼更短,如下段代碼所示:
let {name: x, age: y} = {name : "John", age : 23};
上述代碼由于聲明變量和解構(gòu)賦值在同一行,因此對(duì)象解構(gòu)語(yǔ)句兩邊無(wú)需左右括號(hào)()。
默認(rèn)參數(shù)值
在解構(gòu)對(duì)象針對(duì)未分配值的變量,我們可以為變量提供默認(rèn)值,如下段代碼所示:
let {a, b, c = 3} = {a: "1", b: "2"}; console.log(c); //Output "3”
在解構(gòu)對(duì)象時(shí)變量名支持表達(dá)式計(jì)算,如下段代碼所示:
let {["first"+"Name"]: x} = { firstName: "Eden" }; console.log(x); //Output "Eden”
嵌套對(duì)象
我們還可以從嵌套對(duì)象中提取屬性值,即對(duì)象中的對(duì)象。 如下段代碼所示:
let {name, otherInfo: {age}} = {name: "Eden", otherInfo: {age:23}}; console.log(name, age); //Eden 23
作為函數(shù)參數(shù)
就像數(shù)組解構(gòu)賦值一樣,我們也可以使用對(duì)象解構(gòu)賦值作為函數(shù)參數(shù),如下段代碼所示:
function myFunction({name = 'Eden', age = 23, profession ="Designer"} = {}){ console.log(name, age, profession); // Outputs "John 23 Designer" } myFunction({name: "John", age: 23});
在這里,我們傳遞一個(gè)空對(duì)象作為默認(rèn)參數(shù)值,如果將undefined作為函數(shù)參數(shù)傳遞,變量將使用默認(rèn)值。
其他
解構(gòu)對(duì)象的方法
比如結(jié)構(gòu)Math對(duì)象的方法,如下段代碼所示:
let {floor,pow}=Math;//把Math里的方法提取出來(lái)變成一個(gè)變量 let a=1.1; console.log(floor(a));//1 console.log(pow(2,3));//8
獲取字符串的長(zhǎng)度
var {length}='lxy'; console.log(length);//3
拆分字符串
var [a,b,c,d]='前端達(dá)人'; console.log(a,b,c,d) // 輸出:前 端 達(dá) 人
交換變量
let x = 1; let y = 2; [x, y] = [y, x];
遍歷Map結(jié)構(gòu)
var map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + " is " + value); }
加載指定模塊的方法
const { SourceMapConsumer, SourceNode } = require("source-map");
常用場(chǎng)景介紹
比如我們經(jīng)常與后端API接口做數(shù)據(jù)交互,我們需要處理返回的JSON對(duì)象,使用解構(gòu)方式大大簡(jiǎn)化了我們的代碼,如下段代碼所示:
let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]
小節(jié)
今天的內(nèi)容有些多,想必大家對(duì)解構(gòu)賦值有了全面的認(rèn)識(shí)吧,使用解構(gòu)賦值是不是很強(qiáng)大,大大簡(jiǎn)化了我們的代碼量,雖然優(yōu)勢(shì)蠻多,但是增加對(duì)代碼的理解難度,我們只有在實(shí)踐中不斷的運(yùn)用,來(lái)加深我們對(duì)解構(gòu)賦值的認(rèn)識(shí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解JS ES6變量的解構(gòu)賦值
- ES6中l(wèi)et、const的區(qū)別及變量的解構(gòu)賦值操作方法實(shí)例分析
- ES6數(shù)組與對(duì)象的解構(gòu)賦值詳解
- 詳解ES6 export default 和 import語(yǔ)句中的解構(gòu)賦值
- ES6的解構(gòu)賦值實(shí)例詳解
- ES6知識(shí)點(diǎn)整理之對(duì)象解構(gòu)賦值應(yīng)用示例
- ES6入門(mén)教程之變量的解構(gòu)賦值詳解
- ES6 對(duì)象的新功能與解構(gòu)賦值介紹
- ES6解構(gòu)賦值的功能與用途實(shí)例分析
- ES6解構(gòu)賦值實(shí)例詳解
- ES6 解構(gòu)賦值的原理及運(yùn)用
相關(guān)文章
JavaScript switch case 的用法實(shí)例[范圍]
JavaScript switch case 的用法實(shí)例,大家可以參考下。2009-09-09JS循環(huán)發(fā)送請(qǐng)求時(shí)控制請(qǐng)求并發(fā)數(shù)實(shí)例
這篇文章主要介紹了JS循環(huán)發(fā)送請(qǐng)求時(shí)控制請(qǐng)求并發(fā)數(shù)實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12JavaScript圣杯布局與雙飛翼布局實(shí)現(xiàn)案例詳解
這篇文章主要介紹了JavaScript圣杯布局與雙飛翼布局實(shí)現(xiàn)案例,這是前端面試中需要掌握的知識(shí)點(diǎn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08JavaScript 事件對(duì)象的實(shí)現(xiàn)
前我寫(xiě)過(guò)一篇關(guān)于JavaScript如何實(shí)現(xiàn)面向?qū)ο缶幊痰奈恼?。今天,我?xiě)這篇文章跟大家討論一下,如何實(shí)現(xiàn)事件。2009-07-07JS簡(jiǎn)單封裝的圖片無(wú)縫滾動(dòng)效果示例【測(cè)試可用】
這篇文章主要介紹了JS簡(jiǎn)單封裝的圖片無(wú)縫滾動(dòng)效果,結(jié)合完整實(shí)例形式分析了javascript針對(duì)圖片無(wú)縫滾動(dòng)功能實(shí)現(xiàn)的具體操作技巧,包括鼠標(biāo)事件響應(yīng)、事件函數(shù)及頁(yè)面元素屬性動(dòng)態(tài)變換等相關(guān)操作技巧,需要的朋友可以參考下2017-03-03