Prefacio
Para un intercambio tan detallado de un ciclo, creo que obtendrá algo después de leerlo. Este artículo es compartido por el autor de la columna inicial de la clase de lectura matutina @ compiled youth.
El texto comienza aquí ~
En ECMAScript5 (ES5 para abreviar), hay tres bucles for, a saber:
Simple para bucle
for-in
para cada
En ECMAScript6 (ES6 para abreviar) lanzado en junio de 2015, se agregó un nuevo bucle, que es:
para-de
Echemos un vistazo a estos cuatro bucles for.
Simple para bucle
Echemos un vistazo a la forma más común de escribir:
Cuando la longitud de la matriz no cambia durante el ciclo, debemos almacenar la longitud de la matriz en una variable, lo que obtendrá una mejor eficiencia. La siguiente es una forma mejorada de escritura:
for-in
En circunstancias normales, podemos usar for-in para recorrer el contenido de la matriz, el código es el siguiente:
En general, los resultados de la operación son los siguientes:
Pero hacerlo a menudo causa problemas.
La verdad sobre for-in
El bucle for-in recorre las propiedades del objeto, no el índice de la matriz. Por lo tanto, los objetos atravesados por for-in no se limitan a matrices, sino que también se pueden atravesar objetos. Los ejemplos son los siguientes:
Los resultados son los siguientes:
Cabe señalar que el orden de recorrido for-in de los atributos no es cierto, es decir, el orden de los resultados de salida no tiene nada que ver con el orden de los atributos en el objeto, ni con el orden alfabético de los atributos, ni con ningún otro orden.
La verdad sobre Array
Array es un objeto en Javascript y el índice de Array es el nombre de la propiedad. De hecho, la "matriz" en Javascript es un poco engañosa. La matriz en Javascript no es como las matrices en la mayoría de los otros lenguajes. Primero, el Array en Javascript no es continuo en la memoria Segundo, el índice del Array no se refiere al desplazamiento. De hecho, el índice de Array no es de tipo Number, sino de String. La razón por la que podemos usar la redacción como arr [0] correctamente es que el idioma puede convertir automáticamente 0 del tipo Número a "0" del tipo Cadena. Por lo tanto, nunca hay un índice de matriz en Javascript, sino solo propiedades como "0", "1", etc. Curiosamente, cada objeto Array tiene una propiedad de longitud, lo que hace que se comporte más como matrices en otros lenguajes. Pero, ¿por qué no genera la propiedad de longitud al atravesar el objeto Array? Esto se debe a que for-in solo puede atravesar "propiedades enumerables". La longitud es una propiedad no enumerable. De hecho, los objetos Array tienen muchas otras propiedades no enumerables.
Ahora, regresemos y veamos el ejemplo de usar for-in para hacer un bucle en la matriz. Modifiquemos el ejemplo anterior de atravesar la matriz:
El resultado de la operación es:
Vemos que el bucle for-in accede a nuestro nuevo atributo "nombre", porque for-in atraviesa todos los atributos del objeto, no solo el "índice". Al mismo tiempo, debe tenerse en cuenta que los valores de índice que se generan aquí, es decir, "0", "1" y "2", no son del tipo Número, sino del tipo Cadena, porque se generan como atributos, no como índices. ¿Eso significa que solo podemos generar el contenido de la matriz sin agregar nuevas propiedades a nuestro objeto Array? la respuesta es negativa. Porque for-in no solo atraviesa los atributos de la matriz en sí, también atraviesa todos los atributos enumerables en la cadena de prototipos de matriz. Veamos un ejemplo:
El resultado de la operación es:
En este punto, podemos encontrar que for-in no es adecuado para atravesar los elementos en el Array, es más adecuado para atravesar las propiedades del objeto, que es también la intención original de su creación. Hay una excepción, es decir, matrices dispersas. Considere el siguiente ejemplo:
For-in solo atraviesa entidades existentes. En el ejemplo anterior, for-in atraviesa 3 veces (los elementos que atraviesan los atributos "0", "100" y "10000" respectivamente, y el bucle for ordinario atravesará 10001 veces) . Por lo tanto, si se maneja correctamente, el for-in también puede jugar un papel muy importante en atravesar los elementos en la matriz.
Para evitar la duplicación de esfuerzos, podemos ajustar el código anterior:
Los ejemplos de uso son los siguientes:
rendimiento for-in
Como se mencionó anteriormente, cada operación de iteración buscará propiedades de ejemplo o prototipo al mismo tiempo. Cada iteración del bucle for-in incurrirá en más gastos generales, por lo que es más lento que otros tipos de bucle, y la velocidad es generalmente 1/7 de otros tipos de bucle. Por lo tanto, a menos que necesite iterar explícitamente sobre un objeto con un número desconocido de atributos, debe evitar el uso de bucles for-in. Si necesita recorrer un número limitado de listas de atributos conocidos, es más rápido utilizar otros bucles, como el siguiente ejemplo:
En el código anterior, los atributos del objeto se almacenan en una matriz. En comparación con la búsqueda de entrada para cada atributo, el código solo se centra en el atributo dado, lo que ahorra la sobrecarga y el tiempo del ciclo.
para cada
En ES5, se introduce un nuevo bucle, el bucle forEach.
resultado de la operación:
El método forEach ejecuta la función de devolución de llamada una vez para cada elemento de la matriz que contiene un valor válido. Los elementos que se han eliminado (utilizando el método de eliminación, etc.) o que nunca se han asignado se omitirán (excluyendo aquellos elementos con valores nulos o indefinidos). A la función de devolución de llamada se le pasarán tres parámetros a su vez:
El valor del elemento actual en la matriz;
El índice del elemento actual en la matriz;
El objeto de matriz en sí mismo;
Cabe señalar que el rango de forEach traversal se determinará antes de la primera llamada a la devolución de llamada. Los elementos agregados a la matriz después de llamar a forEach no serán accedidos por devolución de llamada. Si se cambia el valor existente, el valor que se pasa a la devolución de llamada es el valor en el momento en que cada uno los atraviesa. Los elementos eliminados no se recorrerán.
resultado de la operación:
El índice aquí es de tipo Número y no atraviesa las propiedades en la cadena del prototipo como for-in.
Por lo tanto, al usar forEach, no necesitamos declarar específicamente el índice y los elementos atravesados, porque todos se usan como parámetros de la función de devolución de llamada.
Además, forEach atravesará todos los elementos de la matriz, pero ES5 define algunos otros métodos útiles, la siguiente es una parte:
cada: el bucle regresa después del primer retorno falso
algunos: el bucle regresa después del primer retorno verdadero
filtro: devuelve una nueva matriz, los elementos de la matriz satisfacen la función de devolución de llamada
mapa: procesa los elementos en la matriz original antes de regresar
reducir: procesa los elementos en la matriz a su vez, usa el resultado del procesamiento anterior como entrada del siguiente procesamiento y, finalmente, obtén el resultado final.
para cada actuación
En primer lugar, agradezco a @papa pa por el recordatorio, solo para descubrir que mi comprensión anterior es incorrecta.
Puedes mirar jsPerf Los resultados de las pruebas en diferentes navegadores son que forEach no es tan rápido como forEach. Si coloca el código de prueba en la consola, puede obtener resultados diferentes, la razón principal es que el entorno de ejecución de la consola es diferente del entorno de ejecución del código real.
para-de
Primero veamos un ejemplo:
El resultado de la operación es:
¿Por qué introducir for-of?
Para responder a esta pregunta, primero echemos un vistazo a los defectos de los tres bucles for antes de ES6:
porque cada uno no puede romper y volver;
La desventaja de for-in es más obvia: no solo atraviesa los elementos de la matriz, sino que también atraviesa las propiedades personalizadas, e incluso se accede a las propiedades de la cadena del prototipo. Además, el orden de atravesar los elementos de la matriz puede ser aleatorio.
Por lo tanto, en vista de las deficiencias anteriores, debemos mejorar el bucle for original. Pero ES6 no romperá el código JS que ha escrito. Actualmente, miles de sitios web dependen de bucles for-in, y algunos de ellos incluso lo utilizan para recorrer matrices. Si desea agregar soporte para el recorrido de matriz modificando el bucle for-in, esto se volverá aún más confuso, por lo que el Comité de Estándares ha agregado una nueva sintaxis de bucle en ES6 para resolver el problema actual, es decir, for-of.
Entonces, ¿qué puede hacer?
En comparación con forEach, puede responder correctamente para interrumpir, continuar y regresar.
El bucle for-of no solo admite matrices, sino que también admite la mayoría de objetos similares a matrices, como los objetos de lista de nodos DOM.
El bucle for-of también admite el cruce de cadenas, que trata la cadena como una serie de caracteres Unicode para atravesar.
for-of también admite el recorrido de objetos Map y Set (ambos son tipos nuevos en ES6).
En resumen, el bucle for-of tiene las siguientes características:
Esta es la sintaxis más concisa y sencilla para atravesar elementos de matriz.
Este método evita todos los defectos de los bucles for-in.
A diferencia de forEach, puede responder correctamente a las declaraciones de interrupción, continuación y devolución.
Puede atravesar no solo matrices, sino también objetos similares a matrices y otros objetos iterables.
Pero debe tenerse en cuenta que el bucle for-of no admite objetos ordinarios, pero si desea iterar las propiedades de un objeto, puede usar el bucle for-in (este también es su trabajo).
Lo último que hay que decir es que otro método introducido por ES6 también puede atravesar los valores de una matriz, y ese es Iterator. Último ejemplo:
