js能被遍历的集合有哪些特征，为何能被遍历js能被遍历的集合set、map、array 有哪些特性，为何能被遍历，集合也

前言

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迭代器模式的接口规范)

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

遍历器内部的可能实现

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

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

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

最后

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