ES6 Iterator接口和for...of循環(huán)用法分析
本文實(shí)例講述了ES6 Iterator接口和for...of循環(huán)用法。分享給大家供大家參考，具體如下：
<script>
// 數(shù)組已經(jīng)幫我們內(nèi)置這個(gè)Iterator接口
let arr = ['hello','world'];
let map = arr[Symbol.iterator](); // 數(shù)組直接調(diào)用iterator接口，返回一個(gè)對(duì)象map
console.log(map.next()); // {value: "hello", done: false} done:循環(huán)沒有下一步狀態(tài)：true沒有，false:有狀態(tài)，循環(huán)并沒有結(jié)束
console.log(map.next()); // {value: "world", done: false}
console.log(map.next()); // {value: undefined, done: true}
</script>
運(yùn)行結(jié)果：
for...of循環(huán)，就是不斷的調(diào)用Iterator接口。
object數(shù)據(jù)結(jié)構(gòu)沒有實(shí)現(xiàn)Iterator接口。
自定義實(shí)現(xiàn)object的Iterator接口
<script>
let obj ={
start: [1,5,7],
end:[8,4,3],
[Symbol.iterator](){
let self = this;
let index = 0;
let arr = self.start.concat(self.end);
let len = arr.length;
return {
next(){
if(index<len){
return{
value:arr[index++],
done:false
}
}else{
return {
value:arr[index++],
done:true
}
}
}
}
}
}
for(let key of obj){ // for...of 背后用的就是iterator接口
console.log(key); // 1 5 7 8 4 3
}
</script>
運(yùn)行結(jié)果：
<script>
let arr = ['xixiaoxian','jamin'];
for(let value of arr){
console.log(value); // xixiaoxian jamin
}
</script>
運(yùn)行結(jié)果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《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)文章
幻宇的層模擬窗口效果－提供演示和下載...2007-01-01
本文通過(guò)具體的示例來(lái)給大家詳細(xì)解釋了下javascript的連續(xù)賦值問(wèn)題，十分的實(shí)用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了微信小程序wx.request攔截器詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了7款基于桌面和WEB的JavaScript調(diào)試工具，更有效地處理動(dòng)態(tài)類型使應(yīng)用程序更符合編碼標(biāo)準(zhǔn)，不管你是新學(xué)習(xí)javascript的菜鳥還是業(yè)界大神，都非常的有用。2014-12-12
js 實(shí)現(xiàn)打印網(wǎng)頁(yè)中定義的部分內(nèi)容的代碼
有時(shí)候頁(yè)面需要打印功能，如果再做一個(gè)頁(yè)面不利于優(yōu)化，兩個(gè)頁(yè)面內(nèi)容一樣了，所以可以用js實(shí)現(xiàn)內(nèi)容的打印不需要的就不打印。2010-04-04
JavaScript 產(chǎn)生不重復(fù)的隨機(jī)數(shù)三種實(shí)現(xiàn)思路
在 JavaScript 中，一般產(chǎn)生的隨機(jī)數(shù)會(huì)重復(fù)，但是有時(shí)我們需要不重復(fù)的隨機(jī)數(shù)，如何實(shí)現(xiàn)?本文給于解決方法，需要的朋友可以參考下2012-12-12
用按鈕控制iframe顯示的網(wǎng)頁(yè)實(shí)現(xiàn)方法
在iframe中顯示的網(wǎng)頁(yè)已經(jīng)是一件平凡無(wú)奇的事了，不過(guò)可能依然有很多的童鞋沒不知所措吧，沒關(guān)系，因?yàn)楸疚牡某霈F(xiàn)將會(huì)帶你脫離苦海，感性的朋友可以了解下啊，或許對(duì)你有所幫助2013-02-02
javascript dom 操作詳解 js加強(qiáng)
javascript dom 操作詳解 js加強(qiáng)操作實(shí)現(xiàn)代碼。2009-07-07
JavaScript實(shí)現(xiàn)給浮點(diǎn)數(shù)添加千分位逗號(hào)的多種方法
JavaScript 是一門強(qiáng)大的前端語(yǔ)言,在處理數(shù)值格式化時(shí)提供了多種方法,在開發(fā)過(guò)程中,我們經(jīng)常需要將大數(shù)字格式化,使其更具可讀性,例如,將 12000000.11 轉(zhuǎn)換為 12,000,000.11,本文將詳細(xì)介紹 JavaScript 中如何實(shí)現(xiàn)這種格式化,需要的朋友可以參考下2025-04-04
很多語(yǔ)言中都有塊級(jí)作用域，但JS沒有，它使用var聲明變量，以function來(lái)劃分作用域，大括號(hào)“{}” 卻限定不了var的作用域，下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)教程之塊級(jí)作用域的相關(guān)資料，需要的朋友可以參考下。2017-10-10