Operaciones Javascript con arrays. Notación breve: uso de corchetes. Agregar y eliminar elementos de matriz

Aprendamos a indexar matrices en js, eliminar y agregar sus elementos.

Una matriz en JavaScript es objeto global, diseñado para almacenar una lista de valores.

Es similar a otras variables en que puede almacenar cualquier tipo de datos. Pero la matriz tiene uno. diferencia importante de una variable: puede almacenar más de un elemento a la vez.

Una matriz es una colección ordenada de valores. Cada valor se llama elemento y tiene su propio número, llamado índice.

Un elemento dentro de una matriz puede ser de cualquier tipo. Además, los elementos de una matriz pueden ser diferentes tipos: números, cadenas, puertas lógicas e incluso objetos u otras matrices.

El orden de los elementos de la matriz comienza desde 0. Resulta que la matriz siempre tendrá un índice desplazado en uno: el primer elemento tendrá índice 0, el segundo 1, etc.

A continuación se muestra un ejemplo de una matriz con elementos de diferentes tipos:

Crear (declarar) una matriz

Las matrices son muy convenientes porque pueden almacenar tantos datos como necesites. El tamaño máximo posible de una matriz js es 2 32 elementos.

Necesitamos decirle a JavaScript que queremos crear una matriz. Hay dos opciones para esto: el valor entre corchetes o palabra clave nuevo.

Notación corta: uso de corchetes

Una lista de valores separados por comas entre corchetes.

var miArray = [ "Jack", "Sawyer", "John", "Desmond" ];

El contenido de la matriz está determinado por lo que está entre corchetes. Cada valor está separado por una coma.

Los valores se especifican de la misma forma que las variables simples, es decir, las cadenas deben declararse entre comillas, etc.

Para declarar una matriz vacía, deje los paréntesis vacíos:

var miArray = ;

Entrada larga: usando el constructor Array()

var lostArray = new Array("Jack", "Sawyer", "John", "Desmond"); var twinPeaksArray = new Array("Laura", 2, ["Bob", "Leland", "Dale"]);

La nueva palabra clave le dice a JavaScript que cree una nueva matriz cuyos valores se pasan como parámetros.

Si sabe de antemano cuántos elementos habrá en su matriz, puede pasar inmediatamente este valor en el constructor.

var miMatriz = nueva Matriz(80);

La expresión anterior creará una matriz vacía que consta de 80 espacios con valores indefinidos.

Declarando una matriz vacía:

var miArray = nueva matriz();

Accediendo a elementos de matriz

Utilizando el índice de cada elemento, puedes trabajar con cualquier dato del array, accediendo a él mediante el operador:

var myArray = ["Jack", "Sawyer", "John", "Desmond"]; console.log(miMatriz); // Imprime “Jack” console.log(myArray); // Imprime “Desmond”

Una matriz puede tener varios niveles, es decir, cada elemento puede ser en sí mismo una matriz. El resultado será una matriz js bidimensional. ¿Cómo podemos acceder a estos arreglos que se encuentran dentro de otros? -” matrices multidimensionales»?

Como ejemplo, consideremos una matriz que representa una familia. Los niños de esta familia se registran en una matriz separada dentro de la principal:

var familyArray = ["Marge", "Homero", ["Bart", "Lisa", "Maggie"]];

Puedes imaginarlo así:

Para referirse al valor "Lisa":

var lisa = familyArray; consola.log(lisa); // imprime "Lisa"

Esto puede continuar casi indefinidamente, lo que le permite almacenar conjuntos de datos anidados en matrices y acceder a ellos mediante índices.

Agregar elementos a una matriz

Descubrimos cómo acceder a los elementos de la matriz utilizando sus índices correspondientes. De manera similar, puedes agregar (o cambiar) elementos declarando, por ejemplo:

var myArray = ["Kate", "Sol"]; miArray = "Julieta"; console.log(miMatriz); // Imprime "Kate, Sol, Julieta"

¿Qué sucede si declaro un elemento con un índice que no tiene otros elementos antes? La matriz misma creará todos los elementos faltantes y les asignará el valor indefinido:

var myArray = ["Kate", "Sol"]; miArray = "Julieta"; console.log(myArray.length); // Imprime "6" console.log(myArray); // Imprime ["Kate", "Sung", indefinido, indefinido, indefinido, "Julieta"]

Puede averiguar cuál es la longitud de una matriz js utilizando la propiedad de longitud. En el ejemplo anterior, hay seis elementos en la matriz y a tres de ellos no se les ha asignado un valor; están marcados como indefinidos.

método empujar()

Usando el método push(), puedes agregar uno o más elementos a una matriz js. Push() acepta cantidad ilimitada parámetros, todos se agregarán al final de la matriz.

var miArray = ["Kate", "Sut"]; myArray.push("Julieta"); // Agrega el elemento "Juliet" al final de la matriz myArray.push("Libby", "Shannon" // Agrega los elementos "Libby" y "Shannon" al final de la matriz console.log(myaArray) ); // Imprime ["Kate", "Pronto", "Julieta", "Libby", "Shannon"]

método unshift()

El método unshift() funciona igual que push(), excepto que agrega elementos al comienzo de la matriz.

var myArray = ["Kate", "Sol"]; myArray.unshift("Julieta"); // Agrega el elemento "Juliet" al comienzo de la matriz myArray.unshift("Libby", "Shannon"); // Agrega los elementos "Libby" y "Shannon" al comienzo de la matriz console.log(myArray); // Salidas ["Libby", "Shannon", "Juliet", "Kate", "Pronto"]

Eliminar elementos de la matriz

métodos pop() y shift()

Los métodos pop() y shift() eliminan el último y el primer elemento de una matriz, respectivamente:

var myArray = ["Jack", "Sawyer", "John", "Desmond", "Kate"]; miArray.pop(); // Elimina el elemento "Kate" myArray.shift(); // Elimina el elemento "Jack" console.log(myArray); // Imprime ["Sawyer", "John", "Desmond"]

método de empalme ()

Usando el método splice(), puede eliminar o agregar elementos a una matriz, mientras especifica con precisión el índice de los elementos.

En el siguiente ejemplo, el método splice() agrega dos elementos comenzando en el índice 2 ( es decir, del tercer elemento):

var fruitArray = ["manzana", "melocotón", "naranja", "limón", "lima", "cereza"]; fruitArray.splice(2, 0, "melón", "plátano"); console.log(frutaArray); // Salidas ["manzana", "melocotón", "melón", "plátano", "naranja", "limón", "lima", "cereza"]

El primer parámetro del método splice() es el índice. Indica en qué posición se deben agregar/eliminar elementos. En nuestro ejemplo, elegimos el índice 2 ( que significa "naranja").

El segundo parámetro es la cantidad de elementos que deben eliminarse. Especificamos un valor de 0, por lo que no se eliminará nada.

Los siguientes parámetros son opcionales. Agregan nuevos valores a la matriz. En nuestro caso, necesitamos agregar “melón” y “plátano”, comenzando por el índice 2.

Las matrices son uno de los tipos de variables más utilizados que le permiten almacenar muchos valores secuenciales en "un solo lugar". Sin embargo, cuando se trata de JavaScript, hay margen de mejora.

En este artículo, veremos tres técnicas poco conocidas que se pueden utilizar al trabajar con matrices.

1. Agregar propiedades personalizadas a las matrices

Si utiliza la búsqueda para encontrar la definición de una matriz dentro lenguaje javascript, entonces la mayoría de las fuentes afirmarán que este tipo El valor de una variable se representa como un objeto.

En términos generales, muchas de las cosas que encontramos en JavaScript son objetos. Sería justo señalar que el lenguaje también contiene tipos de datos "primitivos", pero sus valores se utilizan de alguna manera en propiedades dentro de los objetos.

2. Acceder a elementos de una matriz dentro de un bucle

Dado que los índices de una matriz sólo pueden tomar valores positivos, el conteo comienza desde cero. Posteriormente podemos usar este índice para acceder al elemento de la matriz en una iteración de bucle determinada.

ECMAScript6 introdujo una forma de desplazarse por una matriz sin utilizar índices, sino a través de un nuevo bucle for…of.

El bucle for...of está diseñado para iterar a través de los elementos de una matriz sin afectar el índice del elemento.

Var ary = ["naranja","manzana","lichi"]; for (let item of ary)( console.log(item); ) // "orange", "apple", "lychee" A modo de comparación: generar índices de elementos en un bucle for. var ary = ["naranja","manzana","lichi"]; para (var elemento = 0; elemento< ary.length; item++){ console.log(item); } // 0, 1, 2

3. El número de elementos no es la dimensión de la matriz.

Cuando hablamos del tamaño de una matriz, generalmente pensamos en ella como la cantidad de elementos almacenados en ella. De hecho, esto no es del todo cierto: la propiedad de longitud se calcula según índice máximo elemento.

La propiedad de longitud es muy ambigua. Para verificar esto, basta con mirar las siguientes manipulaciones:

Var aria = ; longitud.aria = 3; console.log(ary.length); // 3 aria = "abcd"; console.log(ary.length); // 6

En el último ejemplo, fue suficiente colocar el elemento en la quinta posición, como resultado de lo cual la longitud de la matriz pasó a ser 6. Si cree que los índices del 0 al 4 se crearán automáticamente, está equivocado. Esto se puede comprobar utilizando el operador in.

Var aria = ; longitud.aria = 3; console.log(ary.length); // 3 aria = "abcd"; console.log(ary.length); // 6 console.log(0 en ary); // FALSO

EN en este caso Es justo llamar a la matriz ary "escasa".

También podemos manipular la propiedad de longitud para recortar matrices. El siguiente ejemplo demuestra "perder" el elemento en el índice 5 al disminuir la propiedad de longitud de la matriz aria.

Var aria = ; longitud.aria = 3; console.log(ary.length); // 3 aria = "abcd"; console.log(ary.length); // 6 ary.longitud = 2; console.log(ary.length); // 2 console.log(ario); // indefinido

Describí solo algunos de los métodos para trabajar con matrices.

Aquí hablaremos sobre cómo agregar y eliminar elementos de una matriz. Acerca de voltear y ordenar una matriz, así como también de cortar, reemplazar y combinar matrices.

Agregar elementos a una matriz.

Puede usar la propiedad de longitud para agregar nuevos elementos a la matriz:

Var myArray = ["Apple", "Microsoft", "Google", "Facebook"]; miArray = "Yahoo!"; console.log(miMatriz); // ["Apple", "Microsoft", "Google", "Facebook", "Yahoo!"]

Esto funcionará porque... los elementos de la matriz se numeran comenzando desde cero, y longitud uno mas. Longitud siempre equivalente índice + 1, por lo que es muy fácil agregar nuevo elemento hasta el final de la matriz. Curiosamente, puedes agregar un elemento en una posición que sea mucho mayor que la longitud de la matriz misma:

Var myArray = ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards"]; miArray = "Lindsey Buckingham"; console.log(miMatriz); // ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards", undefinido × 95, "Lindsey Buckingham"] console.log(myArray.length); // 100

Como se muestra en los comentarios, esto agregará 95 espacios vacíos y el elemento "Lindsey Buckingham" al final de la matriz. Después de esto obtendremos una longitud de 100. Otra forma de agregar un nuevo elemento a la matriz es usar el método empujar():

Var myArray = ["Paul McCartney", "John Lennon", "George Harrison"]; myArray.push("Ringo Starr", "George Martin"); console.log(miMatriz); // ["Paul McCartney", "John Lennon", "George Harrison", "Ringo Starr", "George Martin"]

Método empujar() siempre devuelve la nueva longitud de la matriz (en nuestro caso 5). Puedes agregar un elemento usando empalme():

Var myArray = ["bellota", "haya", "mongongo", "macadamia"]; myArray.splice(2, 0, "anacardo"); // agrega "anacardo" al índice 2 console.log(myArray); // ["bellota", "haya", "anacardo", "mongongo", "macadamia"]

Cuando el segundo argumento es 0, significa que no se eliminará ningún elemento y, por lo tanto, cualquier argumento posterior se agregará a la matriz en la posición especificada en el primer argumento.

Eliminar elementos de una matriz

Eliminar un elemento es un poco más difícil que agregarlo. Para eliminar un elemento del final de una matriz, puede usar estallido():

Var myArray = ["7-up", "Sprite", "Ginger Ale", "Limonada"]; miArray.pop(); console.log(miMatriz); // ["7-up", "Sprite", "Ginger Ale"]

Método estallido() siempre elimina último elemento en una matriz y lo devuelve.

También puedes usar empalme() método:

Var myArray = ["yuca", "nuez moscada", "altramuz", "ruibarbo"]; miArray.splice(2, 1); // eliminar elemento con índice 2 console.log(myArray); // ["yuca", "nuez moscada", "ruibarbo"]

A diferencia del método empalme(), que se usa para agregar elementos, aquí el segundo argumento es 1, que dice que queremos eliminar el elemento con índice 2 (o tercero consecutivo). En este caso, se eliminó el elemento "altramuz".

Puede eliminar un elemento de una matriz usando el operador borrar:

Var myArray = ["Byte Bandit", "Eliza", "Jeefo", "Miguel Ángel"]; console.log(myArray.length); // 4 eliminar miArray; // eliminar Eliza console.log(myArray.length); // 4 console.log(miArray); // ["Byte Bandit", indefinido × 1, "Jeefo", "Miguel Ángel"]

Primero nota IMPORTANTE: borrar() no cambia la longitud de la matriz después de eliminar un elemento (incluso si fue el último elemento de la matriz). Segundo: borrar() cambia el valor del elemento a eliminar a indefinido, por lo que al acceder miArray = indefinido.

Una buena forma de eliminar un elemento de una matriz es utilizar Array.remove de John Resig. A continuación se muestra un ejemplo de uso tomado de su página:

// Eliminación de matriz - Por John Resig (con licencia MIT) Array.prototype.remove = function(from, to) ( var rest = this.slice((to || from) + 1 || this.length); this.length = de< 0 ? this.length + from: from; return this.push.apply(this, rest); }; // Удаление 2 элемента из массива array.remove(1); // Удаление 2-ого элемента с конца массива array.remove(-2); // Удаление второго и третьего элемента array.remove(1,2); // Удаление последнего и предпоследнего элемента array.remove(-2,-1);

Es posible que desee consultar la solución de Viral Patel, una de las funciones en Underscore.js o grep() de jQuery.

Además, en javascript hay un método cambio(), que elimina el primer elemento de la matriz y devuelve su valor. Veamos el código:

Var myArray = ["Matt Kramer", "Jason Bieler", "Tom Defile", "Phil Varone"]; console.log(myArray.length); // 4 var primerItem = myArray.shift(); console.log(primer elemento); // Matt Kramer console.log(myArray.length); // 3 console.log(miArray); // ["Jason Bieler", "Tom Defile", "Phil Varone"]

Usando el método cambio() Eliminamos el elemento pero almacenamos su valor en nuestra variable firstItem. La longitud de la matriz cambió de 4 a 3.

Este método puede ser útil junto con el método. empujar(). Utilizándolos juntos podemos poner en cola eficientemente elementos en una matriz. Mantenemos la longitud de la matriz eliminando un elemento del principio y agregando uno nuevo al final.

Por el contrario, podemos utilizar el método desactivar() para agregar un elemento al comienzo de la matriz:

Var myArray = ["apito", "castañuelas", "maraca"]; console.log(myArray.length); // 3 myArray.unshift("barra de timbre", "tan-tan"); console.log(myArray.length); // 5 console.log(miArray); // ["barra de timbre", "tan-tan", "apito", "castañuelas", "maraca"]

Usando el método desactivar() con metodo estallido(), puedes crear colas en reverso, agregando elementos al principio y eliminando desde el final de la matriz.

Invertir y ordenar elementos de una matriz.

Para invertir los elementos en una matriz podemos usar contrarrestar():

Var myArray = ["cuenta regresiva", "final", "el"]; console.log(miMatriz); // ["cuenta regresiva", "final", "el"] myArray = myArray.reverse(); console.log(miMatriz); // ["la cuenta atrás final"]

Ordenar elementos de la matriz en orden alfabetico posible usando el método clasificar():

Var myArray = ["xilófonos", "cebras", "juggernauts", "aguacates"]; console.log(miMatriz); // ["xilófonos", "cebras", "juggernauts", "aguacates"] myArray = myArray.sort(); console.log(miMatriz); // ["aguacates", "juggernauts", "xilófonos", "cebras"]

Pero esto no funcionará con números.

Var miArray = ; console.log(miMatriz); // miArray = miArray.sort(); console.log(miMatriz); //

Si necesita ordenar números, puede utilizar el siguiente código:

Función compararNúmeros(a, b) ( return a - b; ) var myArray = ; console.log(miMatriz); // miArray = miArray.sort(compareNumbers); console.log(miMatriz); //

Como se muestra arriba, con una función simple insertada en clasificar(), una matriz que contenga números se ordenará correctamente.

Combinando matrices.

Podemos combinar 2 o más matrices y obtener 1 matriz que contenga los elementos de las matrices unidas. Para ello utilizamos el método concat():

Var miArray = ["Jay Ferguson", "Andrew Scott"]; var myArray2 = ["Chris Murphy", "Patrick Pentland"]; var miNuevaArray = miArray.concat(miArray2); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Var miArray = ["Jay Ferguson", "Andrew Scott"]; var myNewArray = myArray.concat("Chris Murphy", "Patrick Pentland"); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

División de matrices.

Podemos crear una nueva matriz que contenga 1 o más elementos de matriz existente usando la función rebanada():

Var myArray = ["Voz", "Bajo", "Guitarra", "Batería", "Manzanas", "Naranjas"]; var miNuevaArray = miArray.slice(4); console.log(myNewArray); // ["Manzanas", "Naranjas"]

Método rebanada() toma 1 o 2 argumentos. Si se pasa 1 argumento (índice), entonces se crea una nueva matriz a partir de todos los elementos de la anterior, comenzando desde de este índice. Si se pasan 2 argumentos, se crea una nueva matriz a partir de los elementos comenzando desde el primer argumento hasta el elemento con el índice pasado en el segundo parámetro, sin incluir el último. Para hacerlo más claro, veamos el código a continuación:

Var myArray = ["Voz", "Bajo", "Guitarra", "Batería", "Manzanas", "Naranjas"]; var miNuevaArray = miArray.slice(0, 4); console.log(myNewArray); // ["Voz", "Bajo", "Guitarra", "Batería"]

Reemplazo de elementos en una matriz.

Usamos empalme() para eliminar elementos de una matriz, pero también podemos reemplazar un elemento de la matriz con nuevos elementos:

Var myArray = ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Matt Sharp"]; myArray.splice(3, 1, "Scott Shriner"); // reemplaza 1 elemento con el índice 3 console.log(myArray); // ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Scott Shriner"]

Método empalme() siempre devuelve una matriz que contiene los elementos que se eliminaron. La línea 2 devolverá 1 elemento "Brian Bell".

Conclusión

Estos artículos describieron métodos para trabajar con matrices en JavaScript. Alguno elementos adicionales Puedes mirar MDN, que no incluí en esta publicación. Sólo funcionan en IE9+, por lo que es posible que no sean útiles.

¿Algo que añadir? ¿O conoce alguna biblioteca interesante que le ayude a gestionar matrices? ¡Por favor comenta!

  • Traducción

La mayoría de las aplicaciones desarrolladas hoy en día requieren interacción con algún tipo de conjunto de datos. Manejar elementos en colecciones es una operación común que probablemente haya encontrado. Cuando trabaje, por ejemplo, con matrices, puede, sin pensarlo, utilizar un bucle for normal, que se parece a esto: for (var i=0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Supongamos que necesitamos mostrar una lista de productos y, si es necesario, dividirla en categorías, filtrarla, realizar una búsqueda sobre ella, modificar esta lista o sus elementos. Quizás necesites realizar rápidamente algunos cálculos que involucren los elementos de una lista. Digamos que necesitas sumar algo con algo, multiplicar algo por algo. ¿Es posible encontrar herramientas en JavaScript que le permitan resolver este tipo de problemas de forma más rápida y cómoda que utilizar un bucle for normal?

De hecho, existen tales funciones en JavaScript. Algunos de ellos se analizan en el material, cuya traducción presentamos hoy a su atención. En particular, estamos hablando del operador spread, el bucle for...of y los métodos include(), some(), each(), filter(), map() y reduce(). Aquí hablaremos principalmente de matrices, pero las técnicas analizadas aquí generalmente son adecuadas para trabajar con otros tipos de objetos.

Cabe señalar que las revisiones enfoques modernos El desarrollo JS suele incluir ejemplos preparados utilizando funciones de flecha. Quizás no los uses muy a menudo, quizás porque no te gustan, quizás porque no quieres perder demasiado tiempo aprendiendo algo nuevo, o quizás simplemente no sean adecuados para ti. Por lo tanto, aquí, en la mayoría de situaciones, se mostrarán dos opciones para realizar las mismas acciones: usar funciones normales(ES5) y usando funciones de flecha (ES6). Para aquellos nuevos en el trabajo con funciones de flecha, las funciones de flecha no son equivalentes a declaraciones de funciones y expresiones de funciones. No debes reemplazar uno por el otro. En particular, esto se debe al hecho de que la palabra clave this se comporta de manera diferente en funciones ordinarias y de flecha.

1. Operador de expansión

El operador de extensión le permite "expandir" matrices sustituyendo sus elementos en lugar de matrices en el lugar donde se usa este operador. Se ha propuesto un enfoque similar para los objetos literales.

▍Fortalezas del operador de expansión

  • Es simple y de manera rápida“sacar” sus elementos individuales de una matriz.
  • Este operador es adecuado para trabajar con matrices y objetos literales.
  • Este es un método rápido e intuitivo para trabajar con argumentos de funciones.
  • El operador de extensión no ocupa mucho espacio en el código: parece tres puntos (...).

▍Ejemplo

Digamos que tienes la tarea de enumerar tus delicias favoritas sin utilizar un bucle. Usando el operador de extensión esto se hace así:

2. Bucle para... de

La declaración for…of está diseñada para atravesar objetos iterables. Da acceso a elementos individuales tales objetos (en particular, a elementos de matriz), lo que, por ejemplo, permite modificarlos. Se puede considerar un sustituto de lo habitual. en bucle.

▍Fortalezas del bucle for…of

  • Esta es una manera fácil de agregar o actualizar elementos de la colección.
  • El bucle for…of le permite realizar varios cálculos utilizando elementos (suma, multiplicación, etc.).
  • Es conveniente usarlo cuando necesita verificar alguna condición.
  • Su uso conduce a escribir código más limpio y legible.

▍Ejemplo

Digamos que tiene una estructura de datos que describe el contenido de una caja de herramientas y desea mostrar esas herramientas. Aquí se explica cómo hacerlo usando un bucle for...of:

3. El método incluye()

El método incluye() se utiliza para comprobar la presencia de un determinado elemento en una colección, en particular, por ejemplo, una determinada cadena en una matriz que contiene cadenas. Este método devuelve verdadero o falso según los resultados de la prueba. Al usarlo, vale la pena considerar que distingue entre mayúsculas y minúsculas. Si, por ejemplo, la colección contiene el elemento de cadena ESCUELA e incluye() comprueba su presencia utilizando la cadena escuela, el método devolverá falso.

▍Fortalezas del método include()

  • El método include() es útil para crear mecanismos simples de recuperación de datos.
  • Le da al desarrollador una visión intuitiva camino claro determinar la presencia de ciertos datos en la matriz.
  • Es conveniente utilizar en expresiones condicionales para modificar, filtrar elementos y realizar otras operaciones.
  • Su uso conduce a una mejor legibilidad del código.

▍Ejemplo

Supongamos que tiene un garaje, representado por una matriz con una lista de automóviles, y no sabe si un determinado automóvil está en ese garaje o no. Para resolver este problema, es necesario escribir un código que le permita comprobar si un coche está en el garaje. Usemos el método incluye():

4. algún método ()

El método some() le permite comprobar si algunos de los elementos que busca existen en la matriz. Según los resultados de la verificación, devuelve verdadero o falso. Es similar al método include() anterior, excepto que su argumento es una función en lugar de, por ejemplo, una cadena normal.

▍Fortalezas del método some()

  • El método some() nos permite comprobar si la matriz contiene al menos uno de los elementos que nos interesan.
  • Realiza una prueba de condición utilizando la función que se le pasa.
  • Este método es cómodo de utilizar.

▍Ejemplo

Supongamos que es el propietario de un club y, en general, no le interesa quién viene exactamente a su club. Sin embargo, a algunos visitantes no se les permite ingresar al club porque son propensos al consumo excesivo de bebidas alcohólicas, al menos si se encuentran solos en su establecimiento y no hay nadie con ellos que los cuide. En este caso, un grupo de visitantes podrá ingresar al club solo si al menos uno de ellos tiene al menos 18 años. Para automatizar el cheque este tipo, usemos el método some(). A continuación se demuestra su aplicación en dos versiones.

ES5

ES6

5. Cada método()

El método each() itera a través de una matriz y prueba cada elemento según una determinada condición, devolviendo verdadero si todos los elementos de la matriz coinciden con la condición y falso en caso contrario. Puedes ver que es similar al método some().

▍Fortalezas del método each()

  • El método each() le permite comprobar si todos los elementos de una matriz cumplen una condición.
  • Las condiciones se pueden establecer mediante funciones.
  • Promueve un enfoque declarativo de la programación.

▍Ejemplo

Volvamos al ejemplo anterior. Allí permitiste la entrada al club a visitantes menores de 18 años, pero alguien escribió una declaración a la policía, tras lo cual te encontraste en una situación desagradable. Después de que todo estuvo resuelto, decidiste que no necesitabas todo esto y endureciste las reglas para visitar el club. Ahora un grupo de visitantes puede ingresar al club solo si cada miembro del grupo tiene al menos 18 años. Como la última vez, consideraremos resolver el problema en dos versiones, pero esta vez usaremos el método each().

ES5

ES6

6. método de filtro ()

El método filter() le permite crear, basándose en una determinada matriz, una nueva matriz que contiene solo aquellos elementos de la matriz original que satisfacen una condición determinada.

▍Fortalezas del método filter()

  • El método filter() evita la modificación de la matriz original.
  • Le permite deshacerse de elementos innecesarios.
  • Mejora la legibilidad del código.

▍Ejemplo

Supongamos que necesita seleccionar de una lista de precios solo aquellos que son mayores o iguales a 30. Usemos el método filter() para resolver este problema.

ES5

ES6

7. Método mapa ()

El método map() es similar al método filter() en que también devuelve una nueva matriz. Sin embargo, se utiliza para modificar los elementos de la matriz original.

▍Fortalezas del método map()

  • El método map() evita la necesidad de cambiar los elementos de la matriz original.
  • Se puede utilizar para modificar cómodamente elementos de una matriz.
  • Mejora la legibilidad del código.

▍Ejemplo

Digamos que tiene una lista de productos con precios. Tu gerente necesita lista nueva bienes cuyos precios se reducen en un 25%. Usemos el método map() para resolver este problema.

ES5

ES6

8. método reducir ()

El método reduce(), en su forma más simple, le permite sumar elementos matrices numéricas. En otras palabras, reduce la matriz a un único valor. Esto le permite utilizarlo para realizar varios cálculos.

▍Fortalezas del método reduce()

  • Usando el método reduce(), puedes calcular la suma o el promedio de los elementos de una matriz.
  • Este método acelera y simplifica los cálculos.

▍Ejemplo

Digamos que necesita calcular sus gastos de la semana, que se almacenan en una matriz. Resolvamos este problema usando el método reduce().

ES5

ES6

Agregar etiquetas


Arriba