Explicación detallada de los principios de implementación de matrices de clases de JavaScript y objetos iterables.

[Recomendaciones relacionadas: video tutorial de JavaScript, interfaz web]

objetos iterables

es un objeto especial, y su diferencia con los objetos ordinarios no es solo el acceso secuencial y el almacenamiento de elementos. Otra diferencia importante es que las matrices son iterables, es decir, puede utilizar for ... of para acceder (iterar) todos los elementos.

Simplemente podemos hacer un pequeño experimento:

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

resultados de ejecución del código

console.log(val)}

El código anterior simplemente usa la función de iteración de la matriz. Cuando accedemos a los elementos de la matriz, no necesitamos usar el subíndice del elemento.

¿Qué sucede si usamos la declaración for ... of en un objeto normal?

dejar objeto = {
    nombre: 'xiaoming',
    age:12,}for(let para of obj){ //El código informará un error console.log(para)}

El efecto de ejecución es el siguiente:

Esto demuestra que existe una brecha iterable entre los objetos ordinarios y las matrices. Llamamos objetos con funciones iterativas objetos iterables .

Symbol.iterator

Si queremos que un objeto sea iterable, debemos agregar un método llamado Symbol.iterator al objeto (un Symbol incorporado que específicamente hace que los objetos sean iterables).

Las funciones del método incluyen:

1. Cuando se utiliza for ... of para iterar un objeto, se llamará al método Symbol.iterator , y este método debe devolver un iterador (un objeto con un método next() ).
2. Después de obtener el iterador, for ... of llamará continuamente al método next() del iterador para obtener el siguiente elemento.
3. El contenido devuelto por el método next() debe ajustarse al formato: {done:Boolean,value:any} , cuando done:true , el ciclo finaliza; de lo contrario, value es el siguiente valor.

Iterador: Iterador

es un concepto tomado de lenguajes como C++ . El principio del iterador es como un puntero. Puede obtener el elemento al que apunta o moverlo. para conseguir otros elementos. Los iteradores son similares a la expansión de subíndices en matrices. Varias estructuras de datos, como listas vinculadas ( List ), conjuntos ( Set ) y mapas ( Map ), tienen iteradores correspondientes.

Los iteradores en JS están especialmente diseñados para esta operación. El iterador obtenido cada vez siempre apunta inicialmente al primer elemento, y el iterador solo tiene el comportamiento next() hasta que se obtiene el último elemento del conjunto de datos. No podemos mover de manera flexible la posición del iterador, por lo que la tarea del iterador es atravesar los elementos del conjunto de datos en un orden determinado .

Implementar un objeto iterable:

let obj = {
    de:1,
    a:5,}obj[Símbolo.iterador] = función(){
    //Devuelve un iterador return {
        actual: esto.de,
        último: esto.a,
        próximo(){
            si(este.actual<este.último){
                devolver {hecho: falso, valor: this.current++}
            }demás{
                devolver {hecho: verdadero}//fin de iteración}
        }
    }}for(let para of obj){
    

efecto de ejecución del código

console.log(para)}

Tenga en cuenta que aunque los objetos anteriores se pueden iterar, el material utilizado para la iteración no es un objeto, sino el iterador (también un objeto) devuelto por Symbol.iterator .

Construyendo el objeto en sí en un iterador

El código anterior construye una función incorporada Symbol.iterator() , que devuelve un objeto iterador. También podemos usar otra forma de implementar iteradores: convertir el objeto en sí en un iterador:

let obj = {
    de:1,
    a:5,
    [Símbolo.iterador](){
        esto.actual = esto.de;
        devolver esto;//Devolver el objeto en sí},
    next(){//Agrega un método siguiente al objeto if(this.current<this.to){
            devolver {hecho: falso, valor: this.current++}
        }demás{
            devolver {hecho: verdadero}
        }
    }}for(let para of obj){
    console.log(para)}

El efecto de ejecución del código es el mismo que el de la imagen de arriba.

Aunque el código es más conciso al hacer esto, dado que no se genera ningún nuevo objeto iterable, no podemos ejecutar dos bucles for ... of para iterar el mismo objeto al mismo tiempo, pero hay dos iteraciones paralelas en el mismo objeto. extraño.

Podemos resumir el concepto de objetos iterables:

los llamados objetos iterables son objetos ordinarios que tienen un método llamado Symbol.iterator más que los objetos ordinarios. Este método devuelve un iterador.

Alternativamente, un objeto con Symbol.iterator y un método next también es un objeto iterable.

Las cadenas también son iterables.

Las matrices y las cadenas son iterables. Podemos usar fácilmente for...of para iterar los elementos de caracteres en la matriz:

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

Esto también es válido para pares sustitutos (caracteres extendidos UTF-16 ):

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

El efecto de ejecución es el siguiente:

Los iteradores de cadena

no son solo for...of declaraciones que pueden usar iteradores, también podemos llamar iteradores explícitamente:

let str = '12345'let itr = str[Symbol.iterator]() while(true){
    dejar resultado = itr.next()
    si(resultado.hecho)romper;
    

efecto de ejecución del código

console.log(result.value)}

El código anterior realiza la operación de atravesar los caracteres de una cadena. ¿No crees que los objetos iterables ya no son tan misteriosos?

Objetos tipo matriz y objetos iterables

Los objetos tipo matriz y los objetos iterables son muy similares en términos de funciones transversales. Ambos pueden acceder cómodamente a elementos internos, pero todavía existen diferencias obvias entre los dos:

1. objetos iterable : objetos que implementan Symbol.iterator ;
2. objeto similar a una array-like : tiene un índice numérico y un atributo length ;

una cadena es un objeto que es iterable aunque sea un objeto similar a una matriz.

Los objetos iterables y similares a una matriz generalmente no son matrices. Si queremos convertir un objeto iterable o similar a una matriz en una matriz, debemos usar el método Array.from .

Array.from

Utilice Array.from para convertir una cadena en una matriz:

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

El efecto de ejecución del código es el siguiente:

Convierta un objeto personalizado similar a una matriz en una matriz:

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

resultado de la ejecución del código:

La sintaxis completa de Array.from :

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

mapFunc se llamará en cada elemento iterable o similar a una matriz antes de generar la matriz. Si mapFunc es un método miembro, puede usar thisArg para proporcionar this puntero.

Por ejemplo:

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

resultado de la ejecución del código:

Aquí, la función de mapeo se utiliza para convertir la matriz de caracteres que debe generarse en una matriz numérica.

Resumen

1. Los objetos que pueden usar for...of se denominan objetos iterables.
2. Los objetos iterables son objetos que implementan Symbol.iterator sobre la base de objetos ordinarios.
3. El método Symbol.iterator devuelve un iterador
4. next , este método devuelve el valor del siguiente elemento;
el valor

5. Array.from

6. retorno next método debe cumplir con el formato {done:Boolean,value:nextVal} . Cuando done:true , la iteración finaliza.

7. objetos iterables en matrices;

[Recomendaciones relacionadas: tutoriales en video de JavaScript, interfaz web]

Lo anterior es una explicación detallada de los principios de implementación de las matrices de clases de JavaScript y los objetos iterables. red de código fuente!