ES6 Interator 和 for...of 循环

Iterator（遍历器）的概念

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

Iterator 三个作用

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

function customIterator(arr){
  let index = 0;
  return{
    next:function(){
      if(index < arr.length){
        return {value: arr[index++], done: false}
      }else{
        return{value:undefined, done: true}
      }
    }
  }
}
var arr = customIterator(['x','y','z'])

Iterator 遍历过程。

1. 创建指针对象，指向当前数据结构的起始位置。
2. 第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员，返回第一个成员数据参数（value）和遍历状态（done）。
3. 第二次调用指针对象的next方法，指针就指向数据结构的第二个成员，返回第二个成员数据参数（value）和遍历状态（done）。
4. 不断调用指针对象的next方法，直到它指向数据结构的结束位置，返回的遍历状态为true后终止遍历。

默认 Iterator 接口

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。

let arr = ['a', 'b'];
let iter = arr[Symbol.iterator]();

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

调用 Iterator 接口的场合

（1）解构赋值

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

let [x, y] = [1, 2] // x = 1, y = 2

（2）扩展运算符

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

var str = 'shaoin';
[...str] // ['s', 'h', 'a', 'o', 'i', 'n']

（3）yield *

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

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

let iter = gen();
iter.next() // { value: 1, done: false }
iter.next() // { value: 2, done: false }
iter.next() // { value: 3, done: false }
iter.next() // { value: undefined, done: true }

for…of 循环

遍历所有数据结构的统一的方法，一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员

let arr = ['a', 'b', 'c', 'd'];
let set = new Set(["a", "b", "c", "d"]);
let map = new Map().set('a', 1).set('b', 2);
let str = 'shaoin';
let fn = function(){
  for(let el of argumennts){
    console.log(el);
  }
};

for(let el of arr){
  console.log(el) // 'a', 'b', 'c', 'd'
}
for(let el of set){
  console.log(el) // "a", "b", "c", "d"
}
for(let [key, value] of map){
  console.log(key + ' : ' + value); // a: 1, b: 2
}
for(let el of str){
  console.log(el); // 's', 'h', 'a', 'o', 'i', 'n'
}
fn('a','b') // 'a', 'b'

对于普通的对象，for...of结构不能直接使用，有两种解决方法：

let obj = {
  name: "shaoin",
  age: 98
}
for(let key of Object.keys(obj)){
  console.log(key + ':' + obj[key]);
}
// name: shaoin age: 98
// 使用Object.keys方法将对象的键名生成一个数组，然后遍历这个数组

function* entries(obj){
  for(let key of Object.keys(obj)){
    yield [key, obj[key]];
  }
}
for (let [key, val] of entries(obj)){
  console.log(key + ":" + val);
}
// name: shaoin age: 98
// 使用 Generator 函数将对象重新包装

参考文献

阮一峰老师的 ECMAScript 6 入门

---

点赞 评论 收藏 ~~ 今天的学习记录暂时到这... ~~ 点赞 评论 收藏