快捷導(dǎo)航

ES6 Iterator接口和for...of循環(huán)用法分析

更新時間：2019年07月31日 09:49:57 作者：xiaxiaoxian

這篇文章主要介紹了ES6 Iterator接口和for...of循環(huán)用法,結(jié)合實例形式分析了Iterator接口和for...of循環(huán)相關(guān)使用技巧,需要的朋友可以參考下

本文實例講述了ES6 Iterator接口和for...of循環(huán)用法。分享給大家供大家參考，具體如下：

<script>
// 數(shù)組已經(jīng)幫我們內(nèi)置這個Iterator接口
let arr = ['hello','world'];
let map = arr[Symbol.iterator](); // 數(shù)組直接調(diào)用iterator接口，返回一個對象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>

運行結(jié)果：

for...of循環(huán)，就是不斷的調(diào)用Iterator接口。

object數(shù)據(jù)結(jié)構(gòu)沒有實現(xiàn)Iterator接口。

自定義實現(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>

運行結(jié)果：

<script>
let arr = ['xixiaoxian','jamin'];
for(let value of arr){
  console.log(value); // xixiaoxian  jamin
}
</script>

運行結(jié)果：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

幻宇的層模擬窗口效果－提供演示和下載
幻宇的層模擬窗口效果－提供演示和下載...
2007-01-01
javascript連續(xù)賦值問題
本文通過具體的示例來給大家詳細(xì)解釋了下javascript的連續(xù)賦值問題，十分的實用，有需要的小伙伴可以參考下。
2015-07-07
微信小程序wx.request攔截器使用詳解
這篇文章主要介紹了微信小程序wx.request攔截器詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-07-07
JavaScript調(diào)試工具匯總
這篇文章主要介紹了7款基于桌面和WEB的JavaScript調(diào)試工具，更有效地處理動態(tài)類型使應(yīng)用程序更符合編碼標(biāo)準(zhǔn)，不管你是新學(xué)習(xí)javascript的菜鳥還是業(yè)界大神，都非常的有用。
2014-12-12
js 實現(xiàn)打印網(wǎng)頁中定義的部分內(nèi)容的代碼
有時候頁面需要打印功能，如果再做一個頁面不利于優(yōu)化，兩個頁面內(nèi)容一樣了，所以可以用js實現(xiàn)內(nèi)容的打印不需要的就不打印。
2010-04-04
JavaScript 產(chǎn)生不重復(fù)的隨機數(shù)三種實現(xiàn)思路
在 JavaScript 中，一般產(chǎn)生的隨機數(shù)會重復(fù)，但是有時我們需要不重復(fù)的隨機數(shù)，如何實現(xiàn)?本文給于解決方法，需要的朋友可以參考下
2012-12-12
用按鈕控制iframe顯示的網(wǎng)頁實現(xiàn)方法
在iframe中顯示的網(wǎng)頁已經(jīng)是一件平凡無奇的事了，不過可能依然有很多的童鞋沒不知所措吧，沒關(guān)系，因為本文的出現(xiàn)將會帶你脫離苦海，感性的朋友可以了解下啊，或許對你有所幫助
2013-02-02
javascript dom 操作詳解 js加強
javascript dom 操作詳解 js加強操作實現(xiàn)代碼。
2009-07-07
JavaScript實現(xiàn)給浮點數(shù)添加千分位逗號的多種方法
JavaScript 是一門強大的前端語言,在處理數(shù)值格式化時提供了多種方法,在開發(fā)過程中,我們經(jīng)常需要將大數(shù)字格式化,使其更具可讀性,例如,將 12000000.11 轉(zhuǎn)換為 12,000,000.11,本文將詳細(xì)介紹 JavaScript 中如何實現(xiàn)這種格式化,需要的朋友可以參考下
2025-04-04
ES6學(xué)習(xí)教程之塊級作用域詳解
很多語言中都有塊級作用域，但JS沒有，它使用var聲明變量，以function來劃分作用域，大括號“{}” 卻限定不了var的作用域，下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)教程之塊級作用域的相關(guān)資料，需要的朋友可以參考下。
2017-10-10