Iteradores e iteráveis ​​de JavaScript

Neste tutorial, você aprenderá sobre iteradores e iteráveis ​​JavaScript com a ajuda de exemplos.

Iterables e Iterators JavaScript

JavaScript fornece um protocolo para iterar sobre estruturas de dados. Este protocolo define como essas estruturas de dados são iteradas usando o for… ofloop.

O conceito do protocolo pode ser dividido em:

  • iterável
  • iterador

O protocolo iterável menciona que um iterável deve ter a Symbol.iteratorchave.

Iterables JavaScript

As estruturas de dados que possuem o Symbol.iterator()método são chamadas de iteráveis. Por exemplo, Arrays, Strings, Sets, etc.

Iteradores JavaScript

Um iterador é um objeto retornado pelo Symbol.iterator()método.

O protocolo iterador fornece o next()método para acessar cada elemento do iterável (estrutura de dados) um de cada vez.

Vejamos um exemplo de iteráveis ​​com Symbol.Iterator()

 const arr = (1, 2 ,3); // calling the Symbol.iterator() method const arrIterator = arr(Symbol.iterator)(); // gives Array Iterator console.log(arrIterator); const str = 'hello'; // calling the Symbol.iterator() method const strIterator = str(Symbol.iterator)(); // gives String Iterator console.log(strIterator);

Resultado

 Array Iterator () StringIterator ()

Aqui, chamar o Symbol.iterator()método da matriz e da string retorna seus respectivos iteradores.

Iterar por meio de iteráveis

Você pode usar o for… ofloop para iterar por meio desses objetos iteráveis. Você pode iterar por meio do Symbol.iterator()método assim:

 const number = ( 1, 2, 3); for (let n of number(Symbol.iterator)()) ( console.log(n); )

Resultado

 1 2 3

Ou você pode simplesmente iterar por meio da matriz assim:

 const number = ( 1, 2, 3); for (let n of number) ( console.log(n); )

Aqui, o iterador permite que o for… ofloop itere em uma matriz e retorne cada valor.

Método JavaScript next ()

O objeto iterador possui um next()método que retorna o próximo item na sequência.

O next()método contém duas propriedades: valuee done.

  • valor
    A valuepropriedade pode ser de qualquer tipo de dados e representa o valor atual na sequência.
  • done
    A donepropriedade é um valor booleano que indica se a iteração está completa ou não. Se a iteração estiver incompleta, a donepropriedade é definida como false, caso contrário, é definida como true.

Vejamos um exemplo de iteráveis ​​de matriz:

 const arr = ('h', 'e', 'l', 'l', 'o'); let arrIterator = arr(Symbol.iterator)(); console.log(arrIterator.next()); // (value: "h", done: false) console.log(arrIterator.next()); // (value: "e", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "o", done: false) console.log(arrIterator.next()); // (value: undefined, done: true)

Você pode chamar next()repetidamente para iterar sobre um arrIteratorobjeto.

  • O next()método retorna um objeto com duas propriedades: valuee done.
  • Quando o next()método atinge o final da sequência, a donepropriedade é definida como false.

Vejamos como o for… ofloop executa o programa acima. Por exemplo,

 const arr = ('h', 'e', 'l', 'l', 'o'); for (let i of arr) ( console.log(i); )

Resultado

 Olá

O for… ofloop faz exatamente o mesmo que o programa acima.

O for… ofloop continua chamando o next()método no iterador. Assim que chegar done:true, o for… ofloop termina.

Iterador Definido pelo Usuário

Você também pode criar seu próprio iterador e chamar next()para acessar o próximo elemento. Por exemplo,

 function displayElements(arr) ( // to update the iteration let n = 0; return ( // implementing the next() function next() ( if(n < arr.length) ( return ( value: arr(n++), done: false ) ) return ( value: undefined, done: true ) ) ) ) const arr = ('h', 'e', 'l', 'l', 'o'); const arrIterator = displayElements(arr); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next());

Resultado

 (valor: "h", feito: falso) (valor: "e", feito: falso) (valor: "l", feito: falso) (valor: "l", feito: falso) (valor: "o" , feito: falso) (valor: indefinido, feito: verdadeiro)

No programa acima, criamos nosso próprio iterador. A displayElements()função retorna valuee donepropriedade.

  • Cada vez que o next()método é chamado, a função é executada uma vez e exibe o valor de um array.
  • Finalmente, quando todos os elementos de um array se esgotam, a donepropriedade é definida como true, com valueas undefined.

Artigos interessantes...