Array en JavaScript

El objeto Array en javascript se utiliza para crear matrices, que son objetos en forma de lista.

Características generales

Las matrices son objetos en forma de lista en los que un objeto prototipo tiene métodos que se utilizan para realizar la transformación y modificación de las matrices. Tenga en cuenta que la longitud de las matrices o el tipo de elementos no son fijos.

Las cadenas no se pueden usar como índices para elementos en matrices (como en matrices asociativas ), pero solo se deben usar enteros, y tratar de establecer o acceder a índices no numéricos usando el método de corchetes (o el método de dos puntos ) no establecerá ni obtendrá ninguno. de los elementos de la matriz, pero establecerá o accederá a una propiedad asociada con esa matriz. Tenga en cuenta que las propiedades y los elementos de la matriz están completamente separados entre sí, y los modificadores de matriz no se pueden usar en sus propiedades dependientes.

Creando una matriz

var fruits = ['Apple', 'Banana'];
console.log(fruits.length);   // 2

Acceso a un elemento de una matriz

var first = fruits[0];
// Apple

var last = fruits[fruits.length - 1];
// Banana

Pasando por los elementos de una matriz con un bucle

fruits.forEach(function(item, index, array) {
  console.log(item, index);
});
// Apple 0
// Banana 1

Agrega un elemento al final de una matriz

var newLength = fruits.push('Orange');
// ["Apple", "Banana", "Orange"]

Eliminar un elemento del final de una matriz

var last = fruits.pop();  // eliminar Orange (desde el final)
// ["Apple", "Banana"];

Eliminar un elemento del principio de la matriz

var first = fruits.shift();  // eliminar Apple (desde cero)
// ["Banana"];

Agrega un elemento al comienzo de la matriz

var newLength = fruits.unshift('Strawberry');
// ["Strawberry", "Banana"];

Encontrar el índice de un elemento de matriz

fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]

var pos = fruits.indexOf('Banana');
// 1

Eliminar un elemento en un índice específico

var removedItem = fruits.splice(pos, 1);
// ["Strawberry", "Mango"]

Eliminar elementos dado un número específico a partir de un índice específico

var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
console.log(vegetables); 
// ["Cabbage", "Turnip", "Radish", "Carrot"]

var pos = 1, n = 2;

var removedItems = vegetables.splice(pos, n); 

console.log(vegetables); 
// ["Cabbage", "Carrot"] (cambiará la matriz original)

console.log(removedItems); 
// ["Turnip", "Radish"]

Copiar matriz

var shallowCopy = fruits.slice();
// ["Strawberry", "Mango"]

Estructura Array en javascript

[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)

elementN

Inicializa una matriz con los elementos a los que se le pasa, a menos que pasemos un solo argumento al constructor Array en javascript y ese argumento sea un número (ver parámetro a arrayLength continuación). Tenga en cuenta que el caso especial anterior se aplica a las matrices creadas a través del constructor Array, no a las matrices creadas en forma abreviada.

arrayLength

Si pasamos un solo argumento al constructor Array y ese argumento es un entero positivo de 0 a 2 ³² -1, devolverá una matriz con su valor de propiedad establecido length en ese número (esta es una matriz con dígitos vacíos por número arrayLength, y estos los dígitos no se asociarán con el valor undefined). Si el argumento es cualquier número que no sea del rango anterior, se lanzará la excepción RangeError.

Accediendo a los elementos de una matriz

El recuento de elementos en JavaScript comienza en el índice 0, es decir, el primer elemento de la matriz tiene el índice 0 y el índice del último elemento es el valor de propiedad length menos 1. Tenga en cuenta que el uso de índices no válidos devolverá el valor undefined.

var arr = ['this is the first element', 'this is the second element', 'this is the last element'];
console.log(arr[0]);              // 'this is the first element'
console.log(arr[1]);              // 'this is the second element'
console.log(arr[arr.length - 1]); // 'this is the last element'

Vale la pena señalar que los elementos de la matriz también dependen de ellos (es decir, son como una propiedad toString), pero si intentamos acceder a los elementos de la matriz de la siguiente manera, arrojará una excepción SyntaxError, porque el nombre de la propiedad no es válido :

console.log(arr.0); // SyntaxError

La razón de este error no es una función de matrices, no es posible hacer referencia a propiedades que comienzan con un número usando el método de dos puntos , entonces se debe usar el método de paréntesis. Por ejemplo, si tenemos un objeto con una propiedad llamada 3d, solo podemos referirnos a él mediante el método de paréntesis .

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0);   // SyntaxError
console.log(years[0]);  // funciona sin problemas

renderer.3d.setTexture(model, 'character.png');     // SyntaxError
renderer['3d'].setTexture(model, 'character.png');  // funciona sin problemas

Tenga en cuenta que el nombre de la propiedad 3d puede estar entre comillas '3d', es posible poner comillas para las matrices de elementos de índices ( por ejemplo, en years['2']lugar de years[2]‎) pero no es necesario. Como el valor de 2 years[2]‎se convertirá en una cadena de texto de JavaScript usando el motor toString, es por eso que encontrará que Fihsin '2'y hará '02'referencia a dos dígitos diferentes en el objeto years, y será el resultado de la línea del compilador son los siguientes true:

console.log(years['2'] != years['02']);

Propiedades length

La propiedad length dependiente de las matrices está asociada con los valores de las propiedades numéricas (índices de elementos). Y una serie de funciones integradas en el objeto Array en javascript(por ejemplo, join, slice, indexOf etc.) tomar length en cuenta el valor de la dependiente de la propiedad de la matriz cuando se le llama. Otras funciones (como push y splice) provocarán actualizaciones en el archivo length.

var fruits = [];
fruits.push('banana', 'apple', 'peach');

console.log(fruits.length); // 3

Cuando se agrega un elemento a una matriz que tiene un índice válido pero está fuera de los límites de la matriz, el motor de JavaScript actualizará el valor de la propiedad length según corresponda:

fruits[5] = 'mango';
console.log(fruits[5]); // 'mango'
console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
console.log(fruits.length); // 6

Aumentar el valor de la propiedad length manualmente solo afectará el valor de la propiedad:

fruits.length = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10

Pero disminuir el valor de la propiedad length eliminará los elementos:

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

Este comportamiento se explica en detalle en la página de funciones Array.length.

Creación de una matriz al hacer coincidir un patrón en una cadena

El resultado de la coincidencia que se produce entre las expresiones regulares y las cadenas creará matrices, y esta matriz tiene propiedades y elementos que se pueden utilizar para obtener información sobre la coincidencia. Tal matriz se devolverá de las funciones RegExp.exec, String.match y String.replace. Eche un vistazo al siguiente ejemplo (que coincide con la letra d seguida de una o más by seguida de una d, observe cómo se usa la bandera i para ignorar las mayúsculas y minúsculas) y observe la siguiente tabla:

var myRe = /d(b+)(d)/i;
var myArray = myRe.exec('cdbBdbsbz');

La siguiente tabla muestra las propiedades y elementos de la matriz devuelta del ejemplo anterior:

Elemento	Descripción	Ejemplo
`input`	Una propiedad de solo lectura que indica la cadena original en la que se realizó la coincidencia.	`cdbBdbsbz`
`index`	Una propiedad de solo lectura que contiene el índice del comienzo de la cadena de texto coincidente.	`1`
`[0]`	Un elemento de solo lectura que indica la subcadena coincidente.	`dbBd`
`‎[1], ...[n]‎`	Elementos de sólo lectura que contienen subcadenas de texto coincidentes de subpatrones de paréntesis.	`‎‎[1]: bB‎[2]: d‎`

Propiedades constructora del Array

Array.length

El valor length de la propiedad de la función constructora Array es 1.

Array.prototype

Esta propiedad permite agregar propiedades que están disponibles para todos los objetos cuyo tipo es Array.

Funciones constructivista del Array

Array.from()‎

Cree una nueva matriz a partir de un objeto similar a una matriz.

Array.isArray()‎

Devuelve true si la variable es una matriz y de lo contrario false.

Array.of()‎

Cree una nueva matriz a partir de un número variable de argumentos, independientemente del tipo de esos argumentos.

Características del prototipo de objeto

Las versiones construidas de un constructor Array en javascript heredan funciones y propiedades de un objeto Array.prototype. Al igual que con todos los constructores, puede realizar cambios en un objeto prototype en el constructor para que esos cambios se reflejen en todas las instancias del objeto Array.

Array.prototype.constructor

Especifica la función que creará el prototipo del objeto Array. Consulte las funciones Object.prototype.constructor para obtener más detalles.

Array.prototype.length

Devuelve el número de elementos de la matriz.

Nota: Las funciones de conversión, estas funciones modifican la propia matriz.

Array.prototype.copyWithin()‎

Copie una serie de elementos de la matriz en otra ubicación dentro de ella.

Array.prototype.fill()‎

Llene todos los elementos de la matriz desde el índice inicial hasta el índice final con un valor fijo.

Array.prototype.pop()‎

Elimina el último elemento de la matriz y devuelve ese elemento.

Array.prototype.push()‎

Agregue uno o más elementos al final de la matriz y devuelva la longitud de la nueva matriz.

Array.prototype.reverse()‎

Invierta el orden de los elementos de la matriz, lo que significa que el primer elemento se convertirá en el último y el último elemento se convertirá en el primero.

Array.prototype.shift()‎

Elimina el primer elemento de la matriz y devuelve ese elemento.

Array.prototype.sort()‎

Organiza los elementos de la matriz y devuelve la matriz resultante.

Array.prototype.splice()‎

Agregue o elimine elementos de una matriz.

Array.prototype.unshift()‎

Agregue uno o más elementos al comienzo de la matriz y devuelve la longitud de la nueva matriz.

Nota: Las funciones de acceso no modifican la matriz y devolverán una nueva matriz.

Array.prototype.concat()‎

Devolver una nueva matriz consiste en sumar la matriz actual con otras matrices o valores.

Array.prototype.includes()‎

Determina si una matriz contiene un elemento dado y devuelve true o false.

Array.prototype.indexOf()‎

Devuelve el primer índice del elemento en la función que es igual al valor dado, o -1 si no se encuentra ninguna coincidencia.

Array.prototype.join()‎

Suma todos los elementos de una matriz en una cadena.

Array.prototype.lastIndexOf()‎

Devuelve el último índice del elemento en la función que es igual al valor dado, o -1 si no se encuentra ninguna coincidencia.

Array.prototype.slice()‎

Extraiga una sección de la matriz y devuelva una nueva matriz.

Array.prototype.toString()‎

Devuelve una cadena que representa la matriz y sus elementos, que es una redefinición de la función Object.prototype.toString.

Array.prototype.entries()‎

Devuelve un objeto Array Iterator que contiene los pares «clave / valor» para cada índice de la matriz.

Array.prototype.every()‎

Devuelve true si todos los elementos de la matriz cumplen la condición en la función de prueba.

Array.prototype.filter()‎

Cree una nueva matriz con todos los elementos de esta matriz que hace que la función de prueba regrese true.

Array.prototype.find()‎

Devuelve el valor encontrado en la matriz, si uno de los elementos de la matriz satisface la función de prueba dada, o de lo contrario devuelve el valor undefined.

Array.prototype.findIndex()‎

Devuelve el índice que se encuentra en la matriz, si uno de los elementos de la matriz satisface la función de prueba dada, o de lo contrario devuelve el valor -1.

Array.prototype.forEach()‎

Llame a una función para cada elemento de la matriz.

Array.prototype.keys()‎

Devuelve un objeto Array Iterator que contiene todos los índices de la matriz.

Array.prototype.map()‎

Crea una nueva matriz basada en los resultados de llamar a una función específica en cada elemento de la matriz.

Array.prototype.reduce()‎

Aplicar una función para reducir todos los valores de una matriz (comenzando de izquierda a derecha) a un solo valor.

Array.prototype.reduceRight()‎

Aplicar una función para reducir todos los valores de una matriz (comenzando de derecha a izquierda) a un solo valor.

Array.prototype.some()‎

Devuelve true si solo un elemento de la matriz cumple la función de prueba dada.

Array.prototype.values()‎

Devuelve un objeto Array Iterator que contiene todos los valores de la matriz.

Ejemplos y aplicaciones en código

Creación de una matriz

El siguiente ejemplo crea una matriz cuya msgArray longitud ( length) es 0 y luego asigna valores a msgArray[0]‎ y msgArray[99]‎, cambiando la longitud de la matriz a 100:

var msgArray = [];
msgArray[0] = 'Hello';
msgArray[99] = 'world';

if (msgArray.length === 100) {
  console.log('The length is 100.');
}

Creación de una matriz 2D

El siguiente ejemplo crea un tablero de ajedrez usando una matriz bidimensional de cadenas de texto, y el primer movimiento del tablero se realiza copiando ‘p’ de (6.4) a (4.4):

var board = [ 
  ['R','N','B','Q','K','B','N','R'],
  ['P','P','P','P','P','P','P','P'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['p','p','p','p','p','p','p','p'],
  ['r','n','b','q','k','b','n','r'] ];

console.log(board.join('\n') + '\n\n');

// mover el peón frente al rey dos pasos 
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));

Este es el resultado del ejemplo anterior:

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , ,p, , , 
 , , , , , , , 
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

Use una matriz para crear una tabla de valores

values = [];
for (var x = 0; x < 10; x++){
 values.push([
  2 ** x,
  2 * x ** 2
 ])
};
console.table(values)

La resultante:

Soporte de navegadores

Característica	Chrome	Firefox	IE	Opera	Safari
Soporte básico	sí	sí	sí	sí	sí

Consulte las propiedad y función de cada objeto Array en javascript obtener detalles sobre la compatibilidad del navegador.