JavaScript

超轻量级php框架startmvc

ES6 Iterator接口和for...of循环用法分析

更新时间:2020-09-06 17:18:01 作者:startmvc
本文实例讲述了ES6Iterator接口和for...of循环用法。分享给大家供大家参考,具体如下:<scri

本文实例讲述了ES6 Iterator接口和for...of循环用法。分享给大家供大家参考,具体如下:


<script>
// 数组已经帮我们内置这个Iterator接口
let arr = ['hello','world'];
let map = arr[Symbol.iterator](); // 数组直接调用iterator接口,返回一个对象map
console.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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

ES6 Iterator接口 for...of循环