解析ES6中的解構(gòu)賦值(數(shù)組,對(duì)象,嵌套,默認(rèn)值)
更新時(shí)間：2022年11月14日 09:43:30 作者：WaterRec
解構(gòu)賦值是一種特殊的語(yǔ)法，它使我們可以將數(shù)組或?qū)ο蟆安鸢敝烈幌盗凶兞恐?，因?yàn)橛袝r(shí)這樣更方便，接下來(lái)通過(guò)本文給大家介紹ES6中的解構(gòu)賦值(數(shù)組，對(duì)象，嵌套，默認(rèn)值),需要的朋友可以參考下
解構(gòu)賦值
通過(guò)解構(gòu)賦值，可以快速?gòu)膶?duì)象或者數(shù)組中取出屬性或者數(shù)值。
1.解構(gòu)賦值
可以通過(guò)定位到數(shù)組或者對(duì)象的某一個(gè)位置，將值直接賦給一個(gè)或多個(gè)變量。
const arr = ['dasha', 'ersha', 'gangdan'] let [a, b, c] = arr //a='dasha' b='ersha' c='gangdan' //假如需要交換ab的值 只需要 [a, b] = [b, a]
2.解構(gòu)賦值嵌套
復(fù)雜的對(duì)象或者數(shù)組也可以使用這種方法。
const arr = [1, [2,3,4], 5] let [a, [b,,d], c] = arr console.log(a) // 1 console.log(b) // 2 console.log(d) // 4
3.解構(gòu)賦值的默認(rèn)值
給變量先設(shè)置好默認(rèn)值，當(dāng)數(shù)組或者對(duì)象中無(wú)法找到匹配的值，則將默認(rèn)值賦給變量。
let [a=1] = [100] // a=100 let [b=1] = [] // b=1
4.解構(gòu)賦值用在對(duì)象上時(shí)候，需要用鍵的方式
const obj = {
name:'shabi',
age:12,
}
let{age} = obj
// 為了防止age在上面被let定義過(guò)了，可以將age改名為ag
let{age:ag, err="定義err默認(rèn)值即使對(duì)象中沒(méi)有這個(gè)屬性，也可以獲取到這個(gè)默認(rèn)值字符串"} = obj
console.log(err)// '定義err默認(rèn)值即使對(duì)象中沒(méi)有這個(gè)屬性，也可以獲取到這個(gè)默認(rèn)值字符串'
5.解析一個(gè)從函數(shù)返回的數(shù)組
獲取返回值進(jìn)行解構(gòu)賦值，更加方便
function test(){
return [1,2,3]
}
let [x,y] = test()
console.log(x) //x = 1
console.log(y) //y = 2
6.rest寫(xiě)法：將剩下的所有值賦值給一個(gè)變量
這種寫(xiě)法只能適用于用在最后一位，無(wú)法用在開(kāi)頭或者中間，否則會(huì)報(bào)錯(cuò)。
let [a,...rest] = [1, 2, 3]; console.log(a); // 1 console.log(rest); // [2, 3]
到此這篇關(guān)于ES6中的解構(gòu)賦值（數(shù)組，對(duì)象，嵌套，默認(rèn)值）的文章就介紹到這了,更多相關(guān)ES6解構(gòu)賦值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript中執(zhí)行上下文和執(zhí)行棧
這篇文章主要介紹了JavaScript中執(zhí)行上下文和執(zhí)行棧，執(zhí)行上下文是評(píng)估和執(zhí)行JavaScript代碼的環(huán)境的抽象概念，更多相關(guān)介紹，感興趣的朋友可以參考一下2022-09-09
ECharts是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù),涵蓋各行業(yè)圖表,滿足各種需求,下面這篇文章主要給大家介紹了關(guān)于echarts地圖輪播高亮的相關(guān)資料,需要的朋友可以參考下2021-08-08
本文為大家詳細(xì)介紹下使用JS添加千分位以及去掉千分位的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
我們先來(lái)看一個(gè)JS中常見(jiàn)的JS對(duì)象序列化成JSON字符串的問(wèn)題，請(qǐng)問(wèn)，以下JS對(duì)象通過(guò)JSON.stringify后的字符串是怎樣的2017-04-04
這篇文章主要為大家詳細(xì)介紹了使用Javascript簡(jiǎn)單計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
ThinkJS 是一款面向未來(lái)開(kāi)發(fā)的 Node.js 框架，整合了大量的項(xiàng)目最佳實(shí)踐，讓企業(yè)級(jí)開(kāi)發(fā)變得如此簡(jiǎn)單、高效。接下來(lái)通過(guò)本文給大家分享thinkjs 文件上傳功能，需要的朋友參考下吧2017-11-11
Bootstrap 模態(tài)框多次顯示后臺(tái)提交多次BUG的解決方法
本篇文章主要介紹了Bootstrap 模態(tài)框多次顯示后臺(tái)提交多次BUG的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
javascript點(diǎn)擊按鈕實(shí)現(xiàn)隱藏顯示切換效果
這篇文章主要介紹了javascript點(diǎn)擊按鈕實(shí)現(xiàn)隱藏顯示切換效果，以一個(gè)完整的實(shí)例為大家分析了js點(diǎn)擊按鈕實(shí)現(xiàn)隱藏顯示切換的功能，感興趣的小伙伴們可以參考一下2016-02-02
webpack5?import動(dòng)態(tài)導(dǎo)入實(shí)現(xiàn)按需加載并給文件統(tǒng)一命名的配置方法
這篇文章主要介紹了webpack5?import動(dòng)態(tài)導(dǎo)入實(shí)現(xiàn)按需加載并給文件統(tǒng)一命名的配置，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了微信小程序激勵(lì)式視頻廣告組件使用，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12