ES6迭代器
目录
- ES6迭代器
- 迭代器（Iterator）
- 基本语法
- 应用
- for…of循环
- for…of与for…in的区别
迭代器（Iterator）
什么是迭代？
Iterator迭代器从一个数据集合中按照一定的顺序，不断的取出数据的过程
Iterator 的作用：
- 为各种数据结构， 提供一个统一的接口
- 使得数据结构的成员能够按某种次序排列
- 迭代强调是依次取出，不能确定取出的有多少，也不能保证把数据全部取完
迭代和遍历的区别？
迭代强调的依次取出，不能确定可以取出的值有多少，也不能保证去吧数据全部取完
遍历必须保证数据的长度，循环不断的全部取出，针对于数据量过大的情况下使用遍历需要时间过长
基本语法
迭代器是一个特殊的对象，每个迭代器对象都有next()方法，该方法有两个属性：
- value：返回查询的值
- done：判断是否迭代结束，返回值为布尔值
接下来封装一个迭代器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20function createIterator(item){ let i = 0 return { next(){ var result = { value : item[i], done : i >= item.length } i ++; return result; } } } // 创建一个迭代器 var a = createIterator([1,2,3]); console.log(a.next()); // {done: false, value: 1} console.log(a.next()); // {done: false, value: 2} console.log(a.next()); // {done: false, value: 3} console.log(a.next()); // {done: true, value: undefined}
分析Iterator的遍历过程：
- 创建一个对象，指向当前数据结构的起始位置
- 随后通过 next 方法进行向下迭代指向下一个位置， next 方法会返回当前位置的对象,
对象包含了 value 和 done 两个属性， value 是当前属性的值， done 用于判断是否遍历结束 - 当done为true时，迭代结束
应用
在es6中,如果对象具有知名符号的属性 Symbol.iterator,则表示对象可以迭代
ES6 的有些数据结构原生具备 Iterator 接口（比如数组），即不用任何处理，就可以被for…of循环遍历：
1
2
3
4
5
6
7
8const arr = [464,878,88,22,45,4,8,7]; const iterator = arr[Symbol.iterator](); iterator.next() //{value: 464, done: false} iterator.next() //{value: 878, done: false} iterator.next() //{value: 88, done: false} ...
自定义可迭代对象：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28const obj = { a : 1, b : 2, [Symbol.iterator](){ // for of肯定会走进symbol.iterator函数中的 const keys = Object.keys(this) let i = 0; return { next:()=>{ const propName = keys[i]; const propValue = this[propName]; const result = { value : { propName, propValue, name : "name" }, done : i >= keys.length } i++; return result } } } } for(const item of obj){ console.log(item) }
调用Iterator接口的场合:
-
解构赋值：对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法
-
扩展运算符：扩展运算符（…）也会调用默认的 Iterator 接口
-
yield：yield后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口
-
原生具备Iterator接口的数据结构（部署了Symbol.iterator属性）：
- 字符串(String)
- 数组（Array）
- 数据结构-Set
- 数据结构-Map
- 类型数组 ( TypedArray )
- 函数的arguments对象
- NodeList 对象
for…of循环
for of 循环遍历、就是专门针对可迭代对象的，不是可迭代对象不能使用 for of循环
for…of循环内部调用的是：数据结构的Symbol.iterator方法，所以只要是能调用Iterator接口的场合都可以使用
语法
for (variable of iterable) {
//statements
}
- variable：在每次迭代中，将不同属性的值分配给变量
- iterable：被迭代枚举其属性的对象
基本操作
有些数据结构是在现有数据结构的基础上，计算生成的，比如，ES6 的数组、Set、Map 都部署了以下三个方法，调用后都返回遍历器对象：
- entries() 返回一个遍历器对象，用来遍历[键名, 键值]组成的数组
- keys() 返回一个遍历器对象，用来遍历所有的键名
- values() 返回一个遍历器对象，用来遍历所有的键值
1
2
3
4
5
6
7
8let arr = ['a', 'b', 'c']; for (let pair of arr.entries()) { console.log(pair); } //[0, "a"] //[1, "b"] //[2, "c"]
for…of与for…in的区别
- for…in 语句以任意顺序迭代对象的可枚举属性。
- for…of 语句遍历可迭代对象定义要迭代的数据。
就拿数组来说for…in遍历的是下标，for…of遍历的是value
1
2
3
4
5
6
7
8
9
10let iterable = [10, 20, 30]; for (const value of iterable) { console.log(value); } // 10,20,30 for (const i in iterable) { console.log(i); } // 0,1,2
迭代器
最后
以上就是踏实月亮最近收集整理的关于ES6 中的迭代器(Iterator)的全部内容，更多相关ES6内容请搜索靠谱客的其他文章。
发表评论 取消回复