ES6新特性四：變量的解構(gòu)賦值實(shí)例
更新時(shí)間：2017年04月21日 09:22:50 作者：Dason_yu
這篇文章主要介紹了ES6新特性之變量的解構(gòu)賦值操作,結(jié)合實(shí)例形式分析了ES6針對(duì)數(shù)組、對(duì)象等的解構(gòu)賦值操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了ES6新特性之變量的解構(gòu)賦值。分享給大家供大家參考，具體如下：
1. 數(shù)組的解構(gòu)賦值
//① 可以從數(shù)組中提取值，按照對(duì)應(yīng)位置，對(duì)變量賦值 var [a, b] = [1, 2]; //a = 1;b = 2 //② 下面是一些使用嵌套數(shù)組進(jìn)行解構(gòu) var [d, [[c], f]] = [1, [[2], 3]]; var [,,third] = ["foo", "bar", "baz"];//third = "baz" var [head, ...tail] = [1, 2, 3, 4];//head = 1;tail = [2, 3, 4] //③不完全結(jié)構(gòu) var [x, y] = [1,2,6]; //x = 1;y = 2 //④ 解構(gòu)賦值允許指定默認(rèn)值 var [foo = true] = []; //foo = true var [x, y='b'] = ['a'] // x='a', y='b' var [x, y='b'] = ['a', undefined] // x='a', y='b' //⑤ 解構(gòu)不成功，變量的值就等于undefined var [a6, a7] = [1]; //a7 = undefined
2. 對(duì)Set 的解構(gòu)賦值
[a, b, c] = new Set(["a", "b", "c"]) console.log(a) // "a"
3. 對(duì)象的解構(gòu)賦值
//對(duì)象的屬性沒(méi)有次序，變量必須與屬性同名，才能取到正確的值
var { x, y } = { x: "aaa", y: "bbb" };//x = aaa, y = bbbb
var { c } = { a: "aaa", b: "bbb" }; // c = undefined
//嚴(yán)格遵守變量名與屬性同名
var { d: e } = { d: "aaa", f: "bbb" }; //e = aaa
//指定默認(rèn)值
var {x, y = 5} = {x: 1};// x = 1,y = 5
4. 用于遍歷 Map
var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
//獲取鍵值對(duì)
for (let [key,value] of map) {
console.log(key + " is " + value);
}
// 獲取鍵名
for (let [key] of map) {
console.log(key);
}
// 獲取值
for (let [,value] of map) {
console.log(value);
}
希望本文所述對(duì)大家ECMAScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript保留兩位小數(shù)的實(shí)現(xiàn)方法你了解嗎
這篇文章主要為大家介紹了javascript保留兩位小數(shù)的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
以下map.js和map-util.js都是自定義的map，任選其一就可以。你可以用它來(lái)像java里new Map()和put()、remove()、get()等方法2017-11-11
JS組件封裝之監(jiān)聽(tīng)localStorage的變化
這篇文章主要介紹了JS組件封裝之監(jiān)聽(tīng)localStorage的變化,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
js+html+css實(shí)現(xiàn)簡(jiǎn)單電子時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了js+html+css實(shí)現(xiàn)簡(jiǎn)單電子時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
bootstrap的3級(jí)菜單樣式,支持母版頁(yè)保留打開(kāi)狀態(tài)實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇bootstrap的3級(jí)菜單樣式,支持母版頁(yè)保留打開(kāi)狀態(tài)實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
behaviors是用于組件間代碼共享的特性, 類似一些編程語(yǔ)言中的'mixin'或者'traits',這篇文章主要介紹了微信小程序中的behaviors,需要的朋友可以參考下2024-08-08
JavaScript+canvas實(shí)現(xiàn)五子棋游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript+canvas實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
如何解決前端筆記本屏幕顯示縮放比例125%,150%對(duì)頁(yè)面布局的影響
如果要完整解決該縮放和布局問(wèn)題,仍需適配,下面這篇文章主要給大家介紹了關(guān)于如何解決前端筆記本屏幕顯示縮放比例125%,150%對(duì)頁(yè)面布局的影響,需要的朋友可以參考下2022-11-11
首先是通過(guò)同步策略來(lái)實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離，接著是通過(guò)異步策略來(lái)實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離2012-08-08
JS 實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單的幾種方式
這篇文章主要介紹了JS 實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單的幾種方式的相關(guān)資料,這里提供了三種方式，和實(shí)例代碼，需要的朋友可以參考下2016-10-10