Funciones de matriz de JavaScript más útiles

En este tutorial de JavaScript, veremos las funciones de matriz de JavaScript más útiles. Para este tutorial, tomamos el código fuente de los profesionales y lo pusimos todo en un solo depósito. El código fuente de los profesionales sería el JavaScript que impulsa los marcos de JavaScript más populares en la actualidad, como Angular, React, Vue, Mithril y muchos más. Una vez que tenemos todo este código fuente en el mismo archivo, verificamos el número de veces que se utilizó cada función de matriz en el código. Por supuesto, las funciones de matriz de JavaScript que tenían una gran cantidad de llamadas se presentan primero, ya que esto sugeriría que esas funciones particulares son muy útiles para los profesionales. Las funciones de matriz que no se utilizaron con tanta frecuencia se colocan más abajo en la lista. Veamos cuáles llegaron a la parte superior de nuestra lista de funciones de matriz de JavaScript más útiles.

1¿Qué son las matrices de JavaScript?

2Array.prototype.push ()

3Array.prototype.indexOf ()

4Array.prototype.slice ()

5Array.prototype.toString ()

6Array.prototype.filter ()

7Array.prototype.join ()

8Array.prototype.splice ()

9Array.prototype.forEach ()

10Array.prototype.concat ()

11Array.prototype.shift ()

12Array.prototype.unshift ()

13Array.prototype.map ()

14Array.prototype.sort ()

15Array.prototype.pop ()

dieciséisArray.prototype.reduce ()

17Array.prototype.some ()

18Array.prototype.lastIndexOf ()

19Array.prototype.reduceRight ()

20Array.prototype.every ()

21Array.prototype.reverse ()

1. ¿Qué son las matrices JavaScript?

En JavaScript, una matriz representa una colección ordenada de valores. La matriz consta de uno o más elementos, cada uno con una posición numerada dentro de la matriz. Esto también se denomina índice. Cualquier elemento de matriz dado puede contener cualquier tipo ofrecido por el lenguaje JavaScript. En otras palabras, puede mezclar y combinar los distintos tipos dentro de la misma matriz. Al igual que la mayoría de los lenguajes de programación, las matrices en JavaScript están basadas en cero. Esto significa que comienzan en 0 y avanzan desde allí. Las matrices en JavaScript crecen y se encogen como por arte de magia. Es decir, no es necesario que especifique el tamaño de la matriz antes de colocar valores en la matriz. A medida que agrega elementos, la matriz crece dinámicamente para usted. Lo mismo sucede cuando eliminas elementos. Todas las matrices de JavaScript tienen un enlace a Array.prototype que es cómo obtenemos acceso a todas las funciones muy útiles que cubriremos aquí en este tutorial. En el verdadero estilo de JavaScript, estas funciones no solo funcionan en cualquier matriz, sino también en cualquier objeto "similar a una matriz".

2. Array.prototype.push ()

array.push (elemento1,…, elementoN)

Visión de conjunto

La push()función agrega los argumentos que se le dan, en orden, al final de la matriz. Modifica la matriz directamente, en lugar de crear una nueva matriz.

¿Qué push () devuelve

Cuando realiza una llamada a push(), devuelve el número total de elementos en la matriz, después de que los argumentos proporcionados se hayan agregado al final de la matriz.

ejemplos de la función array.push ()

1
2
3
4
5
var characters = ['Darth Vader', 'Yoda', 'Boba Fett'];
var total = characters.push('Luke Skywalker', 'Han Solo');
 
console.log(characters); // ["Darth Vader", "Yoda", "Boba Fett", "Luke Skywalker", "Han Solo"]
console.log(total);      // 5

3. Array.prototype.indexOf ()

array.indexOf (searchElement [, fromIndex = 0])

Visión de conjunto

La indexOf()función JavaScript busca en una matriz un elemento que contenga un valor específico y luego devuelve el primer índice que contiene ese valor. Puede proporcionar un índice inicial para la función si lo desea; de lo contrario, la búsqueda comenzará desde el índice 0.

Qué devuelve indexOf ()

El índice más bajo que es mayor o igual al inicio de la matriz en la que el elemento es igual al valor dado. Si no se encuentra ninguna coincidencia, la indexOf()función devuelve -1.

Ejemplos de funciones array.indexOf ()

1
2
3
4
5
6
7
8
9
10
11
12
var starwars = ['Episode 4: A New Hope',
    'Episode 5: The Empire Strikes Back',
    'Episode 6: Return of the Jedi',
    'Episode 1: The Phantom Menace',
    'Episode 2: Attack of the Clones',
    'Episode 3: Revenge of the Sith',
    'Episode 7: The Force Awakens'];
 
console.log(starwars.indexOf('Episode 7: The Force Awakens'));           // 6
console.log(starwars.indexOf('Episode 3: Revenge of the Sith'));          // 5
console.log(starwars.indexOf('Episode 2: Attack of the Clones', 3));     // 4
console.log(starwars.indexOf('Episode 1: The Phantom Menace', -4));   // 3

1
2
3
4
5
6
7
8
9
var locatedat = [];
var enemies = ['Kylo Ren', 'Darth Vader', 'Storm Trooper', 'General Hux', 'Emperor Palpatine', 'Storm Trooper'];
var enemy = 'Storm Trooper';
var enemylocation = enemies.indexOf(enemy);
while (enemylocation != -1) {
    locatedat.push(enemylocation);
    enemylocation = enemies.indexOf(enemy, enemylocation + 1);
}
console.log(locatedat); //  2, 5

El ejemplo anterior es un poco más complicado. Tenemos una gran variedad de enemigos y puede haber varios de un enemigo dado. Al usarlo indexOf(), podemos encontrar todas las instancias de 'Storm Trooper' en nuestra variedad de enemigos. Ejecutar el código nos muestra que hemos encontrado un Storm Trooper en el índice 2 y el índice 5 de nuestra matriz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function theGoodSide(goodguys, goodguy) {
    if (goodguys.indexOf(goodguy) === -1) {
        goodguys.push(goodguy);
        console.log('The new goodguys are ' + goodguys);
    } else if (goodguys.indexOf(goodguy) > -1) {
        console.log(goodguy + ' is already part of the goodguys.');
    }
}
 
var thegoodguys = ['Luke Skywalker', 'Han Solo', 'Princess Leia'];
 
theGoodSide(thegoodguys, 'Han Solo');  // Han Solo is already part of the goodguys.
theGoodSide(thegoodguys, 'Yoda');  //  The new goodguys are Luke Skywalker,Han Solo,Princess Leia,Yoda
theGoodSide(thegoodguys, 'Ben Kenobi');  //  The new goodguys are Luke Skywalker,Han Solo,Princess Leia,Yoda,Ben Kenobi
theGoodSide(thegoodguys, 'R2-D2');  //  The new goodguys are Luke Skywalker,Han Solo,Princess Leia,Yoda,Ben Kenobi,R2-D2
theGoodSide(thegoodguys, 'Luke Skywalker');  //  Luke Skywalker is already part of the goodguys.

Este ejemplo hace uso de una función personalizada que podemos usar para asegurarnos de que todos nuestros buenos estén contabilizados. Comprobamos si el personaje existe en nuestra colección, y si no, lo añadimos a nuestro lado bueno.

4. Array.prototype.slice ()

array.slice ([inicio [, final]])

Visión de conjunto

La slice()función de JavaScript toma un argumento de inicio y finalización. Utiliza estos puntos de inicio y finalización para llegar a la matriz y eliminar una cantidad específica de elementos. La posición a la que hace referencia por inicio se incluye en los resultados, pero el final no se incluye. En otras palabras, todos los elementos se devuelven desde el principio hasta el elemento final, pero sin incluirlo. Si no proporciona un valor final, slice()devolverá el resto de la matriz comenzando desde el punto de partida dado. La matriz original se deja intacta.

Qué rebanada () devuelve

La slice()función devuelve una nueva matriz que contiene todos los elementos de la matriz original desde el elemento especificado por el punto de inicio proporcionado, y hasta, pero sin incluir, el elemento especificado por el punto final proporcionado.

ejemplos de la función array.slice ()

1
2
3
4
var vaderparts = ['helmet', 'left arm', 'right arm', 'left leg', 'right leg'];
var chopped = vaderparts.slice(2,3);
 
console.log(chopped); // right arm

5. Array.prototype.toString ()

array.toString ()

La toString()función convierte todos los elementos de una matriz en cadenas y genera una cadena grande como una lista de elementos separados por comas.

Ejemplos de funciones array.toString ()

1
2
3
4
5
var spacecraft = ['X Wing', 'Death Star', 'Millenium Falcon', 'Jedi Interceptor'];
var allspacecraft = spacecraft.toString();
 
console.log(allspacecraft);
//  X Wing,Death Star,Millenium Falcon,Jedi Interceptor

6. Array.prototype.filter ()

array.filter (devolución de llamada [, thisArg])

Visión de conjunto

La filter()función de JavaScript es muy útil para hacer exactamente lo que dice, filtrando una colección de elementos en función de una prueba determinada. Cuando llama a la filter()función, debe pasarle una devolución de llamada. Esta devolución de llamada se ejecuta contra todos los elementos de la matriz. Si esa devolución de llamada da como resultado un truevalor, ese elemento en particular se agrega a una nueva matriz. La matriz original no se modifica.

Qué filtro () devuelve

filter() devuelve una nueva matriz que contiene solo los elementos de la matriz original que devolvió verdadero cuando se ejecutó la devolución de llamada proporcionada.

ejemplos de la función array.filter ()

1
2
3
4
var summer = [10, 20, 30, 40, 50, 60, 70, 80].filter(function niceweather(temperature) {
    return temperature >= 70;
});
console.log(summer);  //  70, 80

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var spacecraft = [
    {name: 'Tie Fighter', speed: 200000},
    {name: 'Super Star Destroyer', speed: 300000},
    {name: 'Death Star', speed: 400000},
    {name: 'T65 X Wing Star fighter', speed: 500000},
    {name: 'T47 Air (snow) Speeder', speed: 600000},
    {name: '74-Z Speeder Bike', speed: 700000},
    {name: 'Millenium Falcon', speed: 800000}
];
 
function filterBySpeed(spacecraft) {
    return spacecraft.speed > 450000;
}
 
var fleet = spacecraft.filter(filterBySpeed);
 
fleet.forEach(function (craft) {
    console.log(craft.name);
});
 
// T65 X Wing Star fighter
// T47 Air (snow) Speeder
// 74-Z Speeder Bike
// Millenium Falcon

7. Array.prototype.join ()

cadena = matriz.join ([separador = ','])

Visión de conjunto

La join()función convierte cada elemento de una matriz en una cadena y luego concatena esas cadenas. Si se proporcionó la cadena de separación, se inserta entre todos los elementos de la cadena final.

Que devuelve join ()

La cadena que resulta de convertir cada elemento de la matriz original en una cadena y luego unirlos, con la cadena de separación entre los elementos.

ejemplos de funciones array.join ()

1
2
3
4
5
var wisdom = ['Yoda Says', 'Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering.'];
wisdom = wisdom.join(': ');      
console.log(wisdom);
 
//  Yoda Says: Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering.

1
2
3
4
5
var wisdom = ['Do. Or do not. There is no try', 'Luminous beings are we…not this crude matter', 'Wars not make one great', 'Judge me by my size, do you?', 'Truly wonderful, the mind of a child is'];
var wisdom = wisdom.join(' <=***=> ');
console.log(wisdom);
 
//  Do. Or do not. There is no try <=***=> Luminous beings are we…not this crude matter <=***=> Wars not make one great <=***=> Judge me by my size, do you? <=***=> Truly wonderful, the mind of a child is

1
2
3
4
5
years = [1977, 1980, 1983, 1999, 2002, 2005, 2015];
years = years.join(', '); 
 
console.log('New Star Wars movies came out in ' + years);
//  New Star Wars movies came out in 1977, 1980, 1983, 1999, 2002, 2005, 2015

8. Array.prototype.splice ()

array.splice (start, deleteCount [, item1 [, item2 [,…]]])

Visión de conjunto

La splice()función elimina cero o más elementos a partir de la ubicación de inicio proporcionada y reemplaza esos elementos con cero o más valores nuevos que se proporcionaron. Los elementos existentes en la matriz se cambian según sea necesario para dejar espacio para cualquier elemento agregado o eliminado. Lo que hay que recordar acerca de la splice()función, es que no modifica la matriz original directamente .

Devoluciones

Una matriz que contiene cualquier elemento que pueda haber sido eliminado de la matriz.

ejemplos de la función array.splice ()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var darkSide = ['Darth Vader', 'Grand Moff Tarkin', 'Boba Fett', 'Emperor Palpatine'];
 
//-----------------------------------------------------//
 
// removes 0 elements from index 2, and inserts 'Jabba the Hutt'
var removed = darkSide.splice(2, 0, 'Jabba the Hutt');
console.log(darkSide);
// ['Darth Vader', 'Grand Moff Tarkin', 'Jabba the Hutt', 'Boba Fett', 'Emperor Palpatine']
console.log(removed);
// [], no elements removed
 
//-----------------------------------------------------//
 
// removes 1 element from index 3
removed = darkSide.splice(3, 1);
console.log(darkSide);
// ['Darth Vader', 'Grand Moff Tarkin', 'Jabba the Hutt', 'Emperor Palpatine']
console.log(removed);
// ['Boba Fett']
 
//-----------------------------------------------------//
 
// removes 1 element from index 2, and inserts 'Darth Maul'
removed = darkSide.splice(2, 1, 'Darth Maul');
console.log(darkSide);
// ['Darth Vader', 'Grand Moff Tarkin', 'Darth Maul', 'Emperor Palpatine']
console.log(removed);
// ['Jabba the Hutt']
 
//-----------------------------------------------------//
 
// removes 2 elements from index 0, and inserts 'Count Dooku', 'General Grievous' and 'Asajj Ventress'
removed = darkSide.splice(0, 2, 'Count Dooku', 'General Grievous', 'Asajj Ventress');
console.log(darkSide);
// ['Count Dooku', 'General Grievous', 'Asajj Ventress', 'Darth Maul', 'Emperor Palpatine']
console.log(removed);
// ['Darth Vader', 'Grand Moff Tarkin']
 
//-----------------------------------------------------//
 
// removes 2 elements from index 3
removed = darkSide.splice(3, darkSide.length);
console.log(darkSide);
// ['Count Dooku', 'General Grievous', 'Asajj Ventress']
console.log(removed);
// ['Darth Maul', 'Emperor Palpatine']

9. Array.prototype.forEach ()

array.forEach (devolución de llamada [, thisArg])

Visión de conjunto

La forEach()función ejecuta una función proporcionada en cada elemento de la matriz. forEach()no tiene valor de retorno y no devuelve la matriz original. forEach()está relacionado con el map(), filter(), every(), y some()funciones y, como tales, comparten algunos detalles relacionados. Todos esperan una función de devolución de llamada como primer argumento. El segundo argumento opcional es una forma de especificar el thisvalor de la función de devolución de llamada. Todas estas funciones comprueban la longitud de la matriz antes de hacer un bucle. Si la devolución de llamada proporcionada agrega elementos a la matriz durante su ejecución, esos elementos no se incluyen para el bucle por parte delforEach(). También es interesante notar que si la devolución de llamada cambia los valores en la matriz original antes de que se repitan, esos valores cambiados se pasarán durante la ejecución de la devolución de llamada. También puede consultar el tutorial Funciones de orden superior en JavaScript.

ejemplos de la función array.forEach ()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var planetsAndMoons = ['Alderaan', 'Bespin', 'Coruscant', 'DQar', 'Dagobah', 'Endor', 'Geonosis', 'Hosnian Prime', 'Hoth', 'Jakku', 'Kamino', 'Kashyyyk', 'Lothal', 'Mustafar', 'Naboo', 'Sullust', 'Takodana', 'Tatooine', 'Utapau', 'Yavin', 'Yavin 4'];
 
function listPlanets(element, index, array) {
    console.log('planetsAndMoons[' + index + '] = ' + element);
}
 
planetsAndMoons.forEach(listPlanets);
 
//  planetsAndMoons[0] = Alderaan
//  planetsAndMoons[1] = Bespin
//  planetsAndMoons[2] = Coruscant
//  planetsAndMoons[3] = DQar
//  planetsAndMoons[4] = Dagobah
//  planetsAndMoons[5] = Endor
//  planetsAndMoons[6] = Geonosis
//  planetsAndMoons[7] = Hosnian Prime
//  planetsAndMoons[8] = Hoth
//  planetsAndMoons[9] = Jakku
//  planetsAndMoons[10] = Kamino
//  planetsAndMoons[11] = Kashyyyk
//  planetsAndMoons[12] = Lothal
//  planetsAndMoons[13] = Mustafar
//  planetsAndMoons[14] = Naboo
//  planetsAndMoons[15] = Sullust
//  planetsAndMoons[16] = Takodana
//  planetsAndMoons[17] = Tatooine
//  planetsAndMoons[18] = Utapau
//  planetsAndMoons[19] = Yavin
//  planetsAndMoons[20] = Yavin 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var numbers = [2, 4, 6];
 
numbers.original = [];
 
numbers.forEach(function (element, index, numbers) {
    numbers[index] *= 2;
    numbers.original.push(element);
});
 
function listNumbers(element, index) {
    console.log('index' + index + ' has element ' + element);
}
 
numbers.original.forEach(listNumbers);
numbers.forEach(listNumbers);
 
//  index0 has element 2
//  index1 has element 4
//  index2 has element 6
//  index0 has element 4
//  index1 has element 8
//  index2 has element 12

10. Array.prototype.concat ()

var new_array = old_array.concat (valor1 [, valor2 [,… [, valorN]]])

Visión de conjunto

concat()es una función que crea una nueva matriz que es el resultado de agregar los argumentos proporcionados a la matriz original. La matriz original se deja intacta y la nueva matriz es la original más los elementos agregados. Si alguno de los argumentos de la concat()función son en sí mismos una matriz, entonces se agregan los elementos de esa matriz proporcionada, en lugar de toda la matriz en sí.

Devoluciones

Una nueva matriz, que se crea agregando cada uno de los argumentos proporcionados a la matriz original.

ejemplos de la función array.concat ()

1
2
3
4
5
6
7
8
var legoStarWarsGames = ['Empire Vs Rebels', 'Ultimate Rebel', 'The Quest for R2-D2'];
var legoStarWarsSets = [10188, 75111, 75110, 75109];
 
var gamesAndSets = legoStarWarsGames.concat(legoStarWarsSets);
 
console.log(gamesAndSets);
 
//  ["Empire Vs Rebels", "Ultimate Rebel", "The Quest for R2-D2", 10188, 75111, 75110, 75109]

1
2
3
4
5
6
7
8
9
var legoStarWarsGames = ['Empire Vs Rebels', 'Ultimate Rebel', 'The Quest for R2-D2'];
var legoStarWarsSets = [10188, 75111, 75110, 75109];
var availablePlatforms = ['Wii', 'Xbox', 'Playstation'];
 
var gamesSetsPlatforms = legoStarWarsGames.concat(legoStarWarsSets, availablePlatforms);
 
console.log(gamesSetsPlatforms);
 
//  ["Empire Vs Rebels", "Ultimate Rebel", "The Quest for R2-D2", 10188, 75111, 75110, 75109, "Wii", "Xbox", "Playstation"]

11. Array.prototype.shift ()

array.shift ()

Visión de conjunto

La shift()función elimina y devuelve el primer elemento de la matriz original. Todos los elementos restantes en la matriz se desplazan una ranura hacia la izquierda para llenar el agujero creado al eliminar el primer elemento. Si intenta aplicar esta función a una matriz vacía, no hará nada y simplemente regresará undefined. La shift()función no crea una nueva matriz, modifica la matriz original directamente.

Devoluciones

shift() devuelve el primer elemento de la matriz original.

ejemplos de la función array.shift ()

1
2
3
4
5
6
7
8
9
10
11
12
var starWarsCreatures = ['Tach', 'Kath hound', 'Ruggers', 'Spice spider'];
 
console.log('starWarsCreatures before: ' + starWarsCreatures);
// "starWarsCreatures before: Tach,Kath hound,Ruggers,Spice spider"
 
var shifted = starWarsCreatures.shift();
 
console.log('starWarsCreatures after: ' + starWarsCreatures);
// "starWarsCreatures after: Kath hound,Ruggers,Spice spider"
 
console.log('Removed this element: ' + shifted);
// "Removed this element: Tach"

12. Array.prototype.unshift ()

array.unshift ([elemento1 [,… [, elementoN]]])

Visión de conjunto

Un opuesto directo a la shift()función que acabamos de discutir es la unshift()función. unshift()inserta cualquier argumento que le pase al principio de la matriz. Todos los elementos existentes deben desplazarse hacia la derecha para dejar espacio para los nuevos elementos. Cada argumento que se pasa a unshift()se agrega en orden a partir del índice 0. Además, unshift()se modifica la matriz original directamente.

Devoluciones

La nueva longitud de la matriz.

ejemplos de la función array.unshift ()

1
2
3
4
5
6
7
8
9
10
11
12
var starWarsCreatures = ['Eopie', 'Acklay', 'Talortai', 'Boma'];
 
console.log('starWarsCreatures before: ' + starWarsCreatures);
// starWarsCreatures before: Eopie,Acklay,Talortai,Boma
 
var newcount = starWarsCreatures.unshift('Climbing tauntaun');
 
console.log('starWarsCreatures after: ' + starWarsCreatures);
// starWarsCreatures after: Climbing tauntaun,Eopie,Acklay,Talortai,Boma
 
console.log('The array now has: ' + newcount + ' elements');
// The array now has: 5 elements

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var starWarsCreatures = ['Eopie', 'Acklay', 'Talortai', 'Boma'];
 
console.log('starWarsCreatures before: ' + starWarsCreatures);
// starWarsCreatures before: Eopie,Acklay,Talortai,Boma
 
var newcount = starWarsCreatures.unshift('Climbing tauntaun');
 
console.log('starWarsCreatures after: ' + starWarsCreatures);
// starWarsCreatures after: Climbing tauntaun,Eopie,Acklay,Talortai,Boma
 
console.log('The array now has: ' + newcount + ' elements');
// The array now has: 5 elements
 
newcount = starWarsCreatures.unshift(['Gullipuds', 'Mynock']);
 
 
console.log('starWarsCreatures after: ' + starWarsCreatures);
//  starWarsCreatures after: Gullipuds,Mynock,Climbing tauntaun,Eopie,Acklay,Talortai,Boma
 
console.log('The array now has: ' + newcount + ' elements');
//  The array now has: 6 elements

13. Array.prototype.map ()

array.map (devolución de llamada [, thisArg])

Visión de conjunto

Se trata de una función de JavaScript muy útil y se utiliza todo el tiempo en software profesional. La map()función recorre cada elemento de la matriz, ejecutando una función de devolución de llamada en cada elemento. Una vez que map()ha completado el ciclo a través de la matriz, toma los resultados de cada devolución de llamada aplicada a cada elemento y devuelve esos resultados en su totalidad como una matriz. Te queda una nueva matriz con valores actualizados y una matriz antigua que tiene los valores originales. Estas dos matrices tienen la misma longitud. Cuando se invoca la devolución de llamada, se hace con tres argumentos. Estos son el valor del elemento, el índice del elemento y el objeto Array que se atraviesa. Si se proporciona el segundo parámetro opcional map(), se utilizará comothis valor para cada ejecución de la devolución de llamada.

nota: Elmap()yforEach()funciones parecen que son los mismos, pero en realidad son diferentes. La diferencia es queforEach()itera sobre una matriz y aplica alguna operación con efectos secundarios a cada miembro de la matriz, como guardar cada uno en la base de datos o algún otro efecto secundario. map()por otro lado, itera sobre una matriz, actualiza cada miembro de esa matriz y devuelve otra matriz del mismo tamaño con los miembros transformados (como convertir una matriz de cadenas a minúsculas).

Devoluciones

map() devuelve una nueva matriz con elementos calculados por la función de devolución de llamada proporcionada.

ejemplos de la función array.map ()

1
2
3
4
5
6
7
var starwars = ['star wars', 'the phantom menace', 'the force awakens'];
var swModified = starwars.map(function (element) {
    return element.toUpperCase();
});
 
console.log(swModified);
//   ["STAR WARS", "THE PHANTOM MENACE", "THE FORCE AWAKENS"]

1
2
3
4
5
6
7
var one = [3, 5, 7];
var two = one.map(function (number) {
    return number * number;
});
 
console.log(one); // [3, 5, 7]
console.log(two); //  [9, 25, 49]

1
2
3
4
5
6
7
var str = 'The Clone Wars';
var arr = Array.prototype.map.call(str, function (el) {
    return el;
});
 
console.log(str); // The Clone Wars
console.log(arr); //  ["T", "h", "e", " ", "C", "l", "o", "n", "e", " ", "W", "a", "r", "s"]

14. Array.prototype.sort ()

array.sort ([compareFunction])

Visión de conjunto

Si desea ordenar una matriz en JavaScript, puede hacerlo con la sort()función incorporada. sort()aplica la ordenación directamente a la matriz original, no se realiza ninguna copia de la matriz. Opcionalmente, puede proporcionar una función de devolución de llamada que determinará el comportamiento del ordenamiento. Si no proporciona uno, la sort()función primero convertirá todos los elementos en cadenas y luego los ordenará en función de algo llamado valor de punto de código Unicode. Básicamente, eso significa alfabético, pero con algunas reglas especiales, como letras mayúsculas antes de minúsculas.

Devoluciones

sort() devuelve una referencia a la matriz original.

ejemplos de la función array.sort ()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var creatures = ['Pug jumper', 'Rong boars', 'Wamba', 'Oslet'];
creatures.sort(); //
 
var nums = [1, 10, 2, 21, 33, 04, 12, 09, 300];
nums.sort(); // [1, 10, 2, 21]
// Watch out that 10 comes before 2,
// because '10' comes before '2' in Unicode code point order.
 
var spacecraft = ['Lambda Class Shuttle', 'imperial landing craft', '4 Tantive'];
spacecraft.sort();
// In Unicode, numbers come before upper case letters,
// which come before lower case letters.
 
console.log(creatures);
//  ["Oslet", "Pug jumper", "Rong boars", "Wamba"]
 
console.log(nums);
//   [1, 10, 12, 2, 21, 300, 33, 4, 9]
 
console.log(spacecraft);
//   ["4 Tantive", "Lambda Class Shuttle", "imperial landing craft"]

Como podemos ver en el ejemplo anterior, cuando no proporciona una función de devolución de llamada al método de clasificación, es posible que el orden no sea el esperado. Las reglas para realizar pedidos en Unicode son un poco únicas. Por ejemplo, los números van antes de las letras mayúsculas y las letras mayúsculas antes de las minúsculas. Además, una matriz de números se convierte en cadenas antes de ordenar, por eso vemos 33 antes que 4 y 9 en el ejemplo anterior. A continuación, se muestra un ejemplo de función de devolución de llamada para mostrar los números de pedido como podría esperar.

1
2
3
4
5
6
7
8
9
var nums = [1, 10, 2, 21, 33, 04, 12, 09, 300];
nums.sort(numsasexpected);
 
function numsasexpected(one, two) {
    return one - two;
}
 
console.log(nums);
//   [1, 2, 4, 9, 10, 12, 21, 33, 300]

15. Array.prototype.pop ()

array.pop ()

Visión de conjunto

Lo contrario de la push()función sería la pop()función. La pop()función elimina el último elemento de una matriz, disminuye la longitud de la matriz y devuelve el valor que se eliminó de la matriz. Si intenta aplicar el pop()a una matriz vacía, simplemente se le undefineddevolverá.

Devoluciones

pop() devuelve el último elemento de la matriz en la que se llama.

ejemplos de la función array.pop ()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var usefulFunctions = ['push', 'indexOf', 'slice', 'toString', 'filter', 'join'];
 
console.log('usefulFunctions initially has: ' + usefulFunctions);
//  usefulFunctions initially has: push,indexOf,slice,toString,filter,join
 
var firstpop = usefulFunctions.pop();
 
console.log('after one pop, usefulFunctions has: ' + usefulFunctions);
//  after one pop, usefulFunctions has: push,indexOf,slice,toString,filter
 
var poptwo = usefulFunctions.pop();
 
console.log('after two pops, usefulFunctions has: ' + usefulFunctions);
//  after two pops, usefulFunctions has: push,indexOf,slice,toString
 
console.log('popone contains: ' + firstpop);
//  popone contains: join
 
console.log('poptwo contains: ' + poptwo);
//  poptwo contains: filter

16. Array.prototype.reduce ()

array.reduce (devolución de llamada [, initialValue])

Visión de conjunto

reduce()acepta una función como primer parámetro que actúa como un operador binario. Esta función de devolución de llamada toma dos valores, opera sobre ellos y devuelve un resultado. El número de veces que se ejecuta la función de devolución de llamada es siempre uno menos que la longitud total de la matriz original. Por ejemplo, si la matriz original tiene una longitud de 10, la devolución de llamada se ejecutará 9 veces. El resultado final es un valor combinado.

Devoluciones

El valor reducido de la matriz, que es el valor de retorno de la última vez que se ejecutó la función de devolución de llamada.

ejemplos de la función array.reduce ()

En este ejemplo, usaremos array.reduce()para operar con valores contenidos dentro de una matriz simple de objetos. array.reduce()es un poco más desafiante que algunas de las otras funciones útiles de matriz, así que dedique algo de tiempo adicional a esta si no hace clic de inmediato.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
var skills = [
    {
        name: 'Tom',
        skill: 'CSS',
        yearsExperience: 3,
        category: 'Web Design'
    },
    {
        name: 'Jim',
        skill: 'HTML',
        yearsExperience: 10,
        category: 'Web Design'
    },
    {
        name: 'Sue',
        skill: 'JavaScript',
        yearsExperience: 5,
        category: 'Web Development'
    },
    {
        name: 'Maria',
        skill: 'PHP',
        yearsExperience: 7,
        category: 'Web Development'
    },
    {
        name: 'John',
        skill: 'Photoshop',
        yearsExperience: 1,
        category: 'Web Design'
    },
    {
        name: 'David',
        skill: 'Writing',
        yearsExperience: 12,
        category: 'Content'
    },
    {
        name: 'Ellen',
        skill: 'Editor',
        yearsExperience: 5,
        category: 'Content'
    }
];
 
 
var totalexperience = skills.reduce(function (prev, current) {
    return prev + current.yearsExperience;
}, 0);
 
console.log('The team has a cumulative experience of: ' + totalexperience + ' years!');
//  The team has a cumulative experience of: 43 years!
 
var categoryExperienceTotals = skills.reduce(function (groupedByCategory, worker) {
    var category = worker.category;
    if (!groupedByCategory[category]) {
        groupedByCategory[category] = 0;
    }
    groupedByCategory[category] += worker.yearsExperience;
    return groupedByCategory;
}, {});
 
console.log('Our workers have ' + categoryExperienceTotals['Web Design'] + ' years of Web Design Experience, '
    + categoryExperienceTotals['Web Development'] + ' years of Web Development Experience, and '
    + categoryExperienceTotals['Content'] + ' years of Content production Experience!'
);
//  Our workers have 14 years of Web Design Experience, 12 years of Web Development Experience,
//  and 17 years of Content production Experience!
 
var workersByCategory = skills.reduce(function (groupedByWorkers, worker) {
    if (!groupedByWorkers[worker.category]) {
        groupedByWorkers[worker.category] = 0;
    }
    groupedByWorkers[worker.category]++;
    return groupedByWorkers;
}, {});
 
console.log('We have ' + workersByCategory['Web Design'] + ' employees in Web Design, '
    + workersByCategory['Web Development'] + ' in Web Development, and '
    + workersByCategory['Content'] + ' working in Content production!'
);
//  We have 3 employees in Web Design, 2 in Web Development, and 2 working in Content production!

17. Array.prototype.some ()

array.some (callback [, thisArg])

Visión de conjunto

Como podemos ver en la firma anterior, la some()función toma una devolución de llamada como primer argumento y un segundo argumento opcional. El segundo argumento, si se proporciona, especifica el thisvalor para las invocaciones de la devolución de llamada proporcionada. La some()función ejecuta la devolución de llamada proporcionada en cada elemento de la matriz, y si la devolución de llamada regresa true, la some()función se detiene de inmediato y regresa true. Si todas las iteraciones de devolución de llamada regresan false, entonces some()regresa false.

Devoluciones

some()devuelve trueo false. Al menos un elemento de la matriz debe regresar truecuando se aplica la devolución de llamada para some()que regrese true.

ejemplos de funciones array.some ()

1
2
3
4
5
6
7
8
9
function jsarrayfuncs(element, index, array) {
    return element === 'javascript array functions';
}
 
var one = ['the good parts', 'the better parts', 'has no parts', 'atwood loves php'];
var two = ['life is good', 'arrays for all', 'node for win', 'javascript array functions'];
 
console.log(one.some(jsarrayfuncs)); // false
console.log(two.some(jsarrayfuncs)); // true

18. Array.prototype.lastIndexOf ()

array.lastIndexOf (elemento de búsqueda [, fromIndex = longitud de arr. - 1])

Visión de conjunto

La lastIndexOf()función busca en una matriz hacia atrás un valor proporcionado. Una vez que la función encuentra ese valor, devuelve la posición del índice de donde existe ese valor en la matriz. Si proporciona el segundo argumento opcional a la lastIndexOf()función, la búsqueda comenzará desde ese punto de partida y retrocederá. Si no proporciona este segundo argumento, la búsqueda comienza al final de la matriz. Si no se encuentra ninguna coincidencia, -1se devuelve.

Devoluciones

La posición de índice más alta que es menor o igual al inicio de la matriz donde el elemento es === al valor que está buscando, o -1 si no se encuentran coincidencias.

Ejemplos de funciones array.lastIndexOf ()

1
2
3
4
5
6
7
8
9
10
11
12
var starwars = ['Episode 4: A New Hope',
    'Episode 5: The Empire Strikes Back',
    'Episode 6: Return of the Jedi',
    'Episode 1: The Phantom Menace',
    'Episode 2: Attack of the Clones',
    'Episode 3: Revenge of the Sith',
    'Episode 7: The Force Awakens'];
 
console.log(starwars.lastIndexOf('Episode 7: The Force Awakens'));    // 6
console.log(starwars.lastIndexOf('Episode 3: Revenge of the Sith'));  // 5
console.log(starwars.lastIndexOf('Episode 2: Attack of the Clones', 3));  // -1
console.log(starwars.lastIndexOf('Episode 1: The Phantom Menace', -4));  // 3

1
2
3
4
5
6
7
8
9
var locatedat = [];
var enemies = ['Kylo Ren', 'Darth Vader', 'Storm Trooper', 'General Hux', 'Emperor Palpatine', 'Storm Trooper'];
var enemy = 'Storm Trooper';
var enemylocation = enemies.lastIndexOf(enemy);
while (enemylocation != -1) {
    locatedat.push(enemylocation);
    enemylocation = enemies.lastIndexOf(enemy, enemylocation - 1);
}
console.log(locatedat);  // 5, 2

19. Array.prototype.reduceRight ()

array.reduceRight (devolución de llamada [, initialValue])

Visión de conjunto

La reduceRight()función funciona igual que reduce()con una diferencia clave. reduceRight()enumera los elementos del arreglo de derecha a izquierda (del índice más alto al más bajo) en lugar de de izquierda a derecha (del más bajo al más alto).

Ejemplo de función array.reduceRight ()

1
2
3
4
5
6
7
8
9
10
11
12
var sum = [0, 10, 20, 30].reduceRight(function (one, two) {
    return one + two;
});
 
console.log(sum); // 60
 
var flat = [[0, 10], [20, 30, [1, 2, 3, 4]], [40, 50]].reduceRight(function (one, two) {
    return one.concat(two);
}, []);
 
console.log(flat);
//   [40, 50, 20, 30, [1, 2, 3, 4], 0, 10]

20. Array.prototype.every ()

array.every (devolución de llamada [, thisArg])

Visión de conjunto

Puede usar la every()función para probar si una condición es truepara todos los elementos de una matriz. Al igual que con la mayoría de las funciones de bucle en JavaScript, se espera que proporcione una función de devolución de llamada que se ejecutará en cada elemento de la matriz de menor a mayor índice. Si todas las iteraciones regresan truecuando se ejecuta la devolución de llamada, entonces la every()función misma regresará true. Sin embargo, si una interacción de la devolución de llamada devuelve un falsevalor, se every()detiene de inmediato y regresa false.

ejemplo de función array.every ()

1
2
3
4
5
6
7
8
9
function greaterThan100(element, index, array) {
    return element > 100;
}
 
arr1 = [200, 150, 550, 300, 101];
arr2 = [330, 120, 100, 508, 102];
 
console.log(arr1.every(greaterThan100));  // true
console.log(arr2.every(greaterThan100));  // false

Array.prototype.reverse ()

array.reverse ()

Visión de conjunto

La reverse()función hace exactamente lo que crees que haría. Invierte el orden de los elementos de la matriz a la que se aplica. La reverse()función hace esto directamente en la matriz original, no se crea ni se devuelve ninguna nueva matriz. Además, tenga en cuenta que si hay muchas referencias a una matriz en particular en su programa, e invierte esa matriz, todas las referencias ahora también ven una matriz que se ha invertido. Quizás es por eso que esta función aparece más abajo en nuestra lista de funciones de matriz de JavaScript más útiles. Recuerde, cuanto más abajo aparece una función en la lista, menos veces la encontramos en uso en software de código abierto popular.

ejemplo de la función array.reverse ()

1
2
3
4
5
var javascriptArray = ['eat', 'sleep', 'breathe', 'javascript'];
javascriptArray.reverse();
 
console.log(javascriptArray);
//   ["javascript", "breathe", "sleep", "eat"]

Resumen de funciones de matriz de JavaScript más útiles

En este episodio, echamos un vistazo a todas las muchas funciones útiles de matriz de JavaScript que probablemente utilizará y le resultará útil durante la programación de JavaScript. Usamos un método para analizar los repositorios populares de código fuente de JavaScript alojados en Github, el conocido sitio web de colaboración y uso compartido de software de código abierto. Descubrimos que las funciones de JavaScript más útiles de acuerdo con la cantidad de veces que se usaron en marcos de JavaScript populares son Array. empujar () , Array. indexOf () , Matriz. slice () , Array. toString () , Array. filter () , Array. unirse () , Array. empalme () , Matriz. forEach () , Array. concat (), Array. shift () , Matriz. unshift () , Array. map () , Array. sort () , Matriz. pop () , Array. reduce () , Array. algunos () , Array. lastIndexOf () , Array. reduceRight () , Array. every () , y finalmente, Array. reverso () . Tendría sentido memorizar tantos de estos como puedas, o al menos estar muy familiarizado con los que aparecen en la parte superior de la lista.

Header Ads Widget

Funciones de matriz de JavaScript más útiles

1. ¿Qué son las matrices JavaScript?

2. Array.prototype.push ()

Visión de conjunto

¿Qué push () devuelve

ejemplos de la función array.push ()

3. Array.prototype.indexOf ()

Visión de conjunto

Qué devuelve indexOf ()

Ejemplos de funciones array.indexOf ()

4. Array.prototype.slice ()

Visión de conjunto

Qué rebanada () devuelve

ejemplos de la función array.slice ()

5. Array.prototype.toString ()

Ejemplos de funciones array.toString ()

6. Array.prototype.filter ()

Visión de conjunto

Qué filtro () devuelve

ejemplos de la función array.filter ()

7. Array.prototype.join ()

Visión de conjunto

Que devuelve join ()

ejemplos de funciones array.join ()

8. Array.prototype.splice ()

Visión de conjunto

Devoluciones

ejemplos de la función array.splice ()

9. Array.prototype.forEach ()

Visión de conjunto

ejemplos de la función array.forEach ()

10. Array.prototype.concat ()

Visión de conjunto

Devoluciones

ejemplos de la función array.concat ()

11. Array.prototype.shift ()

Visión de conjunto

Devoluciones

ejemplos de la función array.shift ()

12. Array.prototype.unshift ()

Visión de conjunto

Devoluciones

ejemplos de la función array.unshift ()

13. Array.prototype.map ()

Visión de conjunto

Devoluciones

ejemplos de la función array.map ()

14. Array.prototype.sort ()

Visión de conjunto

Devoluciones

ejemplos de la función array.sort ()

15. Array.prototype.pop ()

Visión de conjunto

Devoluciones

ejemplos de la función array.pop ()

16. Array.prototype.reduce ()

Visión de conjunto

Devoluciones

ejemplos de la función array.reduce ()

17. Array.prototype.some ()

Visión de conjunto

Devoluciones

ejemplos de funciones array.some ()

18. Array.prototype.lastIndexOf ()

Visión de conjunto

Devoluciones

Ejemplos de funciones array.lastIndexOf ()

19. Array.prototype.reduceRight ()

Visión de conjunto

Ejemplo de función array.reduceRight ()

20. Array.prototype.every ()

Visión de conjunto

ejemplo de función array.every ()

Array.prototype.reverse ()

Visión de conjunto

ejemplo de la función array.reverse ()

Resumen de funciones de matriz de JavaScript más útiles

Publicar un comentario

0 Comentarios