解析ES6中的解構(gòu)賦值(數(shù)組,對(duì)象,嵌套,默認(rèn)值)
解構(gòu)賦值
通過解構(gòu)賦值，可以快速?gòu)膶?duì)象或者數(shù)組中取出屬性或者數(shù)值。
1.解構(gòu)賦值
可以通過定位到數(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ì)象中無法找到匹配的值，則將默認(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定義過了，可以將age改名為ag
let{age:ag, err="定義err默認(rèn)值即使對(duì)象中沒有這個(gè)屬性，也可以獲取到這個(gè)默認(rèn)值字符串"} = obj
console.log(err)// '定義err默認(rèn)值即使對(duì)象中沒有這個(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寫法：將剩下的所有值賦值給一個(gè)變量
這種寫法只能適用于用在最后一位，無法用在開頭或者中間，否則會(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)文章
使用webpack3.0配置webpack-dev-server教程
這篇文章主要介紹了使用webpack3.0配置webpack-dev-server教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)
一轉(zhuǎn)眼已經(jīng)臘月了,相信小伙伴們一定想知道我們距離2023新年還有多少天,下面這篇文章主要給大家介紹了關(guān)于如何一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)的相關(guān)資料,需要的朋友可以參考下2022-12-12
javascript DIV實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)
這篇文章主要為大家詳細(xì)介紹了javascript DIV跟隨鼠標(biāo)移動(dòng)，有一個(gè)div跟隨鼠標(biāo)移動(dòng)的結(jié)果，有一連串跟隨鼠標(biāo)移動(dòng)的效果，感興趣的小伙伴們可以參考一下2016-02-02
本篇文章主要介紹了js清除input中type等于file的值域(示例代碼) 需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法,簡(jiǎn)單分析了javascript觀察者模式的原理、功能并結(jié)合實(shí)例形式給出了觀察者模式的實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
JS實(shí)現(xiàn)仿google、百度搜索框輸入信息智能提示的實(shí)現(xiàn)方法
這篇文章主要介紹了JS實(shí)現(xiàn)仿google、百度搜索框輸入信息智能提示的實(shí)現(xiàn)方法,實(shí)例分析了javascript實(shí)現(xiàn)智能提示功能的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JavaScript實(shí)現(xiàn)復(fù)制文本到剪切板功能的方法小結(jié)
這篇文章給大家介紹了三種JavaScript實(shí)現(xiàn)復(fù)制文本到剪切板的方法,Clipboard API,document.execCommand以及useClipboard這三個(gè)接口,文章通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò)問題解決
這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò),ES6模塊化提供了export命令和import?命令，對(duì)于模塊的導(dǎo)出和引入，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
使用JavaScript實(shí)現(xiàn)LRU緩存的代碼詳解
LRU（Least?Recently?Used）算法是一種廣泛應(yīng)用于內(nèi)存管理和緩存系統(tǒng)的策略,本文將介紹LRU算法的基本原理,并通過JavaScript實(shí)現(xiàn)案例,幫助讀者理解其在前端開發(fā)中的應(yīng)用場(chǎng)景,需要的朋友可以參考下2024-05-05
js 動(dòng)態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法
下面小編就為大家?guī)硪黄猨s 動(dòng)態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法。小編覺得聽不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07