js能被遍历的集合有哪些特征，为何能被遍历

前言

js能被遍历的集合set、map、array 有哪些特性，为何能被遍历，集合也是一个系统内置自定义的对象，实际上就是因为实现了 Symbol.iterator 接口才能被遍历，然后外部提供了一系列的遍历方法，实际上就是利用 Symbol.iterator 迭代器实现遍历的

常见的遍历手段

常见的遍历手段如下，通常是我们常见的集合 set、map、array

for...of
... 扩展运算符
Array.from()
解构赋值
forEach（部分）

他们之所以能够被遍历，是因为实现了 Symbol.iterator 遍历器接口

Symbol.iterator

它是一个 内置的 Symbol 值 ，指向该对象的默认迭代器方法 (像不像 Symbol.toPrimitive，实际一套思维)。

只要实现了ES6提供的该方法，那么我们的自定义对象也能像默认的set、map、array一样被遍历了

要能被迭代要做到以下几点

实现 Symbol.iterator 接口
Symbol.iterator接口实际是一个函数，返回的结果单个迭代对象，该迭代对象通过next获取下一个迭代对象，因此返回的迭代对象声明一个 next 函数
由于需要用到值和判断结束，因此next 函数返回结果需要有 value、done参数
next中通过判断集合长度动态返回 value、done参数

注：集合的遍历会自动使用带有value、done属性的迭代器，根据done：true参数作为出循环条件直到最后(这就是js迭代器模式的接口规范)

js 复制代码

const obj = {
  data: [10, 20, 30],
  
  // 实现迭代器接口
  [Symbol.iterator]() {
    let index = 0
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false }
        } else {
          return { value: undefined, done: true }
        }
      }
    }
  }
}

// 现在它能被遍历了！
for (const v of obj) console.log(v) // 10,20,30

遍历器内部的可能实现

js 复制代码

while (true) {
  // 2. 不断调用 next()
  const { value, done } = iterator.next();

  // 3. 结束条件
  if (done) break;

  // 4. 把 value 交给你使用 callback(value, ...)
  console.log(value); 
}

最后

这功能比较简单，没啥说的，就介绍到这里了哈