js-ES6学习笔记-Iterator和for-of循环

1、遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

手写iterator

function iterator(arr){let index=0;return {next:function(){return index<arr.length?{value:arr[index++],done:false}:{value:undefined,done:true}}}}

2、Iterator的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

3、在ES6中，有些数据结构原生具备Iterator接口（比如数组），即不用任何处理，就可以被for...of循环遍历，有些就不行（比如对象）。原因在于，这些数据结构原生部署了Symbol.iterator属性（详见下文），另外一些数据结构没有。凡是部署了Symbol.iterator属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象。

4、在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构。

    const arr=[1,2,3];const set=new Set(['a','b','c']);const map=new Map([['a',1]]);const itArr=arr[Symbol.iterator]();const itSet=set[Symbol.iterator]();const itMap=map[Symbol.iterator]();console.log(itArr)console.log(itSet)console.log(itMap)

5、一个为对象添加Iterator接口的例子。

let obj = {data: [ 'hello', 'world' ],[Symbol.iterator]() {const self = this;let index = 0;return {next() {if (index < self.data.length) {return {value: self.data[index++],done: false};} else {return { value: undefined, done: true };}}};}
};

6、下面是类似数组的对象调用数组的Symbol.iterator方法的例子。

let iterable = {0: 'a',1: 'b',2: 'c',length: 3,[Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {console.log(item); // 'a', 'b', 'c'
}

注意，普通对象部署数组的Symbol.iterator方法，并无效果。

7、有一些场合会默认调用Iterator接口（即Symbol.iterator方法），除了for...of循环，还有几个别的场合。

解构赋值
扩展运算符(...)
yield*_yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。
由于数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用

8、字符串是一个类似数组的对象，也原生具有Iterator接口。

9、遍历器对象除了具有next方法，还可以具有return方法和throw方法。如果你自己写遍历器对象生成函数，那么next方法是必须部署的，return方法和throw方法是否部署是可选的。

10、for-of循环

const ofArr=[1,2,3,4];
for(let i of ofArr){console.log(i)
}
const m=new Map();
m.set('a',1).set('b',2).set('c',3);
for(let data of m){console.log(data)
}
for(let [key,value] of m){console.log(key,value)
}

转载于:https://www.cnblogs.com/mien-smil/p/ES6-Itarator.html

js-ES6学习笔记-Iterator和for-of循环相关推荐

JS高级学习笔记（6）- 事件循环
参考文章:深入理解JS引擎的执行机制 JavaScript 异步.栈.事件循环.任务队列我的笔记:ES系列之Promise async 和 await Event Loop 前提 js ...
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
ES6学习笔记（五）：轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
ES6学习笔记04：Set与Map
ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...
es6学习笔记-顶层对象_v1.0_byKL
es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象顶层对象,在浏览器环境指的是window对象,在Node指的是global对象. ES5之中,顶层 ...
# es6 学习笔记
es6 学习笔记 let变量 let和var用法级别一样 let不能重复声明,但是var可以 var varIns = "A"; var varIns = "B" ...
js/jquery学习笔记
javascript简介 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言. 不同于服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说Ja ...
es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
【带着canvas去流浪（11）】Three.js入门学习笔记
[摘要] three.js 入门学习笔记示例代码托管在:http://www.github.com/dashnowords/blogs 一. 资料推荐及建议 1.官方文档很详细,但是API部分单独 ...
ES6学习笔记03：变量的解构赋值
ES6学习笔记03:变量的解构赋值如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值其实,Python也 ...

js-ES6学习笔记-Iterator和for-of循环

js-ES6学习笔记-Iterator和for-of循环相关推荐

最新文章

热门文章