ES6新特性 Iterator和for..of循环

74 阅读 0 评论 49 点赞

我是靠谱客的博主深情母鸡，最近开发中收集的这篇文章主要介绍ES6新特性 Iterator和for..of循环，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

`Iterator`

Iterator是ES6引入的一种新的遍历机制，迭代器有两个核心概念：
- 迭代器是一个统一的借口，他的作用是使各种数据结构可被便捷地访问。
  迭代器是通过一个键位Symbol.iterator的方法来实现。
- 迭代器是用于遍历数据结构元素的指针(类似于数据库中的游标cursor)。
迭代过程
1. 获取迭代器(指向当前数据结构的起始位置)。
- 通过Symbol.iterator创建迭代器。
  - 可迭代对象：iterable
  - 其迭代器：iterable[Symbol.iterator]()，(String, Array, Set, Map)通用。
  - 可返回其迭代器的方法：iterator[Symbol.iterator]
- 通过对象的某些方法返回迭代器对象。如：
  - arr.values()
  - set.keys(), set.values()
  - map.keys(), map.values(), map.entries()
  - String对象没有实例方法用于返回其迭代器对象，所以只能用Symbol.iterator。
1. 多次调用iterator.next()向下迭代指向下一个位置。
- next()方法会返回当前位置的对象，然后指针后移。
- 对象的格式：{value: [...], done: 布尔值}，其中
  - value: 当前元素的值的数值。Map的为[key, value]，其他的value一般长度为1。
  - done: 判断遍历是否结束(是否移动到了最后一个元素)。
1. 当done为true时遍历结束。

如要重新迭代，需要重新获取迭代器(从第1步重新开始)。

可迭代的数据结构

String
Array
Set
Map
DOM元素(开发中。。。)

for..of
```
for (let e of obj) {
  console.log(e);
}
```
其中：
- e
  - 可以直接为e
  - 也可以是具体每个元素的value形式如map队形的[key, value]。
- obj
  - 可以直接是对象本身(如map)
  - 也可以是对象的迭代器iterator
    (如map.keys(), map.values(), map.entries(), map[Symbol.iterator]())。

不同搭配，性能可能会有所差异。

两种方式迭代访问可迭代数据解构
iterator.next()
for..of

迭代访问

以下依次为String, Array, Set, Map类对象的 迭代器访问和 for…of循环访问。

String

var str = "hello";
var iterator = str[Symbol.iterator]();
for (let i = 0; i < str.length; i++) {
  console.log(i, iterator.next().value);
  // 或value[0]，因为此时value数组只有一个元素。
}

// for (let ch of str[Symbol.iterator]) {  
for (let ch of str) {   // 也可以是str
  console.log(ch);
}

Array

var arr = Array.from("abcd");
var iterator = arr.values();  // 返回Array Iterator对象
for (let i = 0; i < arr.length; i++) {
  console.log(i, iterator.next().value);  // 或value[0]
}

// arr或arr.values()或arr[Symbol.iterator]皆可。
for (let e of arr) {
  console.log(e);
}

Set

var set = new Set().add("a").add("b").add("c"); // 链式调用
var iterator = set[Symbol.iterator]();
for (let i = 0; i < set.size; i++) {
  console.log(i, iterator.next().value); // 或value[0]
}

// set, set.keys(), set.values(), set[Symbol.iterator]皆可。
for (let e of set) {
  console.log(e);
}

Map
Map类对象除了可以用map[Symbol.iterator]()获取其迭代器MapIterator。
Map类对象有3种成员方法也可以获取(针对其元素不同位置的)迭代器：
- map.keys()
- map.values()
- map.entries()
  另外，也可通过map[Symbol.iterator]()获取其迭代器MapIteraor。 **NOTE**mapSymbol.iterator相当于map.entries()，同时遍历元素的key-value`对。

遍历方式同上，唯一不同的是map.entries()返回的迭代器的next()方法返回的对象：
{value: [key, value], done: 布尔值}中，value为长度为2的数组。

var map = new Map().set(1, "one").set(2, "two");
var iterator = map.entries();
undefined
for (let i = 0; i < map.size; i++) {
  console.log(i, iterator.next().value)
}

// 两种for..of循环
for (let entry of map) {
  console.log(entry);
}
for (let [key, value] of map) {
  console.log(key, value);
}

JS中Map对象的创建，遍历(7种)和使用(增删改查)

NOTE

函数内的隐式参数arguments其实是Array类型，所以也用迭代器迭代。
for..of
for (e of obj)中的e可以用关键字var, let, const声明。
- var 迭代不会每次都创建一个新的存储空间，但全局有效(for..of循环外e依旧可用)
- let, const每次迭代创建一个新的存储空间，但可以保证作用域的迭代内部。
  且用const声明的话，e值不可修改。
object不可迭代
可迭代的数据结构有：String, Array, Set, Map
不可迭代的有：Object，以及ES6新增的WeakSet, WeakMap(未定义obj[Symbol.iterator]())。
arrayLike类数组对象
因为object无法被迭代。
但是有一种特殊对象，其属性名称中只有一个length(属性值为数值类型)，其他属性名称都是数值，类似于数组的索引(0, 1, 2, 3等)。
这种对象可以用Array.from(obj)转换为数组对象，然后就可以对数组进行迭代。

var arrayLike = {length: 4, 0:"zero", 1:"one", 3:"four"}; // Object
var arr = Array.from(arrayLike);  // Array
console.log(arr);
// (4) ["zero", "one", undefined, "four"]

之后就可以对新得到的数组arr进行遍历