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

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

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站建設(shè)、網(wǎng)站制作與策劃設(shè)計(jì),浮山網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:浮山等地區(qū)。浮山做網(wǎng)站價(jià)格咨詢:18982081108

<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é)果:

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

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é)果:

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

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

運(yùn)行結(jié)果:

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

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

更多關(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é)運(yùn)算用法總結(jié)》

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

新聞名稱:ES6Iterator接口和for...of循環(huán)用法分析
標(biāo)題鏈接:http://muchs.cn/article22/pjpojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計(jì)公司、、ChatGPT、做網(wǎng)站面包屑導(dǎo)航、品牌網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)