Cómo crear una matriz asociativa en JavaScript. JQuery - Iterar matriz, definición y aplicación de objetos y elementos

I. Bucle a través de matrices reales
1. ForEach y métodos relacionados
2. En bucle
3. Uso correcto de for ... in loop
4. For ... of loop (uso implícito de un iterador)
5. Uso explícito de un iterador
1. Usando métodos para iterar sobre matrices reales
2. Conversión a una matriz real
3. Una nota sobre los objetos en tiempo de ejecución

I. Bucle a través de matrices reales

Por el momento, hay tres formas de iterar sobre los elementos de una matriz real:

array.prototype.forEach método;
clásico para bucle;
Un bien formado para ... en bucle.

Además, pronto, con la aparición del nuevo estándar ECMAScript 6 (ES 6), se esperan dos formas más:

for ... of loop (uso implícito de un iterador);
uso explícito de un iterador.

1. El método forEach y métodos relacionados

Si su proyecto está diseñado para admitir las capacidades del estándar ECMAScript 5 (ES5), puede utilizar una de sus innovaciones: el método forEach.

Ejemplo de uso:
var a \u003d ["a", "b", "c"]; a.forEach (función (entrada) (console.log (entrada);));
En general, el uso de forEach requiere la biblioteca de emulación es5-shim para los navegadores que no tienen soporte nativo para este método. Estos incluyen IE 8 y versiones anteriores, que todavía se utilizan en la actualidad.

La ventaja de forEach es que no es necesario declarar variables locales para almacenar el índice y el valor del elemento de matriz actual, ya que se pasan automáticamente a la función de devolución de llamada como argumentos.

Si le preocupa el costo potencial de devolver una llamada por cada artículo, no se preocupe y lea esto.

ForEach está diseñado para iterar sobre todos los elementos de una matriz, pero además, ES5 ofrece varios métodos más útiles para iterar sobre todos o algunos de los elementos, además de realizar algunas acciones con ellos:

cada: devuelve verdadero si para cada elemento de la matriz la devolución de llamada devuelve un valor que se convierte en verdadero.
some: devuelve verdadero si para al menos un elemento de la matriz la devolución de llamada devuelve un valor que se convierte en verdadero.
filtro: crea una nueva matriz que contiene los elementos de la matriz original para los que la devolución de llamada devuelve verdadero.
map: crea una nueva matriz que contiene los valores devueltos por la devolución de llamada.
reducir: reduce una matriz a un solo valor, aplicando la devolución de llamada a cada elemento de la matriz, comenzando por el primero (puede ser útil para calcular la suma de los elementos de la matriz y otras funciones finales).
reduceRight: funciona de manera similar a reducir, pero itera sobre los elementos en orden inverso.

2. El bucle for

Buen viejo para las reglas:

Var a \u003d ["a", "b", "c"]; índice var; para (índice \u003d 0; índice< a.length; ++index) { console.log(a); }
Si la longitud de la matriz permanece sin cambios a lo largo de todo el ciclo, y el ciclo en sí pertenece a una pieza de código crítica para el rendimiento (lo cual es poco probable), entonces puede usar la versión "más óptima" de for para almacenar la longitud de la matriz:

Var a \u003d ["a", "b", "c"]; var index, len; para (índice \u003d 0, len \u003d a. longitud; índice< len; ++index) { console.log(a); }
En teoría, este código debería ejecutarse un poco más rápido que el anterior.

Si el orden de iteración no es importante, puede ir aún más lejos en términos de optimización y deshacerse de la variable para almacenar la longitud de la matriz cambiando el orden de iteración al opuesto:

Var a \u003d ["a", "b", "c"]; índice var; para (índice \u003d a.longitud - 1; índice\u003e \u003d 0; - índice) (consola.log (a);)
Sin embargo, en los motores JavaScript modernos, estos juegos optimizados generalmente no significan nada.

3. Uso correcto del bucle for ... in

Si se le aconseja utilizar un bucle for ... in, recuerde que iterar sobre matrices no es para lo que está diseñado. Contrariamente a la idea errónea común, el bucle for ... in no itera sobre los índices de la matriz, sino sobre las propiedades enumeradas del objeto.

Sin embargo, en algunos casos, como iterar sobre matrices dispersas, for ... in puede ser útil, siempre que tome algunas precauciones, como se muestra en el siguiente ejemplo:

// a es una matriz dispersa var a \u003d; a \u003d "a"; a \u003d "b"; a \u003d "c"; para (clave var en a) (if (a.hasOwnProperty (clave) && /^0$|^\\d*$/.test(key) && clave<= 4294967294) { console.log(a); } }
En este ejemplo, en cada iteración del ciclo, se realizan dos comprobaciones:

que la matriz tiene su propia propiedad denominada key (no heredada de su prototipo).
esa clave es una cadena que contiene la notación decimal de un número entero cuyo valor es menor que 4294967294. ¿De dónde viene el último número? De la definición de un índice de matriz en ES5, de la cual se sigue que el índice más grande que puede tener un elemento en una matriz es (2 ^ 32 - 2) \u003d 4294967294.

Por supuesto, tales comprobaciones tomarán más tiempo al ejecutar el ciclo. Pero en el caso de una matriz dispersa, este método es más eficiente que un bucle for, ya que en este caso solo se iteran los elementos que están definidos explícitamente en la matriz. Entonces, en el ejemplo anterior, solo se realizarán 3 iteraciones (para los índices 0, 10 y 10000), frente a 10001 en el ciclo for.

Para no escribir un código de verificación tan engorroso cada vez que necesite iterar sobre una matriz, puede organizarlo como una función separada:

Función arrayHasOwnIndex (matriz, clave) (return matriz.hasOwnProperty (clave) && /^0$|^\\d*$/.test(key) && clave<= 4294967294; }
Entonces el cuerpo del bucle del ejemplo se reducirá significativamente:

For (ingrese a) (if (arrayHasOwnIndex (a, key)) (console.log (a);))
El código de verificación anterior es universal, adecuado para todos los casos. Pero en su lugar, puede usar una versión más corta, aunque formalmente no del todo correcta, pero adecuada para la mayoría de los casos:

For (ingrese a) (if (a.hasOwnProperty (clave) && String (parseInt (clave, 10)) \u003d\u003d\u003d clave) (console.log (a);))

4. El bucle for ... of (uso implícito de un iterador)

ES6, aunque todavía está en estado de borrador, debería introducir iteradores en JavaScript.

Iterador es un protocolo implementado por objetos que define una forma estándar de obtener una secuencia de valores (finita o infinita).
Un iterador es un objeto en el que se define el método next (): una función sin argumentos que devuelve un objeto con dos propiedades:

done (booleano): verdadero si el iterador ha llegado al final de la secuencia que se está iterando. De lo contrario, falso.
valor: define el valor devuelto por el iterador. Puede estar indefinido (ausente) si la propiedad done es verdadera.

Muchos objetos incorporados, incl. las matrices reales tienen iteradores predeterminados. La forma más sencilla de utilizar un iterador en matrices reales es utilizar la nueva construcción para ... de.

Un ejemplo de uso para ... de:

Var val; var a \u003d ["a", "b", "c"]; para (val de a) (console.log (val);)
En el ejemplo anterior, el bucle for ... of llama implícitamente al iterador del objeto Array para obtener cada valor de la matriz.

5. Uso explícito de un iterador

Los iteradores también se pueden usar explícitamente, sin embargo, en este caso el código se vuelve mucho más complicado en comparación con el bucle for ... of. Se parece a esto:

Var a \u003d ["a", "b", "c"]; var it \u003d a.entries (); var entrada; while (! (entrada \u003d it.next ()). done) (console.log (entrada.valor);)
En este ejemplo, el método Array.prototype.entries devuelve un iterador que se utiliza para mostrar los valores de la matriz. En cada iteración, entry.value contiene una matriz como [clave, valor].

II. Recorrer objetos similares a matrices

Además de las matrices reales, JavaScript también contiene objetos en forma de matriz ... Lo que tienen en común con las matrices reales es que tienen una propiedad de longitud y propiedades con nombres en forma de números correspondientes a los elementos de la matriz. Los ejemplos incluyen el DOM de la colección NodeList y los argumentos pseudo-matriz disponibles dentro de cualquier función / método.

1. Uso de métodos de iteración sobre matrices reales

Al menos la mayoría, si no todos, los métodos de iteración sobre matrices reales se pueden utilizar para iterar sobre objetos similares a matrices.

Las construcciones for y for ... in se pueden aplicar a objetos similares a matrices exactamente de la misma manera que a las matrices reales.

ForEach y otros métodos Array.prototype también se aplican a objetos tipo matriz. Para hacer esto, use una llamada a Function.call o Function.apply.

Por ejemplo, si desea solicitar forEach a la propiedad childNodes de un objeto Node, puede hacerlo así:

Array.prototype.forEach.call (node.childNodes, function (child) (// haz algo con el objeto child));
Para facilitar la reutilización de esta técnica, puede declarar una referencia al método Array.prototype.forEach en una variable separada y utilizarla como abreviatura:

// (Esto supone que todo el código siguiente está en el mismo ámbito) var forEach \u003d Array.prototype.forEach; // ... forEach.call (node.childNodes, function (child) (// haz algo con el objeto child));
Si el objeto similar a una matriz tiene un iterador, entonces se puede usar explícita o implícitamente para iterar sobre el objeto de la misma manera que para las matrices reales.

2. Convierta a una matriz real

También hay otra forma muy simple de iterar sobre un objeto similar a una matriz: conviértalo en una matriz real y use cualquiera de los métodos anteriores para iterar sobre matrices reales. Para la conversión, puede utilizar el método genérico Array.prototype.slice, que se puede aplicar a cualquier objeto similar a una matriz. Esto se hace de manera muy simple, como se muestra en el siguiente ejemplo:

Var trueArray \u003d Array.prototype.slice.call (arrayLikeObject, 0);
Por ejemplo, si desea convertir una colección NodeList en una matriz real, necesita un código como este:

Var divs \u003d Array.prototype.slice.call (document.querySelectorAll ("div"), 0);
Actualizar: Como se señaló en los comentarios de rock y torbasow, en ES6 puede usar el método más descriptivo Array.from en lugar de Array.prototype.slice.

3. Una nota sobre los objetos en tiempo de ejecución

Si aplica métodos Array.prototype a objetos en tiempo de ejecución (como colecciones DOM), debe tener en cuenta que no se garantiza que estos métodos funcionen correctamente en todos los entornos de tiempo de ejecución (incluidos los navegadores). Depende del comportamiento de un objeto particular en un tiempo de ejecución particular, más precisamente, de cómo se implementa la operación abstracta HasProperty en este objeto. El problema es que el propio estándar ES5 permite la posibilidad de que el objeto se comporte mal con respecto a esta operación (ver §8.6.2).

Por lo tanto, es importante probar el funcionamiento de los métodos Array.prototype en cada tiempo de ejecución (navegador) en el que planea utilizar su aplicación.

I. Bucle a través de matrices reales
1. ForEach y métodos relacionados
2. En bucle
3. Uso correcto de for ... in loop
4. For ... of loop (uso implícito de un iterador)
5. Uso explícito de un iterador
II. Recorrer objetos similares a matrices
1. Usando métodos para iterar sobre matrices reales
2. Conversión a una matriz real
3. Una nota sobre los objetos en tiempo de ejecución

I. Bucle a través de matrices reales

Por el momento, hay tres formas de iterar sobre los elementos de una matriz real:

array.prototype.forEach método;
clásico para bucle;
Un bien formado para ... en bucle.

Además, pronto, con la aparición del nuevo estándar ECMAScript 6 (ES 6), se esperan dos formas más:

for ... of loop (uso implícito de un iterador);
uso explícito de un iterador.

1. El método forEach y métodos relacionados

Si su proyecto está diseñado para admitir las capacidades del estándar ECMAScript 5 (ES5), puede utilizar una de sus innovaciones: el método forEach.

Ejemplo de uso:

Var a \u003d ["a", "b", "c"]; a.forEach (función (entrada) (console.log (entrada);));

En general, el uso de forEach requiere la biblioteca de emulación es5-shim para los navegadores que no tienen soporte nativo para este método. Estos incluyen IE 8 y versiones anteriores, que todavía se utilizan en la actualidad.

Si le preocupa el costo potencial de devolver una llamada por cada artículo, no se preocupe y lea esto.

forEach está diseñado para iterar sobre todos los elementos de una matriz, pero aparte de eso, ES5 ofrece varios métodos más útiles para iterar sobre todos o algunos de los elementos, además de realizar algunas acciones con ellos:

cada: devuelve verdadero si para cada elemento de la matriz la devolución de llamada devuelve un valor que se convierte en verdadero.
some: devuelve verdadero si para al menos un elemento de la matriz la devolución de llamada devuelve un valor que se convierte en verdadero.
filtro: crea una nueva matriz que contiene los elementos de la matriz original para los que la devolución de llamada devuelve verdadero.
map: crea una nueva matriz que contiene los valores devueltos por la devolución de llamada.
reducir: reduce una matriz a un solo valor, aplicando la devolución de llamada a cada elemento de la matriz, comenzando por el primero (puede ser útil para calcular la suma de los elementos de la matriz y otras funciones finales).
reduceRight: funciona de manera similar a reducir, pero itera sobre los elementos en orden inverso.

2. El bucle for

Buen viejo para las reglas:

Var a \u003d ["a", "b", "c"]; índice var; para (índice \u003d 0; índice< a.length; ++index) { console.log(a); }

Si la longitud de la matriz permanece sin cambios a lo largo de todo el ciclo, y el ciclo en sí pertenece a una pieza de código crítica para el rendimiento (lo cual es poco probable), entonces puede usar la versión "más óptima" de for para almacenar la longitud de la matriz:

Var a \u003d ["a", "b", "c"]; var index, len; para (índice \u003d 0, len \u003d a. longitud; índice< len; ++index) { console.log(a); }

En teoría, este código debería ejecutarse un poco más rápido que el anterior.

Var a \u003d ["a", "b", "c"]; índice var; para (índice \u003d a.longitud - 1; índice\u003e \u003d 0; - índice) (consola.log (a);)

Sin embargo, en los motores JavaScript modernos, estos juegos optimizados generalmente no significan nada.

3. Uso correcto del bucle for ... in

Sin embargo, en algunos casos, como iterar sobre matrices dispersas, for ... in puede ser útil, siempre que tome algunas precauciones, como se muestra en el siguiente ejemplo:

// a es una matriz dispersa var a \u003d; a \u003d "a"; a \u003d "b"; a \u003d "c"; para (clave var en a) (if (a.hasOwnProperty (clave) && /^0$|^d*$/.test(key) && clave<= 4294967294) { console.log(a); } }

En este ejemplo, en cada iteración del ciclo, se realizan dos comprobaciones:

que la matriz tiene su propia propiedad denominada key (no heredada de su prototipo).
esa clave es una cadena que contiene la notación decimal de un número entero cuyo valor es menor que 4294967294. ¿De dónde viene el último número? De la definición de un índice de matriz en ES5, de la cual se sigue que el índice más grande que puede tener un elemento en una matriz es (2 ^ 32 - 2) \u003d 4294967294.

Para no escribir un código de verificación tan engorroso cada vez que necesite iterar sobre una matriz, puede organizarlo como una función separada:

Función arrayHasOwnIndex (matriz, clave) (return matriz.hasOwnProperty (clave) && /^0$|^d*$/.test(key) && clave<= 4294967294; }

Entonces el cuerpo del bucle del ejemplo se reducirá significativamente:

For (ingrese a) (if (arrayHasOwnIndex (a, key)) (console.log (a);))

El código de verificación anterior es universal, adecuado para todos los casos. Pero en su lugar, puede usar una versión más corta, aunque formalmente no del todo correcta, pero adecuada para la mayoría de los casos:

For (ingrese a) (if (a.hasOwnProperty (clave) && String (parseInt (clave, 10)) \u003d\u003d\u003d clave) (console.log (a);))

4. El bucle for ... of (uso implícito de un iterador)

ES6, aunque todavía está en estado de borrador, debería introducir iteradores en JavaScript.

Iterador es un protocolo implementado por objetos que define una forma estándar de obtener una secuencia de valores (finita o infinita).
Un objeto tiene un iterador si el método next () está definido en él: una función sin argumentos que devuelve un objeto con dos propiedades:

done (booleano): verdadero si el iterador ha llegado al final de la secuencia que se está iterando. De lo contrario, falso.
valor: define el valor devuelto por el iterador. Puede estar indefinido (ausente) si la propiedad done es verdadera.

Un ejemplo de uso para ... de:

Var val; var a \u003d ["a", "b", "c"]; para (val de a) (console.log (val);)

En el ejemplo anterior, el bucle for ... of llama implícitamente al iterador del objeto Array para obtener cada valor de la matriz.

5. Uso explícito de un iterador

Los iteradores también se pueden usar explícitamente, sin embargo, en este caso el código se vuelve mucho más complicado en comparación con el bucle for ... of. Se parece a esto:

Var a \u003d ["a", "b", "c"]; var entrada; while (! (entrada \u003d a.siguiente ()). hecho) (consola.log (entrada.valor);)

II. Recorrer objetos similares a matrices

1. Uso de métodos de iteración sobre matrices reales

Al menos la mayoría, si no todos, los métodos de iteración sobre matrices reales se pueden utilizar para iterar sobre objetos similares a matrices.

Las construcciones for y for ... in se pueden aplicar a objetos similares a matrices exactamente de la misma manera que a las matrices reales.

forEach y otros métodos Array.prototype también se aplican a objetos tipo matriz. Para hacer esto, use una llamada a Function.call o Function.apply.

Por ejemplo, si desea solicitar forEach a la propiedad childNodes de un objeto Node, puede hacerlo así:

Array.prototype.forEach.call (node.childNodes, function (child) (// haz algo con el objeto child));

Para facilitar la reutilización de esta técnica, puede declarar una referencia al método Array.prototype.forEach en una variable separada y utilizarla como abreviatura:

Si el objeto similar a una matriz tiene un iterador, entonces se puede usar explícita o implícitamente para iterar sobre el objeto de la misma manera que para las matrices reales.

2. Convierta a una matriz real

Var trueArray \u003d Array.prototype.slice.call (arrayLikeObject, 0);

Por ejemplo, si desea convertir una colección NodeList en una matriz real, necesita un código como este:

Var divs \u003d Array.prototype.slice.call (document.querySelectorAll ("div"), 0);

3. Una nota sobre los objetos en tiempo de ejecución

Por lo tanto, es importante probar el funcionamiento de los métodos Array.prototype en cada tiempo de ejecución (navegador) en el que planea utilizar su aplicación.

los para cada () El método ejecuta una función proporcionada una vez para cada elemento de matriz.

La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.

Sintaxis

arr .forEach (devolución de llamada (valorActual [, índice [, matriz]]) [, esteArg])

Parámetros

Función de devolución de llamada para ejecutar en cada elemento. Acepta entre uno y tres argumentos: currentValue El elemento actual que se está procesando en la matriz. index Opcional El índice currentValue en la matriz. array Opcional Se llamó al array forEach (). thisArg Valor opcional para usar como this al ejecutar la devolución de llamada.

Valor devuelto

Descripción

forEach () llama a una función de devolución de llamada proporcionada una vez para cada elemento de una matriz en orden ascendente. No se invoca para propiedades de índice que se han eliminado o no se han inicializado. (Para matrices dispersas ,.)

la devolución de llamada se invoca con tres argumentos:

el valor del elemento
el índice del elemento
el objeto Array que se atraviesa

Si se proporciona un parámetro thisArg a forEach (), se utilizará como valor de devolución de llamada. El valor de thisArg finalmente observable por devolución de llamada se determina de acuerdo con las reglas habituales para determinar esto visto por una función.

El rango de elementos procesados \u200b\u200bpor forEach () se establece antes de la primera invocación de devolución de llamada. Los elementos que se agregan a la matriz después de que comience la llamada a forEach () no serán visitados por la devolución de llamada. Si los elementos existentes de la matriz se cambian o eliminan, su valor como pasado a la devolución de llamada será el valor en el momento en que forEach () los visite; los elementos que se eliminan antes de ser visitados no se visitan. Si se eliminan elementos que ya fueron visitados (por ejemplo, usando shift ()) durante la iteración, se omitirán los elementos posteriores. (Vea este ejemplo a continuación).

forEach () ejecuta la función de devolución de llamada una vez para cada elemento de la matriz; a diferencia de map () o reduce (), siempre devuelve el valor indefinido y no es encadenable. El caso de uso típico es ejecutar efectos secundarios al final de una cadena.

forEach () no muta la matriz en la que se llama. (Sin embargo, la devolución de llamada puede hacerlo)

No hay forma de detener o romper un bucle forEach () que no sea lanzando una excepción. Si necesita tal comportamiento, el método forEach () es la herramienta incorrecta.

La terminación anticipada se puede lograr con:

Métodos de matriz: every (), some (), find () y findIndex () prueban los elementos de la matriz con un predicado que devuelve un valor verdadero para determinar si se requiere una iteración adicional.

Ejemplos

Sin operación para valores no inicializados (matrices dispersas)

const arraySparse \u003d let numCallbackRuns \u003d 0 arraySparse.forEach (function (element) (console.log (element) numCallbackRuns ++)) console.log ("numCallbackRuns:", numCallbackRuns) // 1 // 3 // 7 // numCallbackRuns: 3 // comentario: como puede ver, el valor perdido entre 3 y 7 no invocó la función de devolución de llamada.

Convertir un bucle for en forEach

const items \u003d ["item1", "item2", "item3"] const copy \u003d // antes para (sea i \u003d 0; i< items.length; i++) { copy.push(items[i]) } // after items.forEach(function(item){ copy.push(item) })

Imprimir el contenido de una matriz

Nota: Para mostrar el contenido de una matriz en la consola, puede usar console.table (), que imprime una versión formateada de la matriz.

El siguiente ejemplo ilustra un enfoque alternativo, utilizando forEach ().

El siguiente código registra una línea para cada elemento de una matriz:

Función logArrayElements (elemento, índice, matriz) (console.log ("a [" + índice + "] \u003d" + elemento)) // Observe que el índice 2 se omite, ya que no hay ningún elemento en // esa posición en el matriz ... .forEach (logArrayElements) // registros: // a \u003d 2 // a \u003d 5 // a \u003d 9

Usando thisArg

El siguiente ejemplo (artificial) actualiza las propiedades de un objeto de cada entrada en la matriz:

Función Contador () (this.sum \u003d 0 this.sum + \u003d entry ++ this.count), esta función (array) (array.forEach (function (entry) (this.sum + \u003d entry ++ this.count), this ) // ^ ---- Nota) const obj \u003d new Counter () obj.add () obj.count // 3 obj.sum // 16

Dado que el parámetro thisArg (this) se proporciona a forEach (), se pasa a la devolución de llamada cada vez que se invoca. La devolución de llamada lo usa como este valor.

Una función de copia de objeto

El siguiente código crea una copia de un objeto determinado.

Hay diferentes formas de crear una copia de un objeto. Lo siguiente es solo una forma y se presenta para explicar cómo funciona Array.prototype.forEach () mediante el uso de ECMAScript 5 Object. * Funciones de propiedad meta.

Función copy (obj) (const copy \u003d Object.create (Object.getPrototypeOf (obj)) const propNames \u003d Object.getOwnPropertyNames (obj) propNames.forEach (function (name) (const desc \u003d Object.getOwnPropertyDescriptor (obj, name) Object .defineProperty (copy, name, desc))) return copy) const obj1 \u003d (a: 1, b: 2) const obj2 \u003d copy (obj1) // obj2 parece obj1 ahora

Si la matriz se modifica durante la iteración, es posible que se omitan otros elementos.

El siguiente ejemplo registra "uno", "dos", "cuatro".

Cuando la entrada que contiene el valor "(! LANG: dos" is reached, the first entry of the whole array is shifted off-resulting in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped.!}

forEach () no hace una copia de la matriz antes de iterar.

Sea palabras \u003d ["uno", "dos", "tres", "cuatro"] palabras. Para cada (función (palabra) (consola.log (palabra) if (palabra \u003d\u003d\u003d "dos") (palabras.shift ( )))) // uno // dos // cuatro

Aplanar una matriz

El siguiente ejemplo está aquí solo con fines de aprendizaje. Si desea aplanar una matriz utilizando métodos integrados, puede usar Array.prototype.flat () (que se espera que forme parte de ES2019 y ya está implementado en algunos navegadores).

/ ** * Aplana la matriz pasada en una matriz unidimensional * * @params (matriz) arr * @returns (matriz) * / function flatten (arr) (resultado constante \u003d arr.forEach ((i) \u003d\u003e (if (Array. isArray (i)) (result.push (... flatten (i))) else (result.push (i)))) return result) // Uso constante problema \u003d, 8, 9]] aplanar (problema) / /

Nota sobre el uso de promesas o funciones asíncronas

let ratings \u003d let sum \u003d 0 let sumFunction \u003d async function (a, b) (return a + b) ratings.forEach (async function (rating) (sum \u003d await sumFunction (sum, rating))) console.log (sum) // Salida esperada: 14 // Salida real: 0

Especificaciones

Especificación	Estado	Comentario
Borrador más reciente de ECMAScript (ECMA-262)	Sequía
ECMAScript 2015 (6.a edición, ECMA-262) La definición de "Array.prototype.forEach" en esa especificación.	Estándar
ECMAScript 5.1 (ECMA-262) La definición de "Array.prototype.forEach" en esa especificación.	Estándar	Definición inicial. Implementado en JavaScript 1.6.

Compatibilidad del navegador

La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte https://github.com/mdn/browser-compat-data y envíenos una solicitud de extracción.

Actualizar datos de compatibilidad en GitHub

	Escritorio						Móvil						Servidor
	Cromo	Borde	Firefox	explorador de Internet	Ópera	Safari	Vista web de Android	Chrome para Android	Firefox para Android	Opera para Android	Safari en iOS	Internet de Samsung	Node.js
para cada	Soporte completo de Chrome 1	Soporte completo de Edge 12	Soporte completo de Firefox 1.5	IE Soporte completo 9	Opera Soporte completo Sí	Safari Soporte completo 3	Soporte completo de WebView Android ≤37	Soporte completo de Chrome Android 18	Soporte completo para Firefox Android 4	Opera Android Soporte completo Sí	Safari iOS Soporte completo 1	Samsung Internet Android Soporte completo 1.0	nodejs Soporte completo Sí

Un artículo en el que veremos ejemplos del uso de jQuery en cada función y método.

La biblioteca jQuery tiene 2 entidades diferentes nombradas cada una.

La primera (jQuery.each) es una función jQuery genérica que se puede usar para iterar sobre los elementos de una matriz u objeto.

El segundo (cada uno) es un método que se aplica a un conjunto de elementos para recorrerlos.

Cada bucle (jQuery.each). Ejemplos de uso

La sintaxis de cada función es:

// matriz u objeto - una matriz o un objeto cuyos elementos o propiedades deben iterarse sobre // devolución de llamada - una función que se ejecutará para cada elemento de una matriz o propiedad de objeto $ .each (matriz u objeto, devolución de llamada);

Veamos ejemplos para trabajar con cada función.

Ejemplo 1. En él, iteraremos sobre todos los elementos del arreglo.

// una matriz de 3 líneas var arr \u003d ["Coche", "Camión", "Autobús"]; // iterar sobre la matriz arr $ .each (arr, function (index, value) (// acciones que se realizarán para cada elemento de la matriz // índice es el índice actual del elemento de matriz (número) // valor es el valor del elemento de matriz actual // imprime el índice y el valor de la matriz en la consola console.log ("Índice:" + índice + "; Valor:" + valor);)); / * Resultado (en consola): Índice: 0; Valor: Índice de coches: 1; Valor: Índice de camiones: 2; Valor: Bus * /

En el código anterior, cada función se usa para iterar sobre una matriz. La función tiene 2 parámetros requeridos... El primer parámetro es una entidad (matriz u objeto), cuyos elementos (propiedades) deben iterarse. En este caso, es la matriz arr. El segundo parámetro es una función de devolución de llamada que se ejecutará para cada elemento (en este caso) de la matriz. Tiene 2 parámetros que están disponibles en su interior a través de las variables correspondientes. El primer parámetro es el número ordinal del elemento (el recuento se realiza desde 0). El segundo parámetro es el valor del elemento de matriz actual.

Ejemplo # 2. En este ejemplo iteraremos sobre todas las propiedades del objeto.

// objeto de smartphone con 5 propiedades var smartphone \u003d ("name": "LG G5 se", "year": "2016", "screen-size": "5.3", "screen-resolution": "2560 x 1440 "," os ":" Android 6.0 (Marshmallow) "); // recorrer el objeto smartphone $ .each (smartphone, function (key, value) (// acciones que se realizarán para cada propiedad del objeto // clave - el nombre actual de la propiedad de la matriz // valor - el valor de la propiedad actual del objeto // mostrar el nombre de la propiedad y su valor en la consola console.log ("Propiedad:" + tecla + "; Valor:" + valor);)); / * Resultado (en consola): Propiedad: nombre; Valor: LG G5 se Propiedad: año; Valor: 2016 Propiedad: tamaño de pantalla; Valor: 5.3 Propiedad: resolución de pantalla; Valor: 2560 x 1440 Propiedad: os; Valor: Android 6.0 (Marshmallow) * /

La función each se puede utilizar para iterar sobre objetos JavaScript. La diferencia en su uso es solo que los parámetros de la función de devolución de llamada tienen valores diferentes. El primer parámetro almacena el nombre de la propiedad del objeto y el segundo almacena el valor de esta propiedad.

Ejemplo no 3. En él iteraremos sobre una estructura más compleja (veamos cómo usar anidadas cada una).

// un objeto que consta de 2 propiedades. Cada propiedad de este objeto tiene una matriz como valor, cuyos elementos también son objetos var Articles \u003d ("Bootstrap": [("id": "1", "title": "Introducción"), ("id": "2" , "title": "Cómo instalar"), ("id": "3", "title": "Grid")], "JavaScript": [("id": "4", "title": "Conceptos básicos "), (" id ":" 5 "," título ":" Selección de elementos ")]); $ .each (artículos, función (clave, datos) (console.log ("Sección:" + tecla); $ .each (datos, función (índice, valor) (console.log ("Artículo: id \u003d" + valor ["id"] + "; Título \u003d" + valor ["título"]);));)); / * Resultado: Sección: Bootstrap Artículo: id \u003d 1; Título \u003d Introducción Artículo: id \u003d 2; Título \u003d Cómo instalar Artículo: id \u003d 3; Título \u003d Cuadrícula Sección: JavaScript Artículo: id \u003d 4; Título \u003d Artículo básico: id \u003d 5; Nombre \u003d Selección de elementos * /

¿Cómo interrumpo cada uno (salgo del bucle)?

Cada bucle se interrumpe con una declaración de retorno, que debe devolver falso.

Por ejemplo, interrumpamos la ejecución de cada ciclo después de encontrar el número 7 en la matriz arr:

// una matriz de 5 números var arr \u003d; // el número para encontrar var find \u003d 7; // itera sobre el arreglo arr $ .each (arr, function (index, value) (// si se encuentra el número requerido, entonces .. if (value \u003d\u003d\u003d find) (// imprímelo en la consola console.log ("¡Hurra! ¡El número "+ buscar +" encontrado! Este número tiene un índice: "+ índice); // abortar la ejecución del bucle return false;) else (// en caso contrario, imprime el número actual en la consola console.log (" Número actual: "+ valor); ))); / * Resultado (en consola): Número actual: 5 Número actual: 4 ¡Hurra! ¡Número 7 encontrado! Este número tiene un índice: 2 * /

¿Cómo paso a la siguiente iteración (cada una continúa)?

En cada una se interrumpe la ejecución de la iteración actual y se realiza la transición a la siguiente mediante la instrucción return, que debe tener un valor distinto a falso.

// una matriz de números var arr \u003d; // una matriz que debe contener todos los elementos de la matriz arr, excepto los números pares var newarr \u003d; // itera sobre la matriz de arr $ .each (arr, function (index, value) (// si el elemento es par, omítelo if (value% 2 \u003d\u003d\u003d 0) (// interrumpe la iteración actual y pasa a la siguiente return; ) // agregar valor a la matriz newarr newarr.push (valor);)); console.log ("Array original (arr):" + arr.join ()); console.log ("Matriz de resultados (newarr):" + newarr.join ()); / * Resultado (en la consola): Matriz original (arr): 3,5,4,9,17,19,30,35,40 Matriz de resultados (newarr): 3,5,9,17,19,35 * /

Iterando sobre elementos actuales (.each)

La sintaxis de cada método (se aplica solo a los elementos seleccionados):

.each (función); // función: una función que se ejecutará para cada elemento del objeto actual

Veamos cómo funciona cada método con el siguiente ejemplo (iterando sobre elementos div):

En el ejemplo anterior, cada método usa el conjunto actual (elementos seleccionados con el selector $ ("div")). El controlador de cada método es siempre una función que se ejecutará para cada elemento del conjunto actual (en este caso, para cada elemento div). Esta función tiene 2 parámetros opcionales. Uno de ellos (índice) es el número de secuencia de la iteración actual, y el segundo (elemento) es la referencia DOM al elemento actual. Además, la palabra clave this está disponible dentro de la función, la cual, como el segundo parámetro, contiene una referencia DOM al elemento actual.

Por ejemplo, imprimamos en la consola el valor del atributo href para todos los elementos a en la página:

$ ("a"). each (function () (console.log ($ (this) .attr ("href"));));

$ ("a"). each (function () (var link \u003d $ (this) .attr ("href"); if ((link.indexOf ("http: //") \u003d\u003d 0) || (link .indexOf ("https: //") \u003d\u003d 0)) (console.log ("enlace href \u003d" + enlace);))); // Si la página contiene los siguientes enlaces: // Yandex // ¿Cómo funciona JavaScript? // Bootstrap // Luego en la consola veremos el siguiente resultado: // https://www.yandex.ru/ // http://getbootstrap.com/

Por ejemplo, echemos un vistazo a cómo recorrer cada elemento DOM que tiene el nombre de clase (recorraremos todos los elementos de la misma clase).

Frambuesa pi

cálculo de placa única

Intel Galileo Gen2

19$

Pino A64 Plus

Por ejemplo, descubramos cómo iterar sobre todos los elementos de una página.

Por ejemplo, imprimamos el valor de todos los elementos de entrada en la página.

$ ("entrada"). each (function () (console.log ($ (this) .val ());));

Por ejemplo, iteremos sobre todos los hijos ubicados en ul con id \u003d "myList" (cada hijo).

HTML
JavaScript

Veamos una forma en que puede determinar el último índice (elemento) en el método jQuery de cada método.

// seleccionar elementos var myList \u003d $ ("ul li"); // determina el número de elementos en la selección var total \u003d myList.length; // itera sobre los elementos seleccionados myList.each (function (index) (if (index \u003d\u003d\u003d total - 1) (// este es el último elemento de la selección)));

No hace tanto tiempo, me llevó a JavaScript crea matriz asociativa... Sorprendentemente, nunca antes lo necesité en JavaScript... Empecé a buscar en Internet cómo hacerlo. Y me sorprendió mucho que una gran cantidad de personas escribieran que esto es imposible, en JavaScript No lo es. Afortunadamente, mis muchos años de experiencia me dijeron que son tonterías. Así que al final me enteré cómo crear una matriz asociativa en JavaScript, del que les hablaré en este artículo.

A continuación se muestra el código en el que se crea una matriz asociativa, luego se agrega un elemento más y, finalmente, la matriz se itera a través del ciclo:

En este artículo, cubrimos creando matrices asociativas, su cambio, así como la enumeración completa a lo largo del ciclo para... Yo personalmente he usado matrices asociativas en JavaScript sólo una vez, pero debe ser consciente de esa posibilidad.

Que es JavaScript y para que sirve

Tipos de datos de JavaScript Operadores y tipos de datos de JavaScript

Propiedades CSS text-decoration, vertical-align, text-align, text-indent para decorar texto en Html

Configuración de Apache: instrucciones paso a paso Archivo de configuración de Apache