ES6 的 Iterator (迭代器)

概念

参考阮一峰老师的ES6

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

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

Iterator 的作用有三个:

  1. 一 是为各种数据结构,提供一个统一的、简便的访问接口;
  2. 二 是使得数据结构的成员能够按某种次序排列;
  3. 三 是 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 方法,它可以与 breakcontinue 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,es6,javascript,开发语言)