Una matriz es un objeto similar a una lista en JavaScript que se puede usar para almacenar múltiples valores en una sola variable. Es una colección ordenada de valores donde cada valor se denomina elemento que tiene una posición numérica predefinida en la matriz, denominada índice.
Una matriz de JavaScript puede almacenar diferentes tipos de tipos de datos en un solo cuadro:cadenas, booleanos, números, elementos HTML, objetos o incluso otras matrices. Significa que puede crear una matriz que tenga un elemento HTML almacenado en la primera posición, un objeto en la segunda, una cadena en la tercera, y así sucesivamente.
Al igual que otros lenguajes de programación como Java y Python, las matrices en JavaScript están basadas en cero . Significa que el primer elemento de la matriz tiene un índice de 0, el segundo elemento tiene un índice de 1, el tercer elemento tiene un índice de 2 y así sucesivamente.
Crear una matriz
Hay dos formas de crear una matriz en JavaScript. La forma más sencilla de crear una matriz es mediante la notación literal de matriz:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
Alternativamente, podría usar el Array global constructor de clase para inicializar una nueva matriz:
const fruits = new Array('Apple', 'Orange', 'Mango', 'Banana');
Para crear una matriz vacía, simplemente use los corchetes vacíos:
const animals = [];
Se permiten espacios y saltos de línea. Una declaración de matriz puede abarcar varias líneas:
const fruits = [
'Apple',
'Orange',
'Mango',
'Banana'
];
Si sabe de antemano la cantidad de elementos que contendrá la matriz, puede usar el conteo como argumento para el Array constructor. Se creará automáticamente una matriz vacía con el número especificado de espacios inicializados con el valor undefined :
const numbers = new Array(50);
Una matriz puede almacenar elementos de cualquier tipo:cadenas, números, funciones, objetos e incluso otras matrices:
const arr = [
'Tiger',
29.6,
{ name: 'John Doe', age: 29 },
true,
function () {
console.log('Hey there!');
},
['Apple', 'Banana']
];
Acceso a elementos de una matriz
Puede acceder a un elemento de matriz por su número de índice entre corchetes:
const animals = ['🐱', '🐭', '🐧', '🐯', '🐘'];
console.log(animals[1]); // 🐭
console.log(animals[3]); // 🐯
Tenga en cuenta que un índice de matriz comienza en 0, y no en 1. Esto significa que el primer elemento tiene un índice de 0 y el último elemento tiene un índice de longitud de matriz menos 1. La matriz anterior de cinco elementos tiene índices que comienzan de 0 a 4.
Una matriz de JavaScript puede ser multidimensional , lo que significa que un elemento de matriz puede contener otra matriz, cuyos elementos pueden contener matrices, y así sucesivamente. Para acceder a un elemento de una matriz multidimensional, debe especificar el índice varias veces:
const users = [
['John Doe', 22],
['Lisa Lee', 33],
[
['Alex', 'USA'],
['Tom Doe', 'DE']
]
];
console.log(users[1][0]); // Lisa Lee
console.log(users[2][0]); // ['Alex', 'USA']
console.log(users[2][1][0]); // Tom Doe
Adición de elementos a una matriz
La forma más sencilla de agregar un elemento a una matriz es usando el push() método:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
// add a new element
fruits.push('Cherry');
console.log(fruits); // ['Apple', 'Orange', 'Mango', 'Banana', 'Cherry']
Alternativamente, podría usar el length propiedad para insertar un elemento al final de la matriz:
fruits[fruits.length] = 'Cherry';
Cambiar un elemento de matriz
El siguiente ejemplo demuestra cómo puede cambiar el valor de un elemento de matriz:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
// change 2nd element value
fruits[1] = 'Cherry';
// print array
console.log(fruits); // [ 'Apple', 'Cherry', 'Mango', 'Banana' ]
Eliminar elementos de una matriz
Dado que las matrices de JavaScript son objetos, puede usar el delete operador para eliminar cualquier elemento específico de una matriz:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
// delete 2nd element
delete fruits[1];
console.log(fruits); // ['Apple', <1 empty item>, 'Mango', 'Banana']
Desde el delete el operador solo restablece el valor del elemento a undefined , no debe usarlo, ya que podría dejar agujeros en la matriz. En su lugar, deberías usar pop() y shift() métodos explicados a continuación.
Detectar una matriz
Una de las preguntas más comunes que se hacen en las comunidades de JavaScript es cómo determinar si la variable dada es una matriz.
El principal problema es que una matriz de JavaScript se trata internamente como un tipo especial de objeto. La sintaxis de corchetes utilizada para acceder a un elemento de matriz arr[index] es esencialmente el mismo que usamos para un objeto obj[key] . La única diferencia visible es que los números se usan como claves.
Por lo tanto, no puede usar el typeof operador ya que siempre devolvería object para una matriz:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
console.log(typeof fruits); // object
Para determinar verdaderamente si la variable dada es una matriz, ECMAScript 5 introdujo un nuevo método llamado Array.isArray() :
Array.isArray(fruits); // true
Array.isArray() funciona en todos los navegadores modernos, así como en Internet Explorer 9 y superior. Alternativamente, también podría usar el instanceof operador para verificar si el objeto dado es una matriz:
fruits instanceof Array; // true
El instanceof El operador es compatible con Internet Explorer 6 y superior.
El length Propiedad
El length propiedad de una matriz devuelve el mayor índice numérico más uno , y no el recuento real de los elementos. Se actualiza automáticamente cuando se modifica la matriz.
Veamos el siguiente ejemplo para entender lo que quiero decir:
const animals = [];
animals[20] = 'Cat';
console.log(animals.length); // 21
Como puede ver arriba, el length de la matriz La propiedad se actualiza al índice más alto más uno cuando agregamos solo un elemento. Desde la perspectiva del rendimiento, es muy útil porque los elementos reales no se cuentan cada vez que modificamos la matriz.
Otra cosa interesante sobre el length propiedad es que es escribible . Puede establecer manualmente un nuevo valor para aumentar o disminuir el tamaño de la matriz. Una matriz se puede truncar configurando un length más pequeño valor:
const numbers = [1, 2, 3, 4, 5];
// truncate to 3 elements
numbers.length = 3;
console.log(numbers); // [1, 2, 3]
// increase size to 6
numbers.length = 6;
console.log(numbers); // [1, 2, 3, empty × 3]
Para borrar una matriz, simplemente configure el length valor de propiedad a 0:
// clear the array
numbers.length = 0;
console.log(numbers); // []
En bucle de una matriz
Hay varias formas de iterar sobre los elementos de la matriz. La forma más sencilla es utilizar el clásico for bucle:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
También usa otros bucles de JavaScript como for...of, for...in y forEach() para iterar a través de una matriz. Eche un vistazo a este artículo para obtener más información sobre todas las formas disponibles de hacer un bucle en una matriz en JavaScript.
Métodos de matriz
El prototipo de matriz proporciona varios métodos para realizar operaciones transversales y de mutación, como agregar, eliminar, actualizar y más a las matrices. Veamos algunos de los métodos más populares que puede usar para manipular matrices.
toString()
JavaScript toString() El método convierte una matriz en una cadena separada por comas:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
console.log(fruits.toString()); // Apple,Orange,Mango,Banana
join()
El join() El método concatena todos los elementos de la matriz en una cadena. Es muy similar al anterior toString() método, pero le permite especificar un separador:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
console.log(fruits.join('_')); // Apple_Orange_Mango_Banana
concat()
El concat() El método crea una nueva matriz al fusionar dos matrices existentes:
const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2);
console.log(newArr); // [ 1, 2, 3, 4 ]
El concat() El método no cambia las matrices existentes. En cambio, siempre devuelve una nueva matriz. Incluso puede especificar más de un argumento de matriz:
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const newArr = arr1.concat(arr2, arr3);
console.log(newArr); // [ 1, 2, 3, 4, 5, 6 ]
También puedes usar el concat() método para crear una nueva matriz a partir de una matriz existente con elementos adicionales:
const arr1 = [1, 2];
const newArr = arr1.concat(2, 3, 4);
console.log(newArr); // [ 1, 2, 2, 3, 4 ]
push()
El push() El método agrega uno o más elementos al final de una matriz existente:
const names = ['Alex', 'Mike', 'Atta'];
// add more elements
names.push('Ali', 'Emma');
console.log(names); // ['Alex', 'Mike', 'Atta', 'Ali', 'Emma']
El push() método devuelve el length actualizado de la matriz:
const length = names.push('Ali', 'Emma');
console.log(length); // 5
pop()
El pop() método hace lo contrario del push() método. Elimina el último elemento de una matriz y lo devuelve:
const names = ['Alex', 'Mike', 'Atta'];
// remove last element
const elem = names.pop();
console.log(elem); // Atta
unshift()
El unshift() El método agrega uno o más elementos al comienzo de una matriz y anula los elementos más antiguos. Este método devuelve la longitud actualizada de la matriz:
const names = ['Alex', 'Mike', 'Atta'];
// add new elements at start
const length = names.unshift('Ali', 'Emma');
console.log(length); // 5
console.log(names); // ['Ali', 'Emma', 'Alex', 'Mike', 'Atta']
shift()
El shift() El método elimina el primer elemento de una matriz y lo devuelve. Todos los demás elementos se desplazan a un índice inferior:
const names = ['Alex', 'Mike', 'Atta'];
// remove an element from start
const elem = names.shift();
console.log(elem); // Alex
console.log(names); // ['Mike', 'Atta']
splice()
El splice() El método se puede usar para agregar nuevos elementos, así como para eliminar elementos existentes de una matriz. Este método cambia la matriz original y devuelve los elementos eliminados, si los hubiere.
Esta es la sintaxis de splice() :
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
start— El índice inicial para cambiar elementos en la matriz.deleteCount— Un número entero que indica el número de elementos en la matriz para eliminar destart.item1, item2, ...— Los elementos que se agregarán a la matriz, comenzando desdestart.
Eliminación de elementos
Aquí hay un ejemplo que usa splice() para eliminar los dos primeros elementos del principio de una matriz:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
// remove first elements
const removed = fruits.splice(0, 2);
console.log(fruits); // ['Mango', 'Banana']
console.log(removed); // ['Apple', 'Orange']
Si el deleteCount se omite, todos los elementos a partir de start se eliminan de la matriz:
const removed = fruits.splice(1);
console.log(fruits); // ['Apple']
console.log(removed); // ['Orange', 'Mango', 'Banana']
También puede reemplazar los elementos eliminados con uno nuevo usando splice() :
const removed = fruits.splice(1, 2, 'Cherry', 'Watermelon');
console.log(fruits); // ['Apple', 'Cherry', 'Watermelon', 'Banana']
console.log(removed); // ['Orange', 'Mango']
Agregar elementos
Para agregar nuevos elementos con splice() , simplemente configure el deleteCount a cero:
const removed = fruits.splice(2, 0, 'Cherry');
console.log(fruits); // ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana']
console.log(removed); // []
slice()
El slice() El método corta una parte de una matriz en una nueva matriz. Este método devuelve una nueva matriz con elementos copiados de la matriz original. La matriz original permanece sin cambios.
El slice() El método toma hasta dos argumentos:el índice de inicio para seleccionar elementos y un índice final opcional (exclusivo).
Aquí hay un ejemplo:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
const sliced = fruits.slice(1, 3);
console.log(sliced); // ['Orange', 'Mango']
Si se omite el índice final, slice() dividirá el resto de la matriz a partir del índice de inicio:
const sliced = fruits.slice(1);
console.log(sliced); // ['Orange', 'Mango', 'Banana']
indexOf()
El indexOf() El método busca en la matriz el elemento dado y devuelve su posición:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
fruits.indexOf('Orange'); // 1
fruits.indexOf('Cherry'); // -1 (not found)
filter()
El filter() El método crea una nueva matriz poblada con todos los elementos de la matriz que pasan una determinada condición:
const ages = [24, 45, 33, 76, 55, 86];
const above50 = ages.filter(age => age > 50);
console.log(above50); // [76, 55, 86]
El filter() El método no ejecuta la función para elementos vacíos. Además, no cambia la matriz original.
map()
El map() El método crea una nueva matriz con los resultados de ejecutar una función para cada elemento de la matriz:
const prices = [10, 9.99, 15, 45];
const updated = prices.map(price => '$' + price);
console.log(updated); // ['$10', '$9.99', '$15', '$45']
reduce()
El reduce() El método reduce la matriz a un solo valor. Llama al método provisto para cada elemento de la matriz de izquierda a derecha, excepto los valores vacíos. El valor de retorno de la función se almacena en un acumulador.
El reduce() El método se usa comúnmente para calcular totales como valores de suma, promedio, mínimo y máximo en una matriz.
Aquí hay un ejemplo que calcula la suma de todos los elementos en una matriz usando el reduce() método:
const numbers = [10, 99, 75, 45, 33];
const sum = numbers.reduce((total, num) => total + num);
console.log(sum); // 262
También puede pasar un valor inicial del acumulador opcional al reduce() método:
// pass initial value 100
const sum = numbers.reduce((total, num) => total + num, 100);
console.log(sum); // 362
forEach()
El forEach() El método itera sobre todos los elementos de una matriz llamando a una función una vez para cada elemento, en orden:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
fruits.forEach((fruit, index) => {
console.log(`${fruit} has ${index} index.`);
});
// Apple has 0 index.
// Orange has 1 index.
// Mango has 2 index.
// Banana has 3 index.
Eche un vistazo a esta guía para obtener más información sobre forEach() método en JavaScript.
every()
El every() El método se usa para verificar si todos los elementos en una matriz pasan una determinada prueba. Devuelve true si todos los elementos pasan, de lo contrario false :
const numbers = [10, 99, 75, 45, 33];
// check if all elements are > 15
const result = numbers.every(num => num > 15);
console.log(result); // false
El every() El método ejecuta una función una vez por cada elemento presente en la matriz. Si encuentra un elemento de matriz para el que la función devuelve false , every() devuelve false y no comprueba los elementos restantes.
some()
El some() el método es similar a every() excepto que devuelve true si uno o más elementos pasan una determinada condición:
const numbers = [10, 99, 75, 45, 33];
// check if any element > 15
const result = numbers.some(num => num > 15);
console.log(result); // true
includes()
El includes() El método verifica si el elemento dado existe en la matriz. Es similar al some() método. Pero en lugar de esperar a que pase la condición específica, simplemente verifica si la matriz contiene el elemento dado:
const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];
fruits.includes('Apple'); // true
fruits.includes('Watermelon'); // false
Conclusión
¡Eso es todo amigos! En este artículo, analizamos las matrices de JavaScript en detalle. Aprendimos cómo crear una matriz, cómo acceder a un elemento de una matriz, cómo agregar, actualizar y eliminar elementos, etc.
Al final, analizamos algunos de los métodos de matriz más utilizados. Hay muchos más métodos que puede usar para manipular una matriz. Consulte este artículo de MDN para obtener más información sobre ellos.