¿Cómo convertir un objeto en un objeto iterable?

Un objeto iterable (objeto Iterable) es una generalización de una matriz. Este concepto significa que cualquier objeto se puede personalizar como un objeto que se puede usar en un bucle for...of.
Es decir, los objetos a los que se puede aplicar for...of se denominan objetos iterables.

iterador

En JavaScript, un iterador es un objeto que define una secuencia y posiblemente devuelve un valor de retorno cuando finaliza.

Más específicamente, un iterador es cualquier objeto next() implementado mediante un método que devuelve un objeto con dos propiedades:Iterator protocol

• valor, que es el siguiente valor en la secuencia
• hecho, lo cual es cierto si se ha iterado hasta el último valor de la secuencia;
  de ser value 和 done 一起存在así, es el valor de retorno del iterador.

Una vez creado, un objeto iterador se puede 显式iterar mediante llamadas repetidas a next().

Se dice que iterar sobre un iterador consume el iterador, ya que normalmente sólo se puede hacer una vez.

Después de obtener el valor de terminación, las llamadas adicionales a next() deberían continuar regresando {done: true}.

El iterador más común en Javascript es Array 迭代器que simplemente devuelve cada valor de la matriz asociativa en orden.

Si bien es fácil imaginar que todos los iteradores se pueden representar como matrices, este no es el caso. Las matrices deben asignarse en su totalidad, pero los iteradores se usan solo cuando es necesario, por lo que se pueden representar secuencias de tamaño ilimitado, como rangos de enteros entre 0 e infinito.

A continuación se muestra un ejemplo donde se puede hacer esto. Permite crear un iterador de rango simple que define una secuencia de números enteros con pasos de intervalo desde el inicio (inclusive) hasta el final (exclusivo). Su valor de retorno final es el tamaño de la secuencia que creó, rastreada por la variable iterationCount.

let index = 0
const bears = ['ice', 'panda', 'grizzly']

let iterator = {
    
    
  next() {
    
    
    if (index < bears.length) {
    
    
      return {
    
     done: false, value: bears[index++] }
    }

    return {
    
     done: true, value: undefined }
  }
}

console.log(iterator.next()) //{ done: false, value: 'ice' }
console.log(iterator.next()) //{ done: false, value: 'panda' }
console.log(iterator.next()) //{ done: false, value: 'grizzly' }
console.log(iterator.next()) //{ done: true, value: undefined }

Implementar objetos iterables

Se llama a un objeto si tiene [Symbol.iterator]un método que devuelve un objeto iterador 可迭代对象.

let info = {
    
    
  bears: ['ice', 'panda', 'grizzly'],
  [Symbol.iterator]: function() {
    
    
    let index = 0
    let _iterator = {
    
    
       //这里一定要箭头函数，或者手动保存上层作用域的this
       next: () => {
    
    
        if (index < this.bears.length) {
    
    
          return {
    
     done: false, value: this.bears[index++] }
        }
  
        return {
    
     done: true, value: undefined }
      }
    }

    return _iterator
  }
}

let iter = info[Symbol.iterator]()
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

//符合可迭代对象协议 就可以利用 for of 遍历
for (let bear of info) {
    
    
  console.log(bear)
}
//ice panda grizzly