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