Objeto Array (arreglo) de JavaScript

Los arrays en JavaScript son un objeto global, utilizado para almacenar múltiples valores en una única variable.

Los arrays pueden contener cualquier tipo de datos, incluyendo cadenas, números, objetos, funciones, e incluso otros arrays.

Supongamos que desea almacenar nombres de ciudades en código JavaScript. Almacenar nombres de ciudades uno por uno en variables podría parecer así:

　　let city1　= "New Delhi";
　　let city2　= "Mumbai";
　　let city3　= "Jaipur";

Pero, si necesita almacenar el nombre de una ciudad de un país en una variable, no solo sucederán tres, sino que podrían ser cien.

同时使用这么多变量并跟踪所有变量将是非常困难的任务。

数组通过提供用于在单个变量中存储多个值或一组值的有序结构来解决此问题。

创建数组

有两种方法可以在JavaScript中创建数组：

• 字面量-隐式创建，其使用方括号：[]

• 简洁方式-直接示例化，采用new关键字

让我们演示如何使用初始化的数组常量创建fruits数组[]：

let fruits = ["Apple", "Mango", "Banana", "Orange"];

声明可以跨越多行：

let fruits = [
　　"Apple",
　　"Mango",
　　"Banana",
　　"Orange"
];

现在这是使用数组构造函数创建的相同数据，该数据用初始化new Array()：

let fruits = new Array("Apple", "Mango", "Banana", "Orange");

这两种方法都会创建一个数组。但是，字面量-隐式创建（方括号[]）方法更为常见和首选，因为new Array()构造函数方法可能会出现不一致和意外的结果。

数组索引

数组没有名称/值对。而是使用从0开始的整数值对它们进行索引。

这是赋值给fruits的示例数组：

　　let fruits = ["Apple", "Mango", "Banana", "Orange"];

这是fruits数组中每个元素的索引方式的分解：

数组中的第一个元素是“ Apple”，索引值为0。

最后一个元素是“Orange”，索引值为3。

访问数组中的元素

通过引用方括号中的元素的索引号，可以访问JavaScript数组中的元素。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0];//　返回 "Apple"
fruits[2];//　返回 "Banana"

JavaScript数组的索引为零：数组的第一个元素的索引为0，第二个元素的索引为1，依此类推。

尝试访问数组中不存在的元素，将返回undefined。

fruits[7];//　返回 undefined

可以通过引用阵列名称来访问整个阵列。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
document.getElementById("result").innerHTML = fruits;

数组 length 属性

我们可以使用该longitud属性找出数组中有多少个元素。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.length;　　　//　Devuelve　4

最后一个元素的索引等于数组的length属性值减去1。

此示例使用length属性显示最后一个元素的值：

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let lastIndex = fruits.length　-　1;
fruits[lastIndex];

Agregar elementos al array

En la variable fruits, tenemos cuatro elementos, que incluyen desde 0 hasta3del índice. Si queremos agregar un nuevo elemento al array, podemos asignar un valor al siguiente índice.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[4]　=　"Guava";

　 　 Si agregamos un elemento y accidentalmente saltamos un índice, se creará un elemento en el array con un valor vacío ('').

fruits[6]　=　"Strawberry";

Usarpush()El método puede evitar problemas similares, que agrega un elemento al final del array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.push("Strawberry");

También se puede usarlongitudPropiedad para agregar un nuevo elemento al array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[fruits.length]　=　"Beer";

Modificar el elemento del array

Al usar el operador de asignación, podemos sobrescribir cualquier valor en el array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0]　=　"Monkey";

Los arrays se utilizan generalmente para combinar listas de tipos de datos similares, pero técnicamente pueden contener cualquier valor o mezcla de valores.

let　myArray　=　[5,　22,　"Arrow",　"Bone",　true,　new　Date()];

Para recorrer el array

Podemos aprovecharforylongitudPropiedad para recorrer todo el array.

En este ejemplo, creamos un array de frutas y imprimimos cada número de índice y cada valor en el documento:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let　txt　=　"";
//Para recorrer la longitud del array
for　(let　i　=　0;　i　<　fruits.length;　i++) {
txt　+=　i　+　"　=　"　+　fruits[i]　+　"<br>";
}

También podemos usar lo siguienteArray.forEach()Método:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let　result　=　document.getElementById("result");
fruits.forEach(function(element)　{
result.innerHTML　+=　element　+　"<br>";
});

También podemos usarfor...ofUn bucle para recorrer el array de JavaScript, esta es una nueva función de JavaScript:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let　result　=　document.getElementById("result");
for　(let　x　of　fruits)　{
result.innerHTML　+=　x;
}

for...ofEl bucle no recupera el número de índice de los elementos del array, pero generalmente es un método más simple y conciso para recorrer el array.

Array multidimensional

Un array multidimensional es un array que contiene uno o más arrays.

　　let points = [
　　　[35,　28,　29,　31],
　　　[33,　24,　25,　29]
　　];

JavaScript puede entender la profundidad de2,3,4,5o más niveles de arrays multidimensionales. Sin embargo, para la mayoría de las personas, es difícil manejar más de tres niveles de matrices.

La dimensión del array indica el número de índices necesarios para seleccionar un elemento:

• Para un array bidimensional, se necesitan dos índices para seleccionar un elemento

• Para un array tridimensional, se necesitan tres índices para seleccionar un elemento

Un array bidimensional se puede considerar como una tabla, donde el primer [ ] es la fila y el segundo [ ] es la columna.

points[0][1];　　　//　Devuelve　28
points[1][0];　　　//　Devuelve　33

En este ejemplo, creamos un array bidimensional y imprimimos cada índice y valor en el documento:

let points = [[35,　28,　29,　31], [33,　24,　25,　29];
let row;
let col;
for (row = 0; row <　2; row++) {
　　　for (col = 0; col <　4; col++) {
　　document.write(row, col, points[row][col]);
　　　}
}

Por supuesto, también puede usarlongitudObtener el tamaño de las filas y columnas de las propiedades:

let points = [
　　　[10,　12,　14,　16,　18],
　　　[20,　22,　24,　26],
　　　[30,　32,　34],
　　　[32,　34]
];
points.length;//　Devuelve　4　(filas totales)
points[0].length;//　Devuelve　5
points[1].length;//　Devuelve　4
points[2].length;//　Devuelve　3
points[3].length;//　Devuelve　2

En la mayoría de los casos,2Un array unidimensional es suficiente, aunque en algunos lugares se puede usar3array unidimensional.

El array de JavaScript es un objeto

En JavaScript, el array es un tipo especial de objeto.

El operador typeof de JavaScript devuelve "Object" para los arrays.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
typeof fruits;　　　//　Devuelve "object"

Evitar el uso de new Array()

No es necesario usar el constructor de array new Array()

Por el contrario, se debe intentar crear arrays de manera implícita, es decir, utilizando directamente la notación de corchetes [], que es más común y popular.

Las siguientes dos sentencias diferentes crean un nuevo array vacío llamado scores:

　　let scores = new Array();　　//　No se recomienda este método
　　let scores = [];　　　　　//　Método recomendado

Las siguientes dos sentencias diferentes crean un array que contiene5Un nuevo array con números:

let scores = new Array(2,　5,　10,　28,　10);　//　No se recomienda este método
let scores = [2,　5,　10,　28,　10];　　//　Método recomendado

La constructora new Array() puede tener diferencias y también puede producir algunos resultados inesperados:

let scores = new Array(10,　25);　　//　Crear un array que contenga dos elementos(10y25) array
let scores = new Array(10);　　//　Crear un array que contenga10Un array con valores de elementos no definidos

¿Cómo determinar si una variable es un array? - Array.isArray()

Como usted sabe, el operador typeof de JavaScript devuelve "Object" para los arrays.

Un problema común es:¿Cómo saber si una variable es un array?

Para resolver este problema, ECMAScript 5Define un nuevo métodoArray.isArray():

let fruits = ["Apple", "Mango", "Banana", "Orange"];
Array.isArray(fruits);

Si el objeto se creó con el constructor dado, también se puede usar el operador instanceof para devolver true:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
if (fruits instanceof Array) {
　　　//　instrucciones a ejecutar
}

Pasar array a función

En el siguiente ejemplo, pasaremos un array a la función:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
myFunc(fruits);
function myFunc(arg) {
　　for (let elem of arg) {
　　document.write(elem, "<br>");
　　}
}

Devolver array desde función

En el siguiente ejemplo, devolveremos un array desde la función:

function myFunc() {
　　let fruits = ["Apple", "Mango", "Banana", "Orange"];
　　return fruits;
}
let myArray = myFunc();
document.write(myArray);