16.1 Iterator和for...of_dll iterator1-CSDN博客

本文链接：https://blog.csdn.net/yehuiyuwei/article/details/98198029

Iterator和for of

iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
作用

1、为各种数据结构，提供一个统一的、简便的访问接口；

2、使得数据结构的成员能够按某种次序排列

3、ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费。

Iterator 的遍历过程

（1）创建一个指针对象(遍历器对象)，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

//每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束

function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}

var it = makeIterator(['a', 'b']);

it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }

默认iterator接口

一种数据结构只要部署了 Iterator 接口(Symbol.iterator属性)，我们就称这种数据结构是“可遍历的”
当使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口
原生具备 Iterator 接口的数据结构如下。
- Array
- Map
- Set
- String
- TypedArray
- 函数的 arguments 对象
- NodeList 对象

//对象obj是可遍历的（iterable），因为具有Symbol.iterator属性。执行这个属性，会返回一个遍历器对象。该对象的根本特征就是具有next方法。每次调用next方法，都会返回一个代表当前成员的信息对象，具有value和done两个属性
//本来对象是没有遍历器对象的，这个是我们手动添加一个遍历器对象，这样就有一个iterator接口可以使用for...of
const obj = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

调用遍历器接口的场合

解构赋值

对数组和 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']

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()

遍历器对象的return()

next方法是必须部署的，return方法是否部署是可选的
如果for...of循环提前退出（通常是因为出错，或者有break语句），就会调用return方法。如果一个对象在完成遍历前，需要清理或释放资源，就可以部署return方法

function readLinesSync(file) {
  return {
    [Symbol.iterator]() {
      return {
        next() {
          return { done: false };
        },
        return() {
          file.close();
          return { done: true };
        }
      };
    },
  };
}

for…of…

for...of循环内部调用的是数据结构的Symbol.iterator方法
for...of循环可以代替数组实例的forEach方法
for...of循环可以代替数组实例的for…in…方法,只能获得对象的键名，不能直接获取键值。ES6 提供for...of循环，允许遍历获得键值

数组使用for…of

const arr = ['red', 'green', 'blue'];

for(let [v, index] of arr.entries()) {
  console.log(v); // 0 1 2
  console.log(index); // red green blue
}

for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。这一点跟for...in循环也不一样

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

arr 
/*: 3
1: 5
2: 7
foo: "hello"
length: 3*/

Set 和 Map 结构

Set 和 Map 结构也原生具有 Iterator 接口，可以直接使用for...of循环
遍历的顺序是按照各个成员被添加进数据结构的顺序

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
  console.log(e);
}
// Gecko
// Trident
// Webkit

var es6 = new Map().set("edition", 6).set("committee", "TC39").set("standard", "ECMA-262");
for (var [name, value] of es6) {
  console.log(name + ": " + value);
}
// edition: 6
// committee: TC39
// standard: ECMA-262

let map = new Map().set('a', 1).set('b', 2);
for (let pair of map) {
  console.log(pair);
}
// ['a', 1]
// ['b', 2]

伪数组

使用Array.from方法将其转为数组

let arrayLike = { length: 2, 0: 'a', 1: 'b' };

// 报错
for (let x of arrayLike) {
  console.log(x);
}

// 正确
for (let x of Array.from(arrayLike)) {
  console.log(x);
}

对象使用for…of…和for…in…

let es6 = {
  edition: 6,
  committee: "TC39",
  standard: "ECMA-262"
};

for (let e in es6) {
  console.log(e);
}
// edition
// committee
// standard

for (var key of Object.keys(es6)) {
  console.log(key + ': ' + es6[key]);/*edition: 6
                                    index.html:20 committee: TC39
                                    index.html:20 standard: ECMA-262*/
}

Object.keys(es6) //(3) ["edition", "committee", "standard"]


//使用 Generator 函数将对象重新包装一下就可以使用for of
function* entries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}

for (let [key, value] of entries(obj)) {
  console.log(key, '->', value);
}
// a -> 1
// b -> 2
// c -> 3

与其他遍历语法的比较

原始for()写法比较麻烦，因此数组提供内置的forEach方法
无法跳出forEach循环，break命令或return命令都不能奏效
for...in循环有几个缺点
- 只能遍历键名，不能遍历值
- 数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
- for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
- 某些情况下，for...in循环会以任意顺序遍历键名
- for...in循环主要是为遍历对象而设计的，不适用于遍历数组