CodeGym /Cursos /Frontend SELF PT /Iterables e Iterators

Iterables e Iterators

Frontend SELF PT
Nível 45 , Lição 0
Disponível

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ência
  • done — 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

JavaScript
    
      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

JavaScript
    
      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

JavaScript
    
      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

JavaScript
    
      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.

JavaScript
    
      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.

JavaScript
    
      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.

JavaScript
    
      const set = new Set([1, 2, 3, 4, 5]);
      const array = Array.from(set);

      console.log(array); // Vai imprimir: [1, 2, 3, 4, 5]
    
  
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION