概念

参考阮一峰老师的ES6

JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了 Map 和 Set 。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是 Map，Map 的成员是对象。这样就 需要一种统一的接口机制，来处理所有不同的数据结构。

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

Iterator 的作用有三个：

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

for of 遍历

Iterator 接口的目的，就是为所有数据结构，提供了一种统一的访问机制，即 for...of 循环（详见下文）。当使用for...of 循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。

一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。

原生具备 Iterator 接口的数据结构如下

Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象

为对象添加 Iterator

简单例子

let obj = {
  data:  ['a', 'b', 'c'],
  [Symbol.iterator]() {
    const self = this;
    let index = 0;
    return {
      next() {
        if (index < self.data.length) {
          return {
            value: self.data[index++],
            done: false
          };
        }
        return { value: undefined, done: true };
      }
    };
  }
};
for (let item of obj) {
  console.log(item); // 'a', 'b', 'c'
}

使用 yield

Symbol.iterator() 方法的 最简单实现，使用 Generator 函数。

let myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};
[...myIterable] // [1, 2, 3]

// 或者采用下面的简洁写法

let obj = {
  * [Symbol.iterator]() {
    yield 'hello';
    yield 'world';
  }
};

for (let x of obj) {
  console.log(x);
}
// "hello"
// "world"

Symbol.iterator() 方法几乎不用部署任何代码，只要用 yield 命令给出每一步的返回值即可。

类似数组对象调用 Symbol.iterator

类似数组的对象， 前面的键 类似 数组的索引 (0 1 2... ) , 所以可以通过 for of 遍历

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 方法，并无效果。

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

调用 Iterator 接口的场合

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

解构赋值

对数组和 Set 结构进行解构赋值时，会默认调用 Symbol.iterator 方法。

let set = new Set().add('a').add('b').add('c');

let [x, y] = set;
// x='a'; y='b'

let [first, ...rest] = set;
// first='a'; rest=['b', 'c'];

扩展运算符

扩展运算符（...）也会调用默认的 Iterator 接口。

// 例一
var str = 'hello';
[...str]  //  ['h','e','l','l','o']

// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']

上面代码的扩展运算符内部就调用 Iterator 接口。

实际上，这提供了一种简便机制，可以将任何部署了 Iterator 接口的数据结构转为数组。

也就是说，只要某个数据结构部署了 Iterator 接口，就可以对它使用扩展运算符，将其转为数组。

let arr = [...iterable];

yield*

yield* 后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

let generator = function* () {
  yield 1;
  yield* [2,3,4];
  yield 5;
};

var iterator = generator();

iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }

其他场合

由于数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口。

下面是一些例子

for...of
Array.from()
Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
Promise.all()
Promise.race()

数组遍历的一些方法

for 循环 forEach for in for of

forEach

无法中途跳出 forEach 循环，break 命令或 return 命令都不能奏效。

for in

for...in 循环可以遍历数组的键名。

for...in 循环有几个缺点。

数组的键名是数字，但是 for...in 循环是以字符串作为键名 “0”、“1”、“2” 等等。
for...in 循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
某些情况下，for...in 循环会以任意顺序遍历键名。

总之，for...in 循环主要是为遍历对象而设计的，不适用于遍历数组。

let arr = [3, 5, 7];
arr.foo = 'hello';
for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for of

有着同 for...in 一样的简洁语法，但是没有 for...in 那些缺点。
不同于 forEach 方法，它可以与 break、continue 和 return 配合使用。
提供了遍历所有数据结构的统一操作接口。

下面是一个使用 break 语句，跳出 for...of 循环的例子

for (var n of fibonacci) {
  if (n > 1000)
    break;
  console.log(n);
}

上面的例子，会输出斐波纳契数列小于等于 1000 的项。如果当前项大于 1000

就会使用 break 语句跳出 for...of 循环。

注意(对象)

对象没有部署 Iterator 接口，但是对象可以进行 解构赋值、 扩展运算符 ... 等操作

解构赋值

let obj = {
  a: 1,
  b: 2,
  c: 3
};

const {a, b} = obj;
console.log(a, b)  // 1 2

... 扩展运算符

let obj = {
  a: 1,
  b: 2,
  c: 3
};

const a = {...obj};
console.log(a)  // {a: 1, b: 2, c: 3}

原因

对象解构和 Iterator 迭代器没关系

对象的解构就是: 创建新对象-> 枚举属性 -> 复制属性并赋值

文章如有错误，恳请大家提出问题，本人不胜感激。不懂的地方可以评论，我都会一一回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力长路漫漫，道阻且长

ES6 的 Iterator (迭代器)

概念

for of 遍历

原生具备 Iterator 接口的数据结构如下

为对象添加 Iterator

简单例子

使用 yield

类似数组对象调用 Symbol.iterator

调用 Iterator 接口的场合

解构赋值

扩展运算符

yield*

其他场合

数组遍历的一些方法

forEach

for in

for of

注意(对象)

解构赋值

... 扩展运算符

原因

猜你喜欢