ES6 Iterator遍历器原理，应用场景及相关常用知识拓展详解

ES6 Iterator遍历器原理，应用场景及相关常用知识拓展

1. Iterator遍历器基本概念

Iterator遍历器是一个可以迭代访问集合中元素的接口，它是一种统一的遍历机制，为各种不同类型的数据结构提供了一种统一的遍历方式。

在ES6中，Iterator遍历器是一种统一的协议，也就是说只要一个对象实现了Iterator遍历器协议，就可以通过这种协议访问到该对象中所有的元素，从而实现对该对象的遍历。

2. Iterator遍历器的原理

Iterator遍历器的原理就在于凡是拥有[Symbol.iterator]属性的对象都可以被作为迭代器进行遍历。

[Symbol.iterator]是一个内置常量字符串属性，用来定义一个对象的迭代器行为，其类型为Symbol，是ES6引入的一种新的基本数据类型。

下面是一个示例代码：

let arr = [1, 2, 3];
let iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

在上述示例中，我们先定义了一个数组arr，然后通过arr[Symbol.iterator]()方法获得该数组的迭代器对象iterator。在对这个迭代器对象进行next()方法调用的时候，返回的是一个包含两个属性的对象：value和done。值得注意的是，只有当done属性为true时，表示遍历结束，value属性的值为undefined。

3. Iterator遍历器的应用场景

Iterator遍历器的应用场景非常广泛，下面列举一些常用的场景：

3.1. 遍历数组

对于数组来说，可以直接调用entries()方法，实现对数组的迭代：

let arr = ["apple", "banana", "orange"];
let iterator = arr.entries();
console.log(iterator.next()); // {value: [0, "apple"], done: false}
console.log(iterator.next()); // {value: [1, "banana"], done: false}
console.log(iterator.next()); // {value: [2, "orange"], done: false}
console.log(iterator.next()); // {value: undefined, done: true}

3.2. 遍历对象

对于对象来说，可以通过自定义实现其迭代器协议，从而实现对对象的属性的遍历：

let obj = {
  name: "Bill",
  age: 30,
  gender: "male",
  [Symbol.iterator]: function () {
    let keys = Object.keys(this);
    let index = 0;
    return {
      next: () => {
        if (index < keys.length) {
          return { value: this[keys[index++]], done: false };
        } else {
          return { value: undefined, done: true };
        }
      },
    };
  },
};
let iterator = obj[Symbol.iterator]();
console.log(iterator.next()); // {value: "Bill", done: false}
console.log(iterator.next()); // {value: 30, done: false}
console.log(iterator.next()); // {value: "male", done: false}
console.log(iterator.next()); // {value: undefined, done: true}

在上述示例中，我们对一个对象实现了其迭代器协议，通过[Symbol.iterator]属性来定义了一个迭代器对象，该迭代器对象包含next()方法来实现对对象属性的遍历。

3.3. 遍历自定义数据结构

对于自定义的数据结构来说，也可以通过自定义实现其迭代器协议，从而实现对该结构的遍历。

4. Iterator遍历器常用知识拓展

4.1. 默认可迭代协议

在ES6中，所有的集合对象(Array、Map、Set等)都实现了默认可迭代协议，可以直接通过for...of语句进行遍历。

let arr = [1, 2, 3];
for (let item of arr) {
  console.log(item);
}

4.2. generator函数生成迭代器

在ES6中，generator函数可以用来生成一个迭代器，从而实现对数据结构的遍历:

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

在上述示例中，我们通过generator函数定义了一个迭代器对象，并通过调用其next()方法来实现对数据结构的遍历。

5. 总结

Iterator遍历器是ES6中一种较为重要的新特性，通过实现迭代器协议，可以实现对各种类型数据结构的遍历。在实际开发中，我们经常使用Array、Map、Set等集合对象来存储和处理数据，了解Iterator遍历器的原理和应用场景，可以极大地提高我们的开发效率。