Todas las funciones de javascript y los métodos para manipular los arrays

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()

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.