1.1 Conceitos Principais
Iterators e objetos iteráveis (iterables) em JavaScript são conceitos fundamentais que permitem aos objetos serem percorridos. Esses conceitos são amplamente usados no JavaScript moderno, especialmente em construções como loops for...of, o operador de propagação (spread operator), desestruturação e muitos outros. Nesta aula, vamos ver o que são iterables e iterators, como eles funcionam e como criá-los e usá-los.
Iterables (Objetos Iteráveis)
Objetos iteráveis são aqueles que implementam o protocolo de iteração. Eles devem ter um método especial com a chave [Symbol.iterator], que retorna um objeto iterador.
Iterators (Iteradores)
Um iterador é um objeto com o método next(), que retorna um objeto com duas propriedades:
value— o valor do próximo elemento na sequênciadone— um valor booleano indicando se a sequência terminou (true) ou não (false)
Vamos dar uma olhada em alguns exemplos de uso.
Objetos iteráveis embutidos
O JavaScript possui vários objetos iteráveis embutidos, incluindo arrays, strings, objetos Set e Map.
Exemplo 1: Iteração sobre um array
const array = [1, 2, 3, 4, 5];
for (const item of array) {
console.log(item);
}
// Vai imprimir: 1 2 3 4 5
Exemplo 2: Iteração sobre uma string
const string = 'hello';
for (const char of string) {
console.log(char);
}
// Vai imprimir: h e l l o
1.2 Criando seus próprios iterators
Você pode criar seu próprio iterator implementando o protocolo de iteração — criando o método next().
Exemplo 1: Criando um iterator
function createIterator(array) {
let index = 0;
return {
next: function() {
if (index < array.length) {
return { value: array[index++], done: false };
} else {
return { done: true };
}
}
};
}
const myIterator = createIterator([1, 2, 3]);
console.log(myIterator.next()); // { value: 1, done: false }
console.log(myIterator.next()); // { value: 2, done: false }
console.log(myIterator.next()); // { value: 3, done: false }
console.log(myIterator.next()); // { done: true }
Criando objetos iteráveis
Para que um objeto se torne iterável, ele deve implementar o método [Symbol.iterator]. Sim, é um nome bem esperto. Aqui está como criá-lo.
Exemplo 2: Criando um objeto iterável
const myIterable = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
};
for (const value of myIterable) {
console.log(value);
}
// Vai imprimir: 1 2 3
1.3 Métodos embutidos
Vamos dar uma olhada nos métodos e operadores embutidos para trabalhar com objetos iteráveis.
Exemplo 1: Operador spread
O operador spread (...) pode ser usado para copiar ou combinar objetos iteráveis.
const array = [1, 2, 3];
const newArray = [...array, 4, 5, 6];
console.log(newArray); // Vai imprimir: [1, 2, 3, 4, 5, 6]
Exemplo 2: Desestruturação
Desestruturação permite extrair valores de objetos iteráveis.
const [first, second, third] = [1, 2, 3];
console.log(first); // Vai imprimir: 1
console.log(second); // Vai imprimir: 2
console.log(third); // Vai imprimir: 3
Exemplo 3: Métodos Array.from e Array.of
O método Array.from() permite criar um array a partir de um objeto iterável.
const set = new Set([1, 2, 3, 4, 5]);
const array = Array.from(set);
console.log(array); // Vai imprimir: [1, 2, 3, 4, 5]
GO TO FULL VERSION