Todas Las Funciones de Javascript y los Métodos Para Manipular los Arrays

by Luigi Nori Date: 10-08-2020 javascript array functions methods es6


Este artículo mostrará las funciones prominentes de las arrays de JavaScript, entre ellas .map() , .filter() , y .reduce() , y luego pasará a través de ejemplos de casos en los que .every() y .some() ahorrarína poder de computación sobre las soluciones más prominentes.

Aprenderás métodos útiles en JavaScript Array, un array es una de las estructuras de datos más comunes que usamos mucho. Voy a repasar los métodos de arrays que se van a usar mucho como programador. Estos métodos de arrays harán tu vida más fácil en tu proyecto de javascript. Aquí encuentras lista de todos los métodos de arrays proporcionada por la clase Array. Hoy vamos a discutir los más importantes métodos de arrays

  • map()
  • filter()
  • reduce()
  • reverse()
  • reduceRight()
  • every()
  • some()
  • includes()
  • concat()
  • sort()
  • slice()
  • splice()
  • pop()
  • shift()
  • push()
  • unshift()

map()

El método map() crea una nueva matriz que contiene los resultados de la llamada a una función proporcionada en cada elemento del array de llamada

La función de callback se ejecuta una vez para cada elemento de un array, en orden, y construye una nueva array a partir de los resultados. Se invoca sólo para los índices de el array que tienen valores asignados (incluidos los no definidos). Tenga en cuenta que no se llama para los elementos que faltan en el array

map() se invoca con una función de callback con los siguientes tres argumentos:

  • currentValue - El elemento actual que se está procesando en el array
  • indexOptional(Optional) - El índice del elemento actual que se está procesando en el array
  • array (Optional) - El array, se recurrió al método map
const heros =
[{ id: 1,  name: "Iron Man",   fullName: "Tony Stark",     publisher: "Marvel Comics" },
{ id: 2,  name: "Batman",     fullName: "Terry McGinnis", publisher: "DC Comics"     },
{ id: 3,  name: "Spider-Man", fullName: "Peter Parker",   publisher: "Marvel Comics" },
{ id: 4,  name: "Venom",      fullName: "Eddie Brock",    publisher: "Anti-Venom"    },
{ id: 5,  name: "Deadpool",   fullName: "Wade Wilson",    publisher: "Evil Deadpool" },
{ id: 6,  name: "Thanos",     fullName: "Tony Stark",     publisher: "Marvel Comics" },
{ id: 7,  name: "Thor",       fullName: "Thor Odinson",   publisher: "Marvel Comics" },
{ id: 8,  name: "Hulk",       fullName: "Bruce Banner",   publisher: "Marvel Comics" },
{ id: 9,  name: "Flash",      fullName: "Jay Garrick",    publisher: "DC Comics"     },
{ id: 10, name: "Wolverine",  fullName: "Logan",          publisher: "Marvel Comics" }];
const transformedHeros = heros.map((element) => {
return {
name: element.name,
publisher: element.publisher,
isFamous: true,
}
});
console.log(transformedHeros);
// OUTPUT //
[{ name: 'Iron Man', publisher: 'Marvel Comics', isFamous: true },
{ name: 'Batman', publisher: 'DC Comics', isFamous: true },
{ name: 'Spider-Man', publisher: 'Marvel Comics', isFamous: true },
{ name: 'Venom', publisher: 'Anti-Venom', isFamous: true },
{ name: 'Deadpool', publisher: 'Evil Deadpool', isFamous: true },
{ name: 'Thanos', publisher: 'Marvel Comics', isFamous: true },
{ name: 'Thor', publisher: 'Marvel Comics', isFamous: true },
{ name: 'Hulk', publisher: 'Marvel Comics', isFamous: true },
{ name: 'Flash', publisher: 'DC Comics', isFamous: true },
{ name: 'Wolverine', publisher: 'Marvel Comics', isFamous: true }]

Cuando necesites transformar el input de array en un nuevo array usa el método map()

filter()

El método filter() crea un nuevo array con todos los elementos que pasan la prueba implementada por la función proporcionada

filter() se invoca con una función de callback con los siguientes tres argumentos:

  • currentValue - El elemento actual que se está procesando en el array
  • indexOptional(Optional) - El índice del elemento actual que se está procesando en el array
  • array (Optional) - El array, se recurrió al método filter
const heros =
[{ id: 1,  name: "Iron Man",   fullName: "Tony Stark",     publisher: "Marvel Comics" },
{ id: 2,  name: "Batman",     fullName: "Terry McGinnis", publisher: "DC Comics"     },
{ id: 3,  name: "Spider-Man", fullName: "Peter Parker",   publisher: "Marvel Comics" },
{ id: 4,  name: "Venom",      fullName: "Eddie Brock",    publisher: "Anti-Venom"    },
{ id: 5,  name: "Deadpool",   fullName: "Wade Wilson",    publisher: "Evil Deadpool" },
{ id: 6,  name: "Thanos",     fullName: "Tony Stark",     publisher: "Marvel Comics" },
{ id: 7,  name: "Thor",       fullName: "Thor Odinson",   publisher: "Marvel Comics" },
{ id: 8,  name: "Hulk",       fullName: "Bruce Banner",   publisher: "Marvel Comics" },
{ id: 9,  name: "Flash",      fullName: "Jay Garrick",    publisher: "DC Comics"     },
{ id: 10, name: "Wolverine",  fullName: "Logan",          publisher: "Marvel Comics" }];
// GET HEROS PUBLISHED BY MARVEL COMICS
const transformedHeros = heros.filter((element) => {return  element.publisher === 'Marvel Comics'});
console.log(transformedHeros);
// OUTPUT //
[{ id: 1,  name: "Iron Man",   fullName: "Tony Stark",     publisher: "Marvel Comics" },
{ id: 3,  name: "Spider-Man", fullName: "Peter Parker",   publisher: "Marvel Comics" },
{ id: 6,  name: "Thanos",     fullName: "Tony Stark",     publisher: "Marvel Comics" },
{ id: 7,  name: "Thor",       fullName: "Thor Odinson",   publisher: "Marvel Comics" },
{ id: 8,  name: "Hulk",       fullName: "Bruce Banner",   publisher: "Marvel Comics" },
{ id: 10, name: "Wolverine",  fullName: "Logan",          publisher: "Marvel Comics" }]

Cuando necesites filtrar el input array en un nuevo array usa el método filter()

reduce()

La función reduce() se usa cuando el programador necesita iterar sobre un array de JavaScript y reducirlo a un solo valor. Se llama una función callback para cada valor del array de izquierda a derecha. El valor devuelto por la función callback está disponible para el siguiente elemento como argumento de su función callback. En caso de que no se proporcione el Valor inicial, se llama directamente a la función de devolución de Reduce en el 2º elemento, pasando el 1º elemento como previousValue. En caso de que el matriz esté vacía y tampoco se proporcione el valor inicial, se lanza un TypeError.

La función reductora requiere cuatro argumentos:

  • accumulator - El acumulador acumula los valores de retorno de callback. Es el valor acumulado previamente devuelto en la última invocación de la callback
  • currentValue - El elemento actual que se está procesando en el array
  • indexOptional(Optional) - El índice del elemento actual que se está procesando en el array
  • array (Optional) - El array, se recurrió al método reduce
const numbers = [10, 7, 5];
// Sum of all array elements
const sum = numbers.reduce(
(accumulator, currentValue) => {
console.log('accumulator:', accumulator)
return accumulator + currentValue;
},
0
)
console.log('sum:', sum)
// OUTPUT //
accumulator: 0
accumulator: 10
accumulator: 17
22

Desglosemos lo que sucede en el método reduce usando el ejemplo anterior. Hemos pasado la función reductora y el valor inicial del acumulador como argumento. Veamos qué pasa cuando pasamos en bucle por la matriz de números

  • En la primera iteración, el valor inicial del acumulador como 0 (segundo argumento del método de reducción). 'acumulador': 0' se registró. En la segunda línea de la función reductora, se añadió el valor actual (10) en el acumulador (acumulador = 0 + 10).
  • En la segunda iteración, el acumulador ahora tiene el valor 10, así que 'acumulador': 10' se registró. En la segunda línea de la función reductora, se añadió el valor actual (7) en el acumulador (acumulador = 10 + 7).
  • En la tercera iteración, el acumulador ahora tiene el valor 17, así que 'acumulador': 17' se registró. En la segunda línea de la función reductora, se añadió el valor actual (5) en el acumulador (acumulador = 17 + 5).
  • Después de que la iteración del array se completa, la función de reducción devolvió el acumulador(22) y almacenado en la variable de suma y 'suma: 22' se registró

Por favor, ten en cuenta los siguientes errores al utilizar el método de reducción

  • Si no pasas un valor inicial, reduce asumirá que el primer elemento de tu matriz es tu valor inicial
  • Debes devolver algo para que la función de reducción funcione. Siempre comprueba y asegúrate de que devuelves el valor que quieres

Cuando se usa => cuando se quiere mapear y filtrar juntos y se tienen muchos datos para repasar se usa el método reduce()

reverse()

.reverse() se usa para invertir un arreglo de JavaScript. La función reverse() modifica la matriz de llamada en sí misma y devuelve una referencia a la matriz ahora invertida.

var arr = [1,2,3,4,5,6,7,8,9,10]; 
arr.reverse(); 
console.log(arr); //Output : [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] 

reduceRight()

El método reduceRight() ejecuta una función reductora en cada elemento del array (de derecha a izquierda), lo que da como resultado un único valor de output

En resumen, reduceRight() funciona igual que el reduce(), la única diferencia es el orden del procesamiento de los elementos del array

La función reductora toma cuatro argumentos, igual que el método reduce():

  • accumulator - El acumulador acumula los valores de retorno de callback. Es el valor acumulado previamente devuelto en la última invocación de la callback
  • currentValue - El elemento actual que se está procesando en el array
  • indexOptional(Optional) - El índice del elemento actual que se está procesando en el array
  • array (Optional) - El array, se recurrió al método reduceRight
const numbers = [10, 7, 5];
// Sum of all array elements
const sum = numbers.reduceRight(
(accumulator, currentValue) => {
console.log('accumulator:', accumulator)
return accumulator + currentValue;
},
0
)
console.log('sum:', sum)
// OUTPUT //
accumulator: 0
accumulator: 5
accumulator: 12
sum: 22

No voy a repasar cómo funcionaba este código ya que funciona igual que el método reduce()

Cuándo usar => Cuando necesites reducir un array de derecha a izquierda usa el método reduceRight()

every()

La función every() se utiliza cuando se necesita validar cada elemento de un array determinado. Acepta una función de callback como argumento que se llama para cada elemento del array. La función callback tiene que devolver bien sea verdadero o falso. Si todos los elementos del array satisfacen la función de validación y, por lo tanto, la función de callback devuelve true en todos los elementos del array, entonces devuelve true. En caso contrario, devuelve false, en cuanto encuentra el primer elemento que no satisface la función de validación.

every() se invoca con una función de devolución de llamada con los siguientes tres argumentos:

  • currentValue - El elemento actual que se está procesando en el array
  • indexOptional(Optional) - El índice del elemento actual que se está procesando en el array
  • array (Optional) - El array, se recurrió al método every
const numbers1 = [10, 0, -5, 8, 9];
// Check if every number in array is positive
console.log(numbers1.every((e) => e > 0))
// false
const numbers2 = [35, 50, 52, 48, 39];
// Check if every number in array is greater than 30
console.log(numbers2.every((e) => e > 30))
// true

Cuándo usar => Cuando necesites comprobar si cada elemento/objeto del array satisface una condición particular, usa el método every()

some()

El método some() comprueba si al menos uno de los elementos del array supera la prueba implementada por la función proporcionada. Devuelve un valor booleano

some() se invoca con una función de devolución de llamada con los siguientes tres argumentos:

  • currentValue - El elemento actual que se está procesando en el array
  • indexOptional(Optional) - El índice del elemento actual que se está procesando en el array
  • array (Optional) - El array, se recurrió al método some
const numbers1 = [10, 0, -5, 8, 9];
// Check if some numbers in the array are negative
console.log(numbers1.some((e) => e < 0))
// true
const numbers2 = [35, 50, 52, 48, 39];
// Check if some numbers in the array are greater than 100
console.log(numbers2.some((e) => e > 100))
// false

Cuándo usar => Cuando necesites comprobar si cada elemento/objeto del array satisface una condición particular, usa el método some()

includes()

El método includes() determina sensiblemente si un array contiene un elemento especificado. Devuelve true si el array contiene el elemento de otra manera false.

includes() se invoca con los siguientes dos argumentos:

  • element - El elemento a buscar
  • startIndex(Optional) - Por defecto 0. En qué posición del array iniciar la búsqueda
const fruits = ["Banana", "Peach", "Apple", "Mango", "Orange"];
console.log(fruits.includes("Mango"));
// true
console.log(fruits.includes("Jackfruit"));
// false

Cuándo usar => Cuando necesitas encontrar si un valor existe en una matriz

concat()

El método concat() se utiliza para fusionar dos o más arrays. Devuelve un nuevo array que contiene todos los elementos de la llamada y los arrays llamados

concat() se invoca con el siguiente argumento:

  • nArray(Optional) - una o más Arrays y/o valores para concatenar
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
console.log(num1.concat(num2, num3));
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(num1.concat(num3));
// [1, 2, 3, 7, 8, 9]

Cuándo usar => Cuando se necesita fusionar dos o más arrays sin modificar los arrays existentes

sort()

El método sort() ordena los elementos de la matriz. Por defecto, ordena los elementos alfabéticamente. Si quieres ordenar numéricamente los elementos podemos hacerlo con la ayuda de la función de comparación

const fruits = ["Banana", "Peach", "Apple", "Mango", "Orange"];
console.log(fruits.sort());
// [ 'Apple', 'Banana', 'Mango', 'Orange', 'Peach' ]
const numbers = [100, 1, 40, 5, 25, 10];
console.log(numbers.sort());
// [1, 10, 100, 25, 40, 5]
console.log(numbers.sort((a, b) => { return a - b }));
// [ 1, 5, 10, 25, 40, 100 ]

Veamos lo que sucedió en los ejemplos anteriores

  • El primer ejemplo es bastante sencillo. La variedad de frutas se ordenó alfabéticamente...
  • En el segundo ejemplo, [1, 10, 100, 25, 40, 5] se imprimió. Eso es raro. Ocurrió porque la matriz se ordenó alfabéticamente y no numéricamente. Por ejemplo: "25" es más grande que "100", porque "2" es más grande que "1".
  • En el tercer ejemplo, corregimos el ejemplo anterior con la ayuda de la función de comparación

Cuándo usar => Cuando necesitas ordenar los elementos de un array

slice()

El método slice() devuelve los elementos seleccionados en un nuevo array

slice() se invoca con los siguientes dos argumentos:

  • startIndex(Optional) -Un número entero que especifica dónde empezar la selección. Puedes usar números negativos para seleccionar desde el final de un array. Si se ignora, actúa como "0"
  • endIndex(Optional) - Un número entero que especifica dónde terminar la selección. Si se ignora, se seleccionarán todos los elementos desde la posición inicial hasta el final del array. Puedes usar números negativos para seleccionar desde el final de un array
const fruits = ["Banana", "Peach", "Apple", "Mango", "Orange"];
console.log(fruits.slice(2, 4));
// [ 'Apple', 'Mango' ]
console.log(fruits.slice(3));
// ['Mango', 'Orange']

Cuándo usar => Cuando necesites devolver los elementos seleccionados en un nuevo array

splice()

El método splice() añade/elimina elementos a/desde un array, y devuelve los elementos eliminados. Es un método muy útil para modificar los elementos del array

slice() se invoca con los siguientes argumentos:

  • index - Un entero que especifica en qué posición agregar/quitar elementos, Puede usar valores negativos para especificar la posición desde el final de la matriz
  • howManyToRemove (Optional) - El número de elementos que deben ser eliminados. Si se establece en 0, no se eliminarán elementos
  • item1, ... , itemX(Optional) - Los nuevos elementos que se añadirán al array
const fruits1 = ["Banana", "Peach", "Apple", "Mango", "Orange"];
// At position 2, add the new elements, and remove 1 item
fruits1.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits1)
// [ 'Banana', 'Peach', 'Lemon', 'Kiwi', 'Mango', 'Orange' ]
// At position 1, remove 2 elements
const fruits2 = ["Banana", "Peach", "Apple", "Mango", "Orange"];
fruits2.splice(1, 2);
console.log(fruits2)
// [ 'Banana', 'Mango', 'Orange' ]

Cuándo usar => Cuando se necesita agregar/quitar elementos a/de un array

pop()

El método pop() elimina el último elemento de un array y devuelve ese elemento. Este método cambia la longitud del array

const animals = ['rat', 'cat', 'bat', 'snake', 'dog'];
console.log(animals.pop());
// "dog"
console.log(animals);
// ['rat', 'cat', 'bat', 'snake']

Cuándo usar => Cuando necesites quitar el último elemento de un array, usa el método map()

shift()

El método shift() quita el primer elemento de un array y devuelve ese elemento. Este método cambia la longitud del array

const animals = ['rat', 'cat', 'bat', 'snake', 'dog'];
console.log(animals.shift());
// "rat"
console.log(animals);
// ['cat', 'bat', 'snake', 'dog']

Cuándo usar => Cuando necesites quitar el primer elemento de un array, usa el método shift()

push()

El método push() añade un nuevo elemento al final de un array y devuelve la nueva longitud. Como los arrays en JavaScript son objetos mutables, podemos fácilmente añadir o quitar elementos del array. Y cambia dinámicamente a medida que modificamos los elementos del array.

const animals = ['rat', 'cat', 'bat', 'snake', 'dog'];
animals.push('bull');
console.log(animals);
// ['rat', 'cat', 'bat', 'snake', 'dog', 'bull']

Cuándo usar => Cuando necesites agregar un elemento al final de un arreglo usa el método push()

unshift()

El método unshift() añade un nuevo elemento al principio de un array y devuelve la nueva longitud

const animals = ['rat', 'cat', 'bat', 'snake', 'dog'];
animals.unshift('bull');
console.log(animals);
// ['bull', 'rat', 'cat', 'bat', 'snake', 'dog'];

Cuándo usar => Cuando necesites añadir un elemento al principio de un array, usa el método unshift()

 
by Luigi Nori Date: 10-08-2020 javascript array functions methods es6 visitas : 620  
 
Luigi Nori

Luigi Nori

He has been working on the Internet since 1994 (practically a mummy), specializing in Web technologies makes his customers happy by juggling large scale and high availability applications, php and js frameworks, web design, data exchange, security, e-commerce, database and server administration, ethical hacking. He happily lives with @salvietta150x40, in his (little) free time he tries to tame a little wild dwarf with a passion for stars.

 
 
 

Artículos relacionados

Cookies HTTP: cómo funcionan y cómo usarlas

Hoy vamos a escribir sobre la forma de almacenar datos en un navegador, por qué los sitios web utilizan cookies y cómo funcionan en detalle. Continúa leyendo para averiguar cómo implementarlas…

Como construir mejores componentes de alto nivel (Higher-order components) con el Vue 3

El Vue 3 será lanzado pronto con la introducción del API de composición (Composition API). Viene con muchos cambios y mejoras en el rendimiento. Los componentes de orden superior (HOC…

Node.js: herramientas de código abierto para los desarrolladores

De la amplia gama de herramientas disponibles para simplificar el desarrollo de Node.js, aquí están las mejores. Una encuesta en StackOverflow afirma que el 49% de los desarrolladores usan Node.js para…

Renderización lado servidor de Vue.js on Php

¿Intentas que el renderizado del lado del servidor funcione con PHP para renderizar tu aplicación Vue.js pero se atasca? Hay un montón de grandes recursos por ahí, pero hasta ahra no…

Integración de Bootstrap 4 con Vue.js usando Bootstrap-Vue

React y Vue.js son dos marcos de trabajo líderes y modernos de JavaScript para el desarrollo del front-end. Mientras que React tiene una curva de aprendizaje considerable, y un proceso…

Cómo crear un aplicación Vue.js en 5 minutos

Vue.js se está volviendo cada vez más popular, convirtiéndose en un competidor significativo de frameworks como Angular o React.js. Como front-end framework para principiantes, conquista con éxito los corazones de…

Vue.js 3, la programación orientada al futuro que no hay que perderse!

Si estás interesado en Vue.js, probablemente conozcas la 3ª versión de este framework, que se publicará en breve. La nueva versión de momento está en desarrollo, pero todas las características…

Vue.js - Cómo usar (con seguridad) un plugin de jQuery con Vue.js

No es una buena idea usar jQuery y Vue.js en la misma interfaz. No lo hagas si puedes evitarlo, pero probablemente si estás leyendo esto no porque quieras usar jQuery…

Como construir una web application con Styled Components en Vue.js

Styled-Components es una biblioteca muy popular dentro de la comunidad React y React Native, y ahora puedes usarla en Vue.js. Para aquellos que no lo saben, Styled-Components es una biblioteca muy…

10 librerías para machine learning en JavaScript

JavaScript es actualmente uno de los lenguajes de programación más populares. Su principal aplicación se encuentra en las aplicaciones web, utilizándose para dar funcionalidad a las páginas web dinámicas. Otro…

javascript: Aprende a usar Breakpoints en la depuración de código en Chrome DevTools

La depuración es una tarea muy difícil, especialmente cuando se trabaja en proyectos complejos. Las herramientas de depuración incorporadas en el navegador han hecho que sea bastante fácil depurar códigos.   Así…

5 Librerias Javascript gratis para la autenticación de usuarios

Nos interesa la seguridad: la autenticación es una cuestión importante a la hora de crear una aplicación web dinámica. La autenticación es para identificar a los usuarios y proporcionar diferentes derechos…