ES6知識(shí)點(diǎn)整理之?dāng)?shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用示例
本文實(shí)例講述了ES6知識(shí)點(diǎn)整理之?dāng)?shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用。分享給大家供大家參考,具體如下:
ES6 允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱(chēng)為解構(gòu)(Destructuring), 而數(shù)組的解構(gòu)賦值是從數(shù)組中提取值,按照對(duì)應(yīng)位置,對(duì)變量賦值。
ES6之前的賦值操作
var arr = [1,2,3]; var a = arr[0]; var b = arr[1]; var c = arr[2]; console.log(a,b,c); // 1 2 3
對(duì)一維數(shù)組的解構(gòu)賦值的應(yīng)用
var arr = [1,2,3]; var [a,b,c] = arr; console.log(a,b,c); // 1 2 3
對(duì)多維數(shù)組的解構(gòu)賦值的應(yīng)用
let arr = [22, [5,8], 11]; let [a,[b,c],d] = arr; console.log(a,b,c,d); // 22 5 8 11
解構(gòu)賦值用于變量的交換舉例
let x = 11; let y = 22; [y,x] = [x,y]; console.log(x,y); // 22 11
解構(gòu)賦值中不完全的解析示例
let arr = [22, [5,8], 11]; let [a,[b],c] = arr; console.log(a, b, c); // 22 5 11 let [m,[,n],o] = arr; console.log(m, n, o); // 22 8 11
不能被數(shù)組解析的值
let [m] = "";
console.log(m); // undefined;
let [x,y] = NaN; // NaN is not iterable. 不能被數(shù)組解析的值:NaN, undefined, null, {}
實(shí)現(xiàn)了iterator接口的類(lèi)型都可以被解析賦值
let [x,y] = new Set([22, 33]); console.log(x,y); // 22 33
自己創(chuàng)造一個(gè)實(shí)現(xiàn)iterator接口的對(duì)象進(jìn)行解構(gòu)賦值
class Group{
constructor() {
}
next() {
return {value:'Joh', done: false};
}
[Symbol.iterator]() {
return this;
}
}
let group = new Group();
let [x,y,z,m,n] = group;
console.log(x,y,z,m,n); // Joh Joh Joh Joh Joh 備注:這里如果類(lèi)中的next的done為true,那么全為undefined
… 運(yùn)算符 轉(zhuǎn)換成數(shù)組的解構(gòu)舉例
var [x,w, ...y] = [1,2,3,4,5,6]; console.log(x,w, y); // 1 2 [3,4,5,6]
解構(gòu)數(shù)組的默認(rèn)值
如果數(shù)組中的不是undefined,都會(huì)被成功解構(gòu), 不會(huì)被默認(rèn)值替代
let [x=15, y] = [undefined, 12]; console.log(x,y); // 15 12 let [m=12, n] = [null, 10]; console.log(m, n); // null 10
字符串解構(gòu)的處理
var [a,b,c] = 'hello'; console.log(a,b,c); // h e l
感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行結(jié)果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
基于Phantomjs生成PDF的實(shí)現(xiàn)方法
這篇文章主要介紹了基于Phantomjs生成PDF的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了Phantomjs結(jié)合nodejs生成pdf的操作步驟與相關(guān)技巧,需要的朋友可以參考下2016-11-11
javascript中幾個(gè)容易混淆的概念總結(jié)
這篇文章主要介紹了javascript中幾個(gè)容易混淆的概念總結(jié),都是平時(shí)經(jīng)常遇到的問(wèn)題,這里推薦給大家,有需要的小伙伴參考下吧。2015-04-04
JavaScript 提升運(yùn)行速度之循環(huán)篇 譯文
根據(jù)Nicholas 的說(shuō)法,有四種代碼 會(huì)拖慢腳本的運(yùn)行,并最終導(dǎo)致腳本失控。分別是次數(shù)過(guò)多的同步循環(huán)、龐大的函數(shù)體、不恰當(dāng)?shù)倪f歸和不合理的DOM 調(diào)用。2009-08-08
前端百度地圖添加點(diǎn)并跳轉(zhuǎn)到百度地圖進(jìn)行導(dǎo)航完整代碼
web開(kāi)發(fā)過(guò)程中經(jīng)常碰到需要調(diào)用百度地圖來(lái)視線(xiàn)定位導(dǎo)航的過(guò)程,許多技術(shù)博客上介紹的都是調(diào)用百度地圖的api,這篇文章主要給大家介紹了關(guān)于前端百度地圖添加點(diǎn)并跳轉(zhuǎn)到百度地圖進(jìn)行導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2024-07-07
百度判斷手機(jī)終端并自動(dòng)跳轉(zhuǎn)js代碼及使用實(shí)例
這篇文章主要介紹了百度判斷手機(jī)終端并自動(dòng)跳轉(zhuǎn)js代碼及使用實(shí)例,需要的朋友可以參考下2014-06-06
微信小程序?qū)崿F(xiàn)左側(cè)導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左側(cè)導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
js獲取form表單所有數(shù)據(jù)的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇js獲取form表單所有數(shù)據(jù)的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08

