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… of
loop.
O conceito do protocolo pode ser dividido em:
- iterável
- iterador
O protocolo iterável menciona que um iterável deve ter a Symbol.iterator
chave.
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… of
loop 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… of
loop 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: value
e done
.
- valor
Avalue
propriedade pode ser de qualquer tipo de dados e representa o valor atual na sequência. - done
Adone
propriedade é um valor booleano que indica se a iteração está completa ou não. Se a iteração estiver incompleta, adone
propriedade é definida comofalse
, caso contrário, é definida comotrue
.
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 arrIterator
objeto.
- O
next()
método retorna um objeto com duas propriedades:value
edone
. - Quando o
next()
método atinge o final da sequência, adone
propriedade é definida comofalse
.
Vejamos como o for… of
loop 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… of
loop faz exatamente o mesmo que o programa acima.
O for… of
loop continua chamando o next()
método no iterador. Assim que chegar done:true
, o for… of
loop 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 value
e done
propriedade.
- 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
done
propriedade é definida comotrue
, comvalue
asundefined
.