No hace mucho, me llevó a JavaScript crea matriz asociativa... Sorprendentemente, nunca lo necesité antes. 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 usé matrices asociativas en JavaScript sólo una vez, pero debe ser consciente de esa posibilidad.
- I. Bucle a través de matrices reales
- ForEach y métodos relacionados
- En bucle
- Uso correcto de for ... in loop
- For ... of loop (uso implícito de un iterador)
- Uso explícito de un iterador
- Usando métodos para iterar sobre matrices reales
- Conversión a una matriz real
- 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.
- 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.
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.
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.
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: 0Especificaciones
| 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 el arreglo arr $ .each (arr, function (index, value) (// acciones que se realizarán para cada elemento del arreglo // índice es el índice actual del elemento del arreglo (número) // valor es el valor del elemento del arreglo 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 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 de 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 uno, se interrumpe la ejecución de la iteración actual y la transición a la siguiente se realiza 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).
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)));
Última actualización: 26.03.2018
El objeto Array representa una matriz y proporciona una serie de propiedades y métodos con los que podemos manipular la matriz.
Inicialización de matriz
Puede crear una matriz vacía utilizando corchetes o el constructor de matriz:
Var usuarios \u003d new Array (); var gente \u003d; console.log (usuarios); // Array console.log (personas); // Matriz
Puede inicializar inmediatamente la matriz con varios elementos:
Var users \u003d new Array ("Tom", "Bill", "Alice"); var people \u003d ["Sam", "John", "Kate"]; console.log (usuarios); // ["Tom", "Bill", "Alice"] console.log (personas); // ["Sam", "John", "Kate"]
Puede definir una matriz y definir nuevos elementos en ella a lo largo del camino:
Var usuarios \u003d new Array (); usuarios \u003d "Tom"; usuarios \u003d "Kate"; console.log (usuarios); // "Tom" console.log (usuarios); // indefinido
No importa que, de forma predeterminada, la matriz se cree con una longitud cero. Con la ayuda de índices, podemos sustituir uno u otro elemento por un índice específico en la matriz.
longitud
Para averiguar la longitud de una matriz, use la propiedad length:
Var fruit \u003d new Array (); fruit \u003d "manzanas"; fruit \u003d "peras"; fruit \u003d "ciruelas"; document.write ("En la matriz fruit" + fruit.length + "del elemento:
"); para (var i \u003d 0; i< fruit.length; i++)
document.write(fruit[i] + "
");
De hecho, la longitud de la matriz será el índice del último elemento con la adición de uno. Por ejemplo:
Var usuarios \u003d new Array (); // hay 0 elementos en la matriz users \u003d "Tom"; usuarios \u003d "Kate"; usuarios \u003d "Sam"; para (var i \u003d 0; i Salida del navegador: Tom Kate undefined undefined Sam A pesar de que para los índices 2 y 3 no agregamos elementos, pero la longitud del arreglo en este caso será el número 5. Es solo que los elementos con índices 2 y 3 tendrán el valor indefinido. La copia de matriz puede ser una copia superficial o profunda. Con copia superficial, basta con asignar el valor de la variable a otra variable que almacena la matriz: Var usuarios \u003d ["Tom", "Sam", "Bill"]; console.log (usuarios); // ["Tom", "Sam", "Bill"] var people \u003d users; // gente de copia superficial \u003d "Mike"; // cambia el segundo elemento console.log (usuarios); // ["Tom", "Mike", "Bill"] En este caso, la variable de personas después de copiar apuntará a la misma matriz que la variable de usuarios. Por lo tanto, cuando los elementos en personas cambian, los elementos en usuarios también cambian, ya que de hecho es la misma matriz. Este comportamiento no siempre es deseable. Por ejemplo, queremos que las variables apunten a matrices separadas después de copiar. Y en este caso, la copia profunda se puede usar con el método slice (): Var usuarios \u003d ["Tom", "Sam", "Bill"]; console.log (usuarios); // ["Tom", "Sam", "Bill"] var people \u003d users.slice (); // copia profunda de personas \u003d "Mike"; // cambia el segundo elemento console.log (usuarios); // ["Tom", "Sam", "Bill"] console.log (personas); // ["Tom", "Mike", "Bill"] En este caso, después de copiar, las variables apuntarán a diferentes matrices, y podemos cambiarlas por separado unas de otras. Además, el método slice () le permite copiar parte de una matriz: Var usuarios \u003d ["Tom", "Sam", "Bill", "Alice", "Kate"]; var people \u003d users.slice (1, 4); console.log (personas); // ["Sam", "Bill", "Alice"] Al método slice () se le pasan los índices de inicio y fin, que se utilizan para obtener valores de la matriz. Es decir, en este caso, la selección en una nueva matriz va del índice 1 al índice 4, sin incluir. Y dado que la indexación de la matriz comienza desde cero, el segundo, tercer y cuarto elementos aparecerán en la nueva matriz. El método push () agrega un elemento al final de la matriz: Var fruto \u003d; fruit.push ("manzanas"); fruit.push ("peras"); fruit.push ("ciruelas"); fruit.push ("cereza", "albaricoque El método pop () elimina el último elemento de la matriz: Var fruit \u003d ["manzanas", "peras", "ciruelas"]; var lastFruit \u003d fruit.pop (); // busca el último elemento de la matriz document.write (lastFruit + " Salida del navegador: Ciruelas Hay 2 elementos en la variedad de frutas: manzanas, peras El método shift () extrae y elimina el primer elemento de la matriz: Var fruit \u003d ["manzanas", "peras", "ciruelas"]; var firstFruit \u003d fruit.shift (); document.write (firstFruit + " Salida del navegador: Manzanas Hay 2 elementos en la variedad de frutas: peras ciruelas El método unshift () agrega un nuevo elemento al comienzo de la matriz: Var fruit \u003d ["manzanas", "peras", "ciruelas"]; fruit.unshift ("albaricoques"); document.write (fruta); Salida del navegador: Albaricoques, manzanas, peras, ciruelas El método splice () elimina elementos de un índice específico. Por ejemplo, eliminando elementos del tercer índice: Var usuarios \u003d ["Tom", "Sam", "Bill", "Alice", "Kate"]; var eliminado \u003d users.splice (3); console.log (eliminado); // ["Alice", "Kate"] console.log (usuarios); // ["Tom", "Sam", "Bill"] El método slice devuelve los elementos eliminados. En este caso, la eliminación va desde el principio de la matriz. Si pasa un índice negativo, la eliminación se realizará desde el final de la matriz. Por ejemplo, eliminemos el último elemento: Var usuarios \u003d ["Tom", "Sam", "Bill", "Alice", "Kate"]; var eliminado \u003d users.splice (-1); console.log (eliminado); // ["Kate"] console.log (usuarios); // ["Tom", "Sam", "Bill", "Alice"] Una versión adicional del método le permite especificar el índice final para eliminar. Por ejemplo, eliminemos del primer al tercer índice: Var usuarios \u003d ["Tom", "Sam", "Bill", "Alice", "Kate"]; var eliminado \u003d users.splice (1,3); console.log (eliminado); // ["Sam", "Bill", "Alice"] console.log (usuarios); // ["Tom", "Kate"] Otra versión del método de empalme le permite insertar nuevos elementos en lugar de los elementos eliminados: Var usuarios \u003d ["Tom", "Sam", "Bill", "Alice", "Kate"]; var eliminado \u003d users.splice (1,3, "Ann", "Bob"); console.log (eliminado); // ["Sam", "Bill", "Alice"] console.log (usuarios); // ["Tom", "Ann", "Bob", "Kate"] En este caso, eliminamos tres elementos del 1er al 3er índice e insertamos dos elementos en su lugar. El método concat () se utiliza para concatenar matrices: Var fruit \u003d ["manzanas", "peras", "ciruelas"]; var verduras \u003d ["tomates", "pepinos", "patatas"]; var productos \u003d fruit.concat (verduras); para (var i \u003d 0; i< products.length; i++)
document.write(products[i] + " En este caso, no es necesario combinar solo matrices del mismo tipo. Son posibles diferentes tipos: Var fruit \u003d ["manzanas", "peras", "ciruelas"]; var precios \u003d; var productos \u003d fruit.concat (precios); El método join () concatena todos los elementos de una matriz en una sola cadena: Var fruit \u003d ["manzanas", "peras", "ciruelas", "albaricoques", "melocotones"]; var fruitString \u003d fruit.join (","); document.write (fruitString); Al método join () se le pasa un separador entre los elementos de la matriz. En este caso, se utilizará una coma y un espacio (",") como separador. El método sort () ordena la matriz en orden ascendente: Var fruit \u003d ["manzanas", "peras", "ciruelas", "albaricoques", "melocotones"]; fruit.sort (); para (var i \u003d 0; i< fruit.length; i++)
document.write(fruit[i] + " Salida del navegador: Albaricoques peras melocotones ciruelas manzanas El método reverse () invierte la matriz al revés: Var fruit \u003d ["manzanas", "peras", "ciruelas", "albaricoques", "melocotones"]; fruit.reverse (); para (var i \u003d 0; i< fruit.length; i++)
document.write(fruit[i] + " Salida del navegador: Melocotones albaricoques ciruelas peras manzanas Combinado con el método sort (), puede ordenar la matriz en orden descendente: Var fruit \u003d ["manzanas", "peras", "ciruelas", "albaricoques", "melocotones"]; fruit.sort (). reverse (); para (var i \u003d 0; i< fruit.length; i++)
document.write(fruit[i] + " Salida del navegador: Manzanas ciruelas melocotones peras albaricoques Los métodos indexOf () y lastIndexOf () devuelven el índice del primer y último elemento incluido en la matriz. Por ejemplo: Var fruit \u003d ["manzanas", "peras", "ciruelas", "manzanas", "peras"]; var firstIndex \u003d fruit.indexOf ("manzanas"); var lastIndex \u003d fruit.lastIndexOf ("manzanas"); var otherIndex \u003d fruit.indexOf ("cerezas"); document.write (firstIndex); // 0 document.write (lastIndex); // 3 document.write (otherIndex); // -1 firstIndex tiene un valor de 0, ya que la primera inclusión de las "manzanas" en la matriz cae en el índice 0 y la última en el índice 3. Si el elemento no está en la matriz, los métodos indexOf () y lastIndexOf () devuelven -1. El método every () comprueba si todos los elementos cumplen una determinada condición: Var números \u003d [1, -12, 8, -4, 25, 42]; condición de función (valor, índice, matriz) (var result \u003d false; if (value\u003e 0) (result \u003d true;) return result;); var pasó \u003d números.every (condición); document.write (aprobado); // falso El método every () se pasa como parámetro a una función que representa la condición. Esta función toma tres parámetros: Condición de función (valor, índice, matriz) () El parámetro de valor representa el elemento de la matriz actualmente iterado, el parámetro de índice representa el índice de ese elemento y el parámetro de matriz pasa una referencia a la matriz. En esta función, podemos verificar que el valor del elemento pasado cumpla con alguna condición. Por ejemplo, en este ejemplo, verificamos cada elemento de la matriz si es mayor que cero. Si es más, devuelve verdadero, es decir, el elemento cumple la condición. Si es menor, devolvemos falso: el elemento no coincide con la condición. Como resultado, cuando se llama al método numbers.every (condición), itera sobre todos los elementos de la matriz de números y los pasa a su vez a la función de condición. Si esta función devuelve verdadero para todos los elementos, entonces cada método () devuelve verdadero. Si al menos un elemento no coincide con la condición, el método every () devuelve falso. El método some () es similar al método every (), excepto que comprueba si al menos un elemento coincide con una condición. Y en este caso, el método some () devuelve verdadero. Si no hay elementos que coincidan con la condición en la matriz, se devuelve el valor falso: Var números \u003d [1, -12, 8, -4, 25, 42]; condición de función (valor, índice, matriz) (var resultado \u003d falso; si (valor \u003d\u003d\u003d 8) (resultado \u003d verdadero;) devolver resultado;); var pasó \u003d números.algo (condición); // cierto El método filter (), como some () y every (), acepta una función de condición. Pero al mismo tiempo, devuelve una matriz de aquellos elementos que cumplen esta condición: Var números \u003d [1, -12, 8, -4, 25, 42]; condición de función (valor, índice, matriz) (var result \u003d false; if (value\u003e 0) (result \u003d true;) return result;); var filterNumbers \u003d números.filtro (condición); para (var i \u003d 0; i< filteredNumbers.length; i++)
document.write(filteredNumbers[i] + " Salida del navegador: 1
8
25
42
Los métodos forEach () y map () iteran sobre los elementos y realizan ciertas operaciones en ellos. Por ejemplo, puede usar el siguiente código para calcular los cuadrados de números en una matriz: Var números \u003d [1, 2, 3, 4, 5, 6]; para (var i \u003d 0; i Pero usando el método forEach (), puede simplificar esta construcción: Var números \u003d [1, 2, 3, 4, 5, 6]; función cuadrado (valor, índice, matriz) (var resultado \u003d valor * valor; document.write ("El cuadrado del número" + valor + "es" + resultado + " El método forEach () toma la misma función como parámetro, en el cual, al iterar sobre los elementos, se pasa el elemento iterable actual y se realizan operaciones en él. El método map () es similar al método forEach, también acepta una función como parámetro que se puede usar para realizar operaciones en elementos de matriz iterables, pero el método map () devuelve una nueva matriz con los resultados de las operaciones en elementos de matriz. Por ejemplo, usemos el método de mapa para calcular los cuadrados de los números de matriz: Var números \u003d [1, 2, 3, 4, 5, 6]; función cuadrado (valor, índice, matriz) (devolver resultado \u003d valor * valor;); var squareArray \u003d números.mapa (cuadrado); document.write (squareArray); La función que se pasa al método map () recibe el elemento iterado actual, realiza operaciones en él y devuelve algún valor. Luego, este valor se pasa a la matriz cuadrada resultante.Copiando una matriz. rebanada ()
empujar ()
"); document.write (fruta); // manzanas, peras, ciruelas, cerezas, albaricoquespop ()
"); document.write (" En la matriz fruit "+ fruit.length +" del elemento:
"); para (var i \u003d 0; i cambio ()
"); document.write (" En la matriz fruit "+ fruit.length +" del elemento:
"); para (var i \u003d 0; i unshift ()
Eliminar un elemento por índice. empalme ()
concat ()
");
unirse ()
ordenar ()
");
contrarrestar ()
");
");
Encontrar el índice de un elemento
cada ()
algunos ()
filtro ()
");
forEach () y map ()
");); números.paraCada (cuadrado);
