ES6 解構(gòu)賦值的原理及運(yùn)用
數(shù)組的解構(gòu)賦值
let [a, b, c] = [1, 2, 3]
同時(shí)定義多個(gè)變量,a匹配1、b匹配2、c匹配3
解構(gòu)賦值允許指定默認(rèn)值,即左邊變量指定默認(rèn)值,右邊沒(méi)有對(duì)應(yīng)的值,會(huì)優(yōu)先輸出默認(rèn)值。
let [x, y = 'b'] = ['a'] // x = 'a', y = 'b'
x匹配字符a,y默認(rèn)值為字符b,若右邊沒(méi)有對(duì)應(yīng)的,默認(rèn)輸出字符b。
對(duì)象的解構(gòu)賦值
解構(gòu)不僅可以用于數(shù)組,還可以用于對(duì)象,對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同,數(shù)組的元素是按照次序排列的,變量的取值由它的位置決定的;而對(duì)象的屬性沒(méi)有次序,變量必須與屬性同名才能取到正確的值。
let { name, age, hobbies: [one, two] } = { name: 'shiramashiro', age: 21, hobbies: ['騎行', '動(dòng)漫'] }
比如我取age的值,改成取abc的值,由于沒(méi)有和對(duì)象中的屬性名對(duì)應(yīng),無(wú)法對(duì)應(yīng)賦值,所以是undefined。
解構(gòu)賦值的運(yùn)用
交換變量的值
正常想到交換變量的值的方式
let x = 1, y = 2, temp = 0 temp = x // x = 1 = temp x = y // y = 2 = x y = temp // temp = 1 = y console.log('x => ', x) console.log('y => ', y)
利用解構(gòu)賦值交換變量
let x = 1; let y = 2; [x, y] = [y, x]; console.log('x => ', x) console.log('y => ', y)
這樣交換變量x和y的值,寫(xiě)法不僅簡(jiǎn)潔,而且易讀,語(yǔ)義非常清晰。
從函數(shù)返回多個(gè)值
函數(shù)只能返回一個(gè)值,如果要返回多個(gè)值,只能將它們放在數(shù)組或?qū)ο罄锓祷?,有了解?gòu)賦值,就變得更加方便了。
提取hobbies數(shù)組中的第二個(gè)值
function getArray() { return { name: 'kongsam', age: 21, hobbies: ['騎行', '動(dòng)漫', '羽毛球'] } } console.log(getArray().name + '喜歡' + getArray().hobbies[1]) // 動(dòng)漫
利用解構(gòu)賦值獲取hobbies數(shù)組中的第二個(gè)值
let {name, age, hobbies} = getArray() console.log(name + '喜歡' + hobbies[1]) // 動(dòng)漫
遍歷Map結(jié)構(gòu)
對(duì)于for...of循環(huán)遍歷來(lái)說(shuō),遍歷出來(lái)的值是一個(gè)數(shù)組,而解構(gòu)賦值對(duì)于數(shù)組是可以“模式匹配”的,這很快速地取出鍵-值。
for...of循環(huán)遍歷配合解構(gòu)賦值獲取鍵-值就非常方便。
for (let [key, value] of map) { console.log("key => ", key) console.log("value => ", value) }
函數(shù)參數(shù)的解構(gòu)賦值
// let { x = 10, y = 5 } = {} function f({ x = 10, y = 5 } = {}) { return [x, y] } console.log(f({ x: 100, y: 50 })) // [100, 50] console.log(f({ x: 3 })) // [3, 5] console.log(f({})) // [10, 5] console.log(f()) // [10, 5]
可以給函數(shù)的參數(shù)中傳入對(duì)象,并且可以對(duì)傳入的對(duì)象設(shè)置默認(rèn)值。它將被解構(gòu)到函數(shù)內(nèi)部里進(jìn)行使用,你也可以這樣理解。
function f(x = 10, y = 5) { return [x, y] } console.log(f(100, 50)) // [100, 50] console.log(f(3)) // [3, 5] console.log(f()) // [10, 5]
上面的寫(xiě)法不一樣,也會(huì)導(dǎo)致結(jié)果不一樣
function f({ x, y } = { x: 10, y: 5 }) { return [x, y] } console.log(f({ x: 100, y: 50 })) // [100, 50] console.log(f({ x: 3 })) // [3, undefined] console.log(f({})) // [undefined, undefined] console.log(f()) // [10, 5]
第三和第四個(gè)打印會(huì)有undefined,這是因?yàn)閭魅氲膞或y不對(duì)應(yīng)對(duì)象屬性中的值,匹配不成功所導(dǎo)致的。
以上就是ES6 解構(gòu)賦值的原理及運(yùn)用的詳細(xì)內(nèi)容,更多關(guān)于ES6 解構(gòu)賦值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
javascript設(shè)計(jì)模式 – 簡(jiǎn)單工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 簡(jiǎn)單工廠模式,結(jié)合實(shí)例形式分析了javascript簡(jiǎn)單工廠模式基本概念、原理、定義、應(yīng)用場(chǎng)景及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04js 用CreateElement動(dòng)態(tài)創(chuàng)建標(biāo)簽示例
用CreateElement動(dòng)態(tài)創(chuàng)建標(biāo)簽,主要是html中常用的一些標(biāo)簽,在本文有詳細(xì)的示例,喜歡的朋友可以參考下2013-11-11快速查找數(shù)組中的某個(gè)元素并返回下標(biāo)示例
最近在寫(xiě)jquery的combobox插件時(shí)遇到效率問(wèn)題,再加上jquery選擇器的類帥選,導(dǎo)致效率很慢,采用以下方式二,可以輕松解決此問(wèn)題2013-09-09JavaScript仿小米商城官網(wǎng)完整頁(yè)面實(shí)現(xiàn)流程
只能看不能玩的靜態(tài)頁(yè)面早就看夠了吧,今天我們來(lái)做一個(gè)相對(duì)完整的動(dòng)態(tài)網(wǎng)站,用Javascript來(lái)實(shí)現(xiàn)模仿小米的官網(wǎng)商城,感興趣的朋友快來(lái)看看吧2021-11-11自己實(shí)現(xiàn)string的substring方法 人民幣小寫(xiě)轉(zhuǎn)大寫(xiě),數(shù)字反轉(zhuǎn),正則優(yōu)化
這是最近碰到的幾個(gè)題目,簡(jiǎn)單地寫(xiě)一下我自己的方案,在此分享給大家,也希望能看到大家的方案2012-09-09gulp教程_從入門(mén)到項(xiàng)目中快速上手使用方法
下面小編就為大家?guī)?lái)一篇gulp教程_從入門(mén)到項(xiàng)目中快速上手使用方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09微信小程序之下拉列表實(shí)現(xiàn)方法解析(附完整源碼)
這篇文章主要介紹了微信小程序之下拉列表實(shí)現(xiàn)方法解析(附完整源碼),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08