是否所有的 JavaScript Iterables 都有 next() 方法？

Question

我正在从https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators 学习 Iterables，它清楚地表明 Array 是 Iterable。在 chrome 控制台中检查，我们可以看到它有Symbol.iterator，我们可以在上面运行for..of。

但数组似乎不遵循迭代器模式，即拥有 next() 方法，我有点明白，因为您无法重置迭代器，这将严重限制数组。

但是我无法从文档中确定哪些 Iterables 具有完整的实现 (next())，哪些没有，或者我在这里缺少一个基本概念。

我错过了什么？

Answer 1

我认为您缺少的是 iterator 和 iterable 之间存在差异。

数组是可迭代的，但不是迭代器。您可以从数组中获取迭代器，这就是它可迭代的原因：

// iterable
let arr = [1, 2, 3, 4]          

// Symbol.iterator function returns the iterator
let it = arr[Symbol.iterator]() 

// iterators have next()
console.log(it.next())          
console.log(it.next())          
console.log(it.next())          
console.log(it.next())          
console.log(it.next())

Answer 2

Mark Meyer 的回答帮助您了解 iterable 和 iterator 之间的关键区别。

如果你想让你自己的值可迭代，你必须实现Symbol.iterator -

class Squares {
  constructor (...values) {
    this.values = values
  }
  *[ Symbol.iterator ] () {
    for (const v of this.values)
      yield v * v
  }
}

const iterable =
  new Squares(1, 2, 3, 4, 5)

for (const v of iterable)
  console.log(v)
// 1
// 4
// 9
// 16
// 25

console.log(Array.from(iterable))
// [ 1, 4, 9, 16, 25 ]

现在看看我们如何从可迭代对象中获取迭代器 -

class Squares {
  constructor (...values) {
    this.values = values
  }
  *[ Symbol.iterator ] () {
    for (const v of this.values)
      yield v * v
  }
}

const iterable =
  new Squares(1, 2, 3, 4, 5)

const iterator =
  iterable[Symbol.iterator]()

console.log(iterator.next()) // { value: 1, done: false }
console.log(iterator.next()) // { value: 4, done: false }
console.log(iterator.next()) // { value: 9, done: false }
console.log(iterator.next()) // { value: 16, done: false }
console.log(iterator.next()) // { value: 25, done: false }
console.log(iterator.next()) // { value: undefined, done: true }