Explicação detalhada dos princípios de implementação de matrizes de classes JavaScript e objetos iteráveis

[Recomendações relacionadas: tutorial em vídeo de JavaScript, front-end da web]

objetos iteráveis

​​​​é um objeto especial e sua diferença em relação aos objetos comuns não é apenas o acesso sequencial e o armazenamento de elementos. Outra diferença importante é que os arrays são iteráveis, ou seja, você pode usar for ... of para acessar (iterar) todos os elementos.

Podemos simplesmente fazer um pequeno experimento:

let arr = [1,2,3,4,5]for(let val of arr){
    

resultados da execução do código

console.log(val)}

O código acima simplesmente usa o recurso de iteração do array. Quando acessamos os elementos do array, não precisamos usar o subscrito do elemento.

O que acontece se usarmos a instrução for ... of em um objeto normal?

deixe obj = {
    nome: 'xiaoming',
    age:12,}for(let para of obj){ //O código reportará um erro console.log(para)}

O efeito de execução é o seguinte:

Isso prova que existe uma lacuna iterável entre objetos comuns e arrays. Chamamos objetos com funções iterativas de objetos iteráveis .

Symbol.iterator

Se quisermos que um objeto seja iterável, devemos adicionar um método chamado Symbol.iterator ao objeto (um Symbol integrado que especificamente torna os objetos iteráveis).

As funções do método incluem:

1. Ao usar for ... of para iterar um objeto, o método Symbol.iterator será chamado e esse método deve retornar um iterador (um objeto com um método next() ).
2. Depois de obter o iterador, for ... of chamará continuamente o método next() do iterador para obter o próximo elemento.
3. O conteúdo retornado pelo método next() deve estar em conformidade com o formato: {done:Boolean,value:any} . Quando done:true , o loop termina, caso contrário, value é o próximo valor.

Iterador: Iterador

é um conceito emprestado de linguagens como C++ . O princípio do iterador é como um ponteiro. Ele aponta para um elemento na coleção de dados. para obter outros elementos. Os iteradores são semelhantes à expansão de subscritos em matrizes. Várias estruturas de dados, como listas vinculadas ( List ), conjuntos ( Set ) e mapas ( Map ), possuem iteradores correspondentes.

Iteradores em JS são especialmente projetados para esta operação. O iterador obtido a cada vez sempre aponta inicialmente para o primeiro elemento, e o iterador tem apenas comportamento next() até que o último elemento do conjunto de dados seja obtido. Não podemos mover a posição do iterador com flexibilidade, portanto a tarefa do iterador é percorrer os elementos do conjunto de dados em uma determinada ordem .

Implemente um objeto iterável:

let obj = {
    de:1,
    para:5,}obj[Symbol.iterator] = function(){
    //Retorna um iterador return {
        atual:este.de,
        último:este.para,
        próximo(){
            if(este.atual<este.último){
                retornar {concluído:falso,valor:este.atual++}
            }outro{
                return {done:true}//fim da iteração}
        }
    }}for(seja para de obj){
    console.log(para)}

efeito de execução de código:

Observe que embora os objetos acima possam ser iterados, o material usado para iteração não é um objeto, mas o iterador (também um objeto) retornado por Symbol.iterator .

Construindo o próprio objeto em um iterador

O código acima constrói uma função interna Symbol.iterator() , que retorna um objeto iterador. Também podemos usar outra maneira de implementar iteradores: tornar o próprio objeto um iterador:

let obj = {
    de:1,
    para:5,
    [Símbolo.iterador](){
        isto.atual = isto.de;
        return this; //Retorna o próprio objeto},
    next(){//Adiciona um próximo método ao objeto if(this.current<this.to){
            retornar {concluído:falso,valor:este.atual++}
        }outro{
            retornar {concluído: verdadeiro}
        }
    }}for(seja para de obj){
    console.log(para)}

O efeito de execução do código é igual à imagem acima.

Embora o código seja mais conciso ao fazer isso, como nenhum novo objeto iterável é gerado, não podemos executar dois loops for ... of para iterar o mesmo objeto ao mesmo tempo, mas duas iterações paralelas estão no mesmo objeto. cru.

Podemos resumir o conceito de objetos iteráveis:

os chamados objetos iteráveis ​​são objetos comuns que possuem um método a mais chamado Symbol.iterator do que objetos comuns. Este método retorna um iterador.

Alternativamente, um objeto com Symbol.iterator e um método next também é um objeto iterável.

String também é iterável.

Arrays e strings são iteráveis. Podemos facilmente usar for...of para iterar os elementos de caracteres no array:

let str = '123'for(let c of str){.
    console.log(c)}

Isso também é válido para pares substitutos (caracteres estendidos UTF-16 ):

let str = '...'for(let c of str){
    console.log(c)}

O efeito de execução é o seguinte:

Iteradores de string

não são apenas for...of instruções que podem usar iteradores, também podemos chamar iteradores explicitamente:

let str = '12345'let itr = str[Symbol.iterator]()while(true){
    deixe resultado = itr.next()
    if(resultado.feito)quebra;
    console.log(result.value)}

efeito de execução de código:

O código acima realiza a operação de percorrer os caracteres de uma string. Você não acha que objetos iteráveis ​​​​não são mais tão misteriosos!

Objetos semelhantes a array e objetos iteráveis

​​Objetos semelhantes a array e objetos iteráveis ​​são muito semelhantes em termos de funções de passagem. Ambos podem acessar convenientemente elementos internos, mas ainda existem diferenças óbvias entre os dois:

1. objetos iteráveis iterable : objetos que implementam Symbol.iterator ;
2. objeto semelhante a um array semelhante array-like : possui um índice numérico e um atributo length ;

uma string é um objeto que é iterável, embora seja um objeto semelhante a um array.

Objetos iteráveis ​​e semelhantes a array geralmente não são arrays. Se quisermos converter um objeto iterável ou semelhante a um array em um array, precisamos usar o método Array.from .

Array.from

Use Array.from para converter uma string em um array:

let str = '123' let arr = Array.from(str)console.log(arr)

O efeito de execução do código é o seguinte:

Converta um objeto semelhante a um array personalizado em um array:

let obj = {
    0:'0',
    1:'1',
    2:'2',
    length:3}let arr = Array.from(obj)console.log(arr)

resultado da execução do código:

A sintaxe completa de Array.from :

Array.from(obj[, mapFunc, thisArg])

mapFunc será chamado em cada elemento iterável ou semelhante a um array antes de gerar o array. Se mapFunc for um método membro, você pode usar thisArg para fornecer this ponteiro.

Por exemplo:

let str = '12345'let arr = Array.from(str,itm=>+itm)console.log(arr)

resultado da execução do código:

Aqui, a função de mapeamento é usada para converter o array de caracteres que deve ser gerado em um array numérico.

Resumo

1. Objetos que podem usar for...of são chamados de objetos iteráveis.
2. next
iteráveis ​​são objetos que implementam o método
3. Symbol.iterator
4. Symbol.iterator base em objetos comuns.
5. , este método retorna o valor do próximo elemento;
6. o valor de retorno next método precisa atender ao formato { done:true {done:Boolean,value:nextVal} , a iteração

7. Array.from pode converter matrizes de classe e

.

8. objetos iteráveis ​​em matrizes. ;

[Recomendações relacionadas: tutoriais em vídeo de JavaScript, front-end da web]

O texto acima é uma explicação detalhada dos princípios de implementação de matrizes de classe JavaScript e objetos iteráveis. rede de código-fonte!