
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 32 -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:
0 1 0 1 2 2 2 4 8 3 8 18 4 16 32 5 32 50 6 64 72 7 128 98 8 256 128 9 512 162
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.
- Expresión const en JavaScript
- Expresión let en JavaScript
- Expresión var en JavaScript
- Expresión try…catch en JavaScript
- Expresión throw en JavaScript
- Continue en JavaScript
- Switch en JavaScript
- Expresiones if…else en JavaScript
- Declaración vacía o empty en JavaScript
- Break en JavaScript
- Sentencia block en JavaScript
- Arguments en JavaScript
- Promise en JavaScript
- Number en JavaScript
- Características JSON en JavaScript
- Array en JavaScript
- RegExp en JavaScript
- String en JavaScript
- Date en JavaScript
- Math en JavaScript
- URIError en JavaScript
- TypeError en JavaScript
- SyntaxError en JavaScript
- ReferenceError en JavaScript
- RangeError en JavaScript
- EvalError en JavaScript
- Características Boolean en JavaScript
- Error en JavaScript
- Función Symbol en JavaScript
- Constructor Function en JavaScript
- Constructor Object en JavaScript
- Función unescape() en JavaScript
- Función eval() en JavaScript
- Valor null en JavaScript
- Características Undefined en JavaScript
- Características NaN en JavaScript
- Características Infinity en JavaScript
- Función parseFloat() en JavaScript
- Función isNaN() en JavaScript
- Función isFinite() en JavaScript
- Función escape() en JavaScript
- Función encodeURIComponent() en JavaScript