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è)對象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測試上述代碼運(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é)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
Javascript刷新頁面實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-11-11
Echats圖表大屏自適應(yīng)的實(shí)現(xiàn)方法
很多時(shí)候我們需要用圖表來制作我們統(tǒng)計(jì)的數(shù)據(jù)直觀的分析,所以我們可以用Echarts來制作圖表,這篇文章主要給大家介紹了關(guān)于Echats圖表大屏自適應(yīng)的實(shí)現(xiàn)方法,需要的朋友可以參考下2021-10-10
微信小程序左右滑動(dòng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序左右滑動(dòng)的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-12-12
分享50個(gè)超級有用的JavaScript單行代碼(推薦!)
JavaScript是一種腳本語言,是直接在瀏覽器運(yùn)行的,下面這篇文章主要給大家介紹了50個(gè)超級有用的JavaScript單行代碼的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
HTML使用js給input標(biāo)簽增加disabled屬性的方法
最近項(xiàng)目上提出一個(gè)經(jīng)常遇到的需求,點(diǎn)擊新增時(shí)input可輸入,點(diǎn)擊編輯時(shí)input置灰,下面這篇文章主要給大家介紹了關(guān)于HTML使用js給input標(biāo)簽增加disabled屬性的相關(guān)資料,需要的朋友可以參考下2024-06-06
js中使用DOM復(fù)制（克?。┲付ü?jié)點(diǎn)名數(shù)據(jù)到新的XML文件中的代碼
使用DOM復(fù)制（克?。┲付ü?jié)點(diǎn)名數(shù)據(jù)到新的XML文件中 ,用到三個(gè)類的相關(guān)知識點(diǎn) ： DOMDocument - DOMNodeList - DOMNode2011-07-07
JavaScript對象中的可擴(kuò)展性指的是：是否可以給對象添加新屬性。所有的內(nèi)置對象和自定義對象顯示的都是可擴(kuò)展的，對于宿主對象，則由JavaScript引擎決定2022-11-11
左鍵復(fù)制對于所有人來說有好有壞，例如原創(chuàng)內(nèi)容就不想被別人復(fù)制，接下來介紹一種方法，有需要的朋友可以參考下2013-01-01
js觸發(fā)asp.net的Button的Onclick事件應(yīng)用
由于asp.net采用的是事件驅(qū)動(dòng)模式，所以默認(rèn)用戶按回車并沒有觸發(fā)按鈕的onclick事件。用戶按回車也不是沒有提交表單，通過httpwath可以看到，實(shí)際上頁面表單是提交到了form下的action頁面，只不過沒有觸發(fā)onclick事件而已,感興趣的朋友可以了解下，或許對你有所幫助2013-02-02
超漂亮的Bootstrap 富文本編輯器summernote
Summernote 是一個(gè)簡單，靈活，所見即所得（WYSIWYG）的編輯器，基于 jQuery 和 Bootstrap 構(gòu)建。對bootstrap 文本編輯器相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-04-04