本文實例講述了ES6 Iterator接口和for...of循環用法。分享給大家供大家參考,具體如下:
<script>// 數組已經幫我們內置這個Iterator接口let arr = ['hello','world'];let map = arr[Symbol.iterator](); // 數組直接調用iterator接口,返回一個對象mapconsole.log(map.next()); // {value: "hello", done: false} done:循環沒有下一步狀態:true沒有,false:有狀態,循環并沒有結束console.log(map.next()); // {value: "world", done: false}console.log(map.next()); // {value: undefined, done: true}</script>
運行結果:
for...of循環,就是不斷的調用Iterator接口。
object數據結構沒有實現Iterator接口。
自定義實現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>
運行結果:
<script>let arr = ['xixiaoxian','jamin'];for(let value of arr){ console.log(value); // xixiaoxian jamin}</script>
運行結果:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答