阮一峰es6要点总结——遍历器

笔记,总结摘录自阮一峰

Iterator基本概念

Iterator(遍历器)是一种接口,为不同的数据结构提供统一的遍历机制。

主要供for...of...循环使用。

一个例子来说明,遍历器生成函数和遍历器对象:

比如对某数组arr进行for...of...操作,会调用arr上的Symbol.iterator函数,返回一个遍历器对象,供for...of...遍历。
一个遍历器对象应必须有next()方法,可以有也可以没有return(),throw()方法。
遍历过程:

  • 创建一个指针对象,指向arr的起始位置,也就是说,遍历器本质上,就是一个指针对象。
  • 第一次调用指针对象的next()方法,可以将指针指向数据结构的第一个成员
  • 第二次低啊用指针对象的next()方法,指向第二个成员
  • 多次调用,直到数据结构的尾部。
    每次调用next()方法,都会返回一个包含value,done两个属性的对象。value是当前成员,done是一个布尔值,表示遍历是否结束(为true时,表示结束)。

根据以上过程,可以总结如下

  • ES6的遍历操作本质上是调用了Symbol.iterator接口,这样的操作有
  • 结构赋值
  • 扩展运算符(...)
  • yield*
  • for...of...
  • ES6中以数组作为参数的情况
  • 有的数据结构原生具有遍历器接口,我们可以直接调用,。
    原生具有遍历器接口的有:
  • 数组
  • Set、Map结构
  • 某些类数组对象(字符串、DOM NodeLIst、arguments
  • Generator 对象
  • 而没有原生遍历器接口的,可以通过自定义Symbol.iterator函数,来实现。

Iterator接口与Generator函数

var myIterable = {};

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

for...offor...in

  • for...in遍历操作:为对象遍历设计的,并不非常适用于数组。当遍历数组时会存在以下问题:

  • 数组键名是数字,但是for...in循环以字符串作为键名‘0’,‘1’,‘2’

  • for...in循环不仅遍历数字键名,还会遍历手动添加的其他键,也包括原型链上的键

  • 某些情况下,for...in循环会以任意顺序遍历键名。

  • for...of解决了以上的问题。

  • 可以配合数组、Set等结构的entries()keys()values()方法,实现不同的遍历。

  • 不存在for...in的缺点。

  • 可以正确识别32位UTF-16字符

推荐阅读更多精彩内容

  • Iterator(遍历器)的概念 JavaScript原有的表示“集合”的数据结构,主要是数组(Array)和对象...
    呼呼哥阅读 1,922评论 0 2
  • Iterator(遍历器)的概念 遍历器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提...
    冰豹阅读 407评论 0 6
  • 本文为阮一峰大神的《ECMAScript 6 入门》的个人版提纯! babel babel负责将JS高级语法转义,...
    Devildi已被占用阅读 1,453评论 0 4
  • 如何使用遍历的 我们暂且以数组为例,javascript提供了多种遍历数组的方法,最开始我们可能习惯使用for循环...
    DC_er阅读 29,430评论 3 15
  • 原生具备 Iterator 接口的数据结构如下。ArrayMapSetStringTypedArray函数的 ar...
    xuziang111阅读 184评论 0 0