ES6 |iterator和for…of循环

引入

遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作

//1. 遍历器生成函数
function makeIterator(array){
    var nextIndex=0;
    return {
        next:function(){
            return nextIndex<array.length?
            {value:array[nextIndex++],done:false};
            {value:undefined,done:false};     
        }
    }
}

//2。 遍历器生成函数简约写法
function makeIterator(array){
    var nextIndex=0;
    return {
        next:function(){
            return nextIndex < array.length ?
            {value: array[nextIndex++]} :
            {done: true};
        }
    }
}

//返回一个遍历器对象,也称指针对象
var it = makeIterator(['a', 'b']);

//next方法用来移动指针，返回一个对象（具有value和done属性）
//调用next就可以遍历给定的数据结构
it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }

在ES6中，有些数据结构原生具备Iterator接口（比如数组），即不用任何处理，就可以被for...of循环遍历，有些就不行（比如对象）。这与数据结构是否原生部署了Symbol.iterator属性有关

凡是部署了Symbol.iterator属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象

数据结构的默认Iterator接口

Symbol.iterator是一个表达式，返回Symbol对象的iterator属性。一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”。

在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构

let arr = ['a', 'b', 'c'];
//执行Symbol.iterator属性会返回一个遍历器对象，其基本特征就是具有next方法
let iter = arr[Symbol.iterator]();
//调用遍历器对象里的next方法
iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

自定义Iterator接口

//1. 给类部署Iterator接口（等同于部署Symbol.iterator属性）
class RangeIterator {
  constructor(start, stop) {
    this.value = start;
    this.stop = stop;
  }
    
  //部署Symbol.iterator属性，返回当前对象的遍历器对象
  [Symbol.iterator]() { return this; }
  //定义next
  next() {
    var value = this.value;
    if (value < this.stop) {
      this.value++;
      return {done: false, value: value};
    }
    return {done: true, value: undefined};
  }
}

//2. 给对象部署Iterator接口
let obj = {
  data: [ 'hello', 'world' ],
  [Symbol.iterator]() {
    const self = this;
    let index = 0;
    return {
      next() {
        if (index < self.data.length) {
          return {
            value: self.data[index++],
            done: false
          };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

//3.给类似数组的对象（存在数值键名和length属性）部署Iterator接口——Symbol.iterator直接引用数组的Iterator接口
let iterable = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  //部署Symbol.iterator
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
  //写法二：[Symbol.iterator]: [][Symbol.iterator]
};

//注意，普通对象部署数组的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
}

当使用for...of循环遍历某种数据结构时，该循环会自动去寻找Iterator接口。有了遍历器接口，数据结构就可以用for...of循环遍历，也可以使用while循环遍历

调用Iterator接口的场合

• 解构赋值

  let set = new Set().add('a').add('b').add('c');
  
  //对数组和Set结构进行解构赋值时，会默认调用Symbol.iterator方法
  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']
  

  //只要某个数据结构部署了Iterator接口，就可以对它使用扩展运算符，将其转为数组
  let arr = [...iterable];
  

• yield*

• 其他场合

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

字符串的Iterator接口

var someString = "hi";
var iterator = someString[Symbol.iterator]();
iterator.next()  // { value: "h", done: false }
iterator.next()  // { value: "i", done: false }
iterator.next()  // { value: undefined, done: true }

可以覆盖原生的Symbol.iterator方法，修改遍历器行为

var str = new String("hi");
[...str] // ["h", "i"]
str[Symbol.iterator] = function() {
  return {
    next: function() {
      if (this._first) {
        this._first = false;
        return { value: "bye", done: false };
      } else {
        return { done: true };
      }
    },
    _first: true
  };
};
//由于修改，扩展运算符（...）返回的值变成了bye，而字符串本身还是hi
[...str] // ["bye"]
str // "hi"

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

遍历器对象的return()，throw()

遍历器对象除了具有next方法，还可以具有return方法和throw方法，后者是可选的。

return方法的使用场合：

（1）如果for...of循环提前退出（通常是因为出错，或者有break语句或continue语句）

（2）如果一个对象在完成遍历前，需要清理或释放资源

function readLinesSync(file) {
  return {
    next() {
      if (file.isAtEndOfFile()) {
        file.close();
        return { done: true };
      }
    },
    return() {
      file.close();
      return { done: true };
    },
  };
}
//触发
for (let line of readLinesSync(fileName)) {
  console.log(line);
  break;
}

throw方法主要是配合Generator函数使用

for...of循环

for...in循环读取键名，for...of循环读取键值

var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
  console.log(a); // 0 1 2 3
}
for (let a of arr) {
  console.log(a); // a b c d
}

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"
}