Javascript 解構(gòu)賦值詳情
1、數(shù)組解構(gòu)
let [a, b, c] = [1,2,3] console.log(a, b, c) // 1 2 3
除了數(shù)組，任何可迭代的對(duì)象都支持被解構(gòu)， 例如字符串
let [first, second] = "he" console.log(first, second) // h e
2、對(duì)象解構(gòu)
賦值右側(cè)是對(duì)象，左側(cè)是包含在花括號(hào)內(nèi)逗號(hào)隔開(kāi)的變量名
let {a, b, c} = {a:1, b:2, c:3}
console.log(a,b,c) // 1 2 3
左側(cè)的變量名需要和對(duì)象中的屬性名相同，如果對(duì)應(yīng)不上的話，左側(cè)的變量名將被賦值為undefined。例如：
let {a,b, d} = {a:1, b:2, c:3}
console.log(a,b,d) // 1 2 undefined
如果變量名與屬性名不一樣，可以用冒號(hào)分隔符將屬性名賦值給變量名
例如:
let {a,b, c:d} = {a:1, b:2, c:3}
console.log(a,b,d) // 1 2 3
3、不完全解構(gòu)
解構(gòu)賦值左側(cè)變量個(gè)數(shù)可以不等于右側(cè)數(shù)組中元素的個(gè)數(shù)
(1)左側(cè)多余的變量會(huì)被設(shè)置為undefined，
let [a, b, c] = [1, 2] console.log(a, b, c) // 1 2 undefined
(2)右側(cè)多余的值將被直接忽略
let [a, b, c] = [1, 2, 3, 4] console.log(a, b, c) // 1 2 3
(3)左側(cè)可以用逗號(hào)跳過(guò)某些值
let [a, , c] = [1, 2, 3, 4] console.log(a, c) // 1 3
(4)右側(cè)多余的值可以通過(guò)...收集到一個(gè)變量中
let [a, b, ...c] = [1, 2, 3, 4] console.log(a, b, c) // 1 2 [3, 4]
4、用解構(gòu)賦值實(shí)現(xiàn)變量交換
let a = 1, b=2; [a, b] = [b, a] console.log(a) //2 console.log(b) //1
到此這篇關(guān)于Javascript 解構(gòu)賦值詳情的文章就介紹到這了,更多相關(guān)Javascript 解構(gòu)賦值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序 ecshop地址三級(jí)聯(lián)動(dòng)實(shí)現(xiàn)實(shí)例代碼
這篇文章主要介紹了微信小程序 ecshop地址3級(jí)聯(lián)動(dòng)實(shí)現(xiàn)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了TypeScript 枚舉類型，TypeScript 在 ES 原有類型基礎(chǔ)上加入枚舉類型，使得在 TypeScript 中也可以給一組數(shù)值賦予名字，這樣對(duì)開(kāi)發(fā)者比較友好，可以理解枚舉就是一個(gè)字典，文章內(nèi)容圍繞TypeScript 枚舉類型展開(kāi)內(nèi)容,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了前端的狀態(tài)管理，續(xù)上篇文章內(nèi)容，今天將從 Redux 入手逐漸拓展,需要的小伙伴可以參考一下喲2021-10-10
這篇文章主要介紹了JavaScript事件委托原理,?事件委托也稱為事件代理。就是利用事件冒泡，把子元素的事件都綁定到父元素上。如果子元素阻止了事件冒泡，那么委托就無(wú)法實(shí)現(xiàn),下面我們一起來(lái)學(xué)習(xí)文章的具體詳細(xì)內(nèi)容吧2021-12-12
JS中 querySelector 與 getElementById 方法區(qū)別
這篇文章主要介紹了JavaScript中 querySelector 與 getElementById 方法與區(qū)別，圍繞querySelector 與 getElementById 的相關(guān)資料展開(kāi)文章內(nèi)容,需要的朋友可以參考一下2021-10-10
JavaScript編程中實(shí)現(xiàn)對(duì)象封裝特性的實(shí)例講解
JavaScript可以在一定程度上以面向?qū)ο蠓绞竭M(jìn)行編程,而封裝是面向?qū)ο笾械囊粋€(gè)重要特性,本文就來(lái)分享阮一峰老師對(duì)JavaScript編程中實(shí)現(xiàn)對(duì)象封裝特性的實(shí)例講解2016-06-06
JavaScript實(shí)現(xiàn)優(yōu)先級(jí)隊(duì)列
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)優(yōu)先級(jí)隊(duì)列，在計(jì)算機(jī)里，隊(duì)列是一種先進(jìn)先出的數(shù)據(jù)結(jié)構(gòu)。就跟我們平時(shí)排隊(duì)一樣，先到的排在前面，前面的優(yōu)先處理，下面我們就來(lái)看看在JavaScript里面的優(yōu)先隊(duì)列又當(dāng)如何2021-12-12
這篇文章主要為大家介紹了Ant Design 的Bug修復(fù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Web應(yīng)用開(kāi)發(fā)TypeScript使用詳解
這篇文章主要為大家介紹了Web應(yīng)用開(kāi)發(fā)TypeScript的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
本文將詳細(xì)介紹JS編程風(fēng)格的幾個(gè)要點(diǎn)與JS代碼優(yōu)化的幾點(diǎn)建議,需要的朋友可以參考下2020-02-02