Symbol.iterator em Javascript

Este é um artigo breve, mas útil para futuros desenvolvedores sobre iteradores Javascript.

Antes de aprendermos sobre os iteradores em js, lembre-se do que é o símbolo :

Symbol é um identificador único e imutável. Criado usando a função Symbol (), também pode ser rotulado como Symbol ('foo'). Símbolos com os mesmos rótulos não são iguais um ao outro e, em geral, quaisquer símbolos não são iguais entre si (lembre-se da exclusividade).

Existem símbolos do sistema como Symbol.iterator , Symbol.toPrimitive e outros. Os caracteres do sistema são usados ​​pelo próprio idioma, mas também podemos usá-los para alterar o comportamento padrão de alguns objetos.

Os símbolos fazem parte da especificação es6, portanto, eles não são suportados, isto é, de forma alguma ( caniuse ).

Sobre Symbol.iterator

Basicamente, esse símbolo é usado pelo idioma em um loop for ... ao iterar pelas propriedades de um objeto. Também pode ser usado diretamente com tipos de dados internos:

const rangeIterator = '0123456789'[Symbol.iterator](); console.log(rangeIterator.next()); // {value: "0", done: false} console.log(rangeIterator.next()); // {value: "1", done: false} console.log(rangeIterator.next()); // {value: "2", done: false} ... console.log(rangeIterator.next()); // {value: "9", done: false} console.log(rangeIterator.next()); // {done: true} 

Este exemplo funciona com uma string, já que String.prototype possui seu próprio iterador ( especificação ). Lista de tipos iteráveis ​​em js: String, Array, TypedArray, Map, Set.
Além do loop, o javascript usa Symbol.iterator nas seguintes construções: operador spread, rendimento , atribuição de desestruturação .

Chamar [Symbol.iterator] () retorna uma interface iteradora que se parece com isso:

 Iterator { next(); //    return(); //   throw(); //   } 

Os métodos .next (), .return (), .throw () se preparam (então veremos como) e retornam um objeto do formulário:

 { value - ,   done -    } 

Os métodos .return () e .throw () são usados, por exemplo, quando a iteração termina prematuramente. Você pode ler mais sobre eles na especificação de ecmascript .

Usando Symbol.iterator em suas estruturas

Como exemplo, vamos criar nossa própria estrutura, que pode ser iterada usando for ... of e também ver o uso do Symbol.iterator com as construções de linguagem mencionadas acima.

Imagine que temos uma rota traçada por várias estações e queremos seguir a rota e fazer algo com cada estação, por exemplo, exibi-la no console.

Crie uma classe de rota :

 class Route { stations; //      constructor(stations) { this.stations = stations; } //     id get(idx) { return this.stations[idx]; } //   [Symbol.iterator]() { return new RouteIterator(this); //   } } 

Como você pode ver, nosso Route implementa o método Symbol.iterator , portanto, Route é uma entidade iterável ( especificação ), o que significa que podemos passar por ele usando for ... of (depois de examinarmos a implementação do RouteIterator ).

O método [Symbol.iterator] () será chamado quantas vezes houver chamadas para ele. Ou seja, se vários ciclos tentarem percorrer a rota um após o outro, [Symbol.iterator] () será chamado para cada ciclo, portanto, para cada chamada, criaremos uma nova instância do RouteIterator .

Agora vamos conhecer o próprio RouteIterator . Essa classe implementa uma interface iteradora para uma entidade de rota . Vejamos:

 class RouteIterator { _route; //     _nextIdx; //    constructor(route) { this._route = route; this._nextIdx = 0; } next() { if (this._nextIdx === this._route.stations.length) { return { done: true } //     } const result = { value: this._route.get(this._nextIdx), done: false } this._nextIdx++; return result; } } 

Nesta classe, temos acesso à coleção iterável (propriedade de rota ), assim como nextIdx é um ponteiro para o próximo valor em nossa coleção.

O método next () primeiro verifica se a rota foi concluída e, se concluída, retorna que as iterações estão concluídas. Caso contrário, pegamos o próximo valor na coleção de rotas , dizemos que as iterações não foram concluídas, movemos o ponteiro e retornamos o resultado.

Agora podemos percorrer a coleção de rotas através de ... de :

 const route = new Route(['', '', '']) for (let item of route) { console.log(item); } 

Este código listará as estações que passamos para a rota .

Agora vamos percorrer as estações usando os geradores de funções:

 function* gen() { yield* route; return 'x'; //        .next() } const g = gen(); g.next() // {value: "", done: false} g.next() // {value: "", done: false} g.next() // {value: "", done: false} g.next() // {value: 'x', done: true} g.next() // {value: undefined, done: true} 

Symbol.iterator é usado para a reestruturação :

 const [a, b, c] = route; // a - "" // b - "" //  - "" 

e com operador spread :

 function test(a, b, c) { console.log(a, b, c) } test(…route) // "" "" "" 

Resultados

Criamos nossa classe, tornamos iterável e usada com construções javascript. Obrigado pela atenção =).

Materiais

É impossível dominar completamente o novo material em apenas um artigo, portanto, aqui estão alguns outros:
Sobre o padrão do iterador do livro Refatoração do Guru
Sobre Symbol do livro de Ilya Kantor e na MDN