Métodos de array de JavaScript

JavaScript tiene muchos métodos integrados útiles para manejar matrices.

Los métodos que modifican el array original se llamanmétodo mutador (modificador).

que devuelve un nuevo valor o forma de representaciónmétodose llamaaccesor (Accesorio)método.

Convertir array a cadena

toString()El método del array convierte el array en una cadena de valores del array (separados por comas).

var months = ["Jan", "Feb", "Mar", "Apr", "May"];
document.getElementById("result").innerHTML = months.toString();

join()El método del array también puede convertir todos los elementos del array en una nueva cadena.

El comportamiento de este método es similar atoString()pero también puede especificar un separador para el método join.

var fruits = ["Banana", "Apple", "Mango"];
fruits.join("　+　");　　　//　Banana　+　Apple　+　Mango
fruits.join("　/　");　　　//　Banana　/　Apple　/　Mango
fruits.join("　©　");　　//　Banana © Apple © Mango

let frutas = ["Manzana", "Mango", "Plátano", "Naranja"];
document.getElementById("result").innerHTML = fruits;

Método push() - Añadir elemento del array

push()El método del array añade uno o más nuevos elementos al final del array.

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

push()El método devuelve la nueva longitud del array.

El siguiente código añade tres elementos al final del array. La variable total contiene la nueva longitud del array:

var fruits = ["Banana", "Mango", "Apple"];
var total = fruits.push("Strawberry", "Lychee", "Guava");

unshift()El método del array añade uno o más nuevos elementos al principio del array.

var fruits = ["Banana", "Mango", "Apple"];
fruits.unshift("Strawberry");

Esteunshift()El propósito del método es: devolver la nueva longitud del array.

El siguiente código añade tres elementos al array. La variable total contiene la nueva longitud del array:

var fruits = ["Banana", "Mango", "Apple"];
var total = fruits.unshift("Strawberry", "Lychee", "Guava");

Método pop() - Eliminar elemento del array

pop()El propósito del método es: eliminar el último elemento del final del array.

var frutas = ["Plátano", "Mango", "Manzana", "Naranja"];
frutas.pop();

pop()El método devuelve el valor "sacado (popped out)".

var frutas = ["Plátano", "Mango", "Manzana", "Naranja"];
var x = frutas.pop();

shift()Los métodos de array eliminan el primer elemento del array.

var frutas = ["Plátano", "Mango", "Manzana", "Naranja"];
frutas.shift();

shift()El método devuelve el elemento "sacado (shifted out)".

var frutas = ["Plátano", "Mango", "Manzana", "Naranja"];
var x = frutas.shift();

Método splice() - Agregar y modificar el array

splice()El método cambia el array eliminando elementos existentes y (o) agregando nuevos elementos.

var　months　=　['Jan',　'Mar39;,　'Abr39;,　'Jun39;];
meses.splice(1, 0, &39;Feb');//　agregar39;Feb' en el índice　1

El primer parámetro (1）define la posición en la que deben agregarse (unir) nuevos elementos.

El segundo parámetro (0）define cuántos elementos deben eliminarse.

tercer parámetro ('Feb'）definir los nuevos elementos a agregar.

En el siguiente ejemplo, reemplazaremos en el índice4elementos en el índice1elementos:

var　months　=　['Jan',　'Feb',　'Mar39;,　'Abr39;,　'Jun39;];
meses.splice(4,　1,39;May39;);　　　//　reemplazar39;Jun39; con39;May39; en el índice　4

En el siguiente ejemplo, eliminaremos desde el índice de valor3en1elementos:

var　months　=　['Jan',　'Feb',　'Mar39;,　'Abr39;,　'Jun39;];
meses.splice(3,　1);

En el siguiente ejemplo, eliminaremos desde el valor de índice2Eliminación de inicio2elementos:

var　months　=　['Jan',　'Feb',　'Mar39;,　'Abr39;,　'Jun39;];
meses.splice(2,　2);

splice()El método devuelve un array que contiene los elementos eliminados:

var　months　=　['Jan',　'Feb',　'Mar39;,　'Abr39;,　'Jun39;];
var arr = meses.splice(2,　2);

Atenciónsplice()No confunda conslice()Confusión de accesores de array, el último es un accesor array que copia una parte del array.

Modificación de elementos de array

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

let frutas = ["Manzana", "Mango", "Plátano", "Naranja"];
frutas[0] = "Mono";

Método concat() - Combinación de arreglos

concat()Los métodos de array se utilizan para combinar dos o más arreglos en un nuevo arreglo.

En el siguiente ejemplo, crearemos dos arreglos y los combinaremos en un nuevo arreglo:

var frutas = ["Manzana", "Mango", "Plátano"];
var números = [5,　10,　12,　98,　3
var arr = frutas.concat(números);

concat()El método puede usar múltiples parámetros, puede usar un solo método para unir varios arreglos de manera efectiva.

var número1　= [1,　2,　3
var número2　= [4,　5,　6
var número3　= [7,　8,　9
var nums = número1.concat(número2, número3);

Método slice() - Cortar el array

slice()El método de matriz copia una parte del array a un nuevo array.

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange'];
var　extract　=　fruits.slice(1,　3);//　return　Mango,　Apple

El primer parámetro (1）define el punto de partida de la extracción.

El segundo parámetro (3）define el punto de final de la extracción.

Si se omite el segundo parámetro, elslice()El método cortará el resto del array.

En el siguiente ejemplo, extraeremos elementos sin usar el segundo parámetro:

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange'];
var　extract　=　fruits.slice(1);//　return　Mango,　Apple,　Orange

En el siguiente ejemplo, usaremos valores negativos para extraer elementos del array:

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange'];
var　extract　=　fruits.slice(-3,　-1);//　return　Mango,　Apple

Buscar elementos en el array

indexOf()El método de matriz devuelve el primer índice del elemento que se puede encontrar en la matriz.

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange'];
fruits.indexOf('Apple');//　returns　2

Nota:El índice del primer elemento es 0, el índice del segundo elemento es1y así sucesivamente.

Si el parámetro dado no existe en el array, regresará-1.

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange'];
fruits.indexOf('Beer');//　returns　-1

lastIndexOf()El método de matriz devuelve el último índice del elemento que se puede encontrar en la matriz.

Podemos probar el mismo ejemplo de indexOf() que contiene dos "Apple".

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange',　'Apple'];
fruits.lastIndexOf('Apple');//　returns　4

Nota:lastIndexOf()Se buscará en el array desde el final y se regresará el primer índice que encuentre.

Si el parámetro dado no existe en el array, regresará-1.

var　fruits　=　['Banana',　'Mango',　'Apple',　'Orange',　'Apple'];
fruits.lastIndexOf('Beer');//　returns　-1

Método fill()

fill()El método de matriz reemplaza todos los elementos de la matriz con un valor estático.

var　nums　=　[1,　2,　3,　4
nums.fill(17);

Todos los cuatro elementos de la matriz se han reemplazado con el mismo valor17.

fill()también acepta parámetros opcionales de punto de partida y punto de llegada.

desde la posición2hasta la posición4Rellenar 0 (excluyendo4）：

var　nums　=　[1,　2,　3,　4
nums.fill(0,　2,　4);

Usarfill()Se puede reemplazar uno o más elementos del array con valores estáticos.

Ordenamiento de matriz y reversión de matriz

reverse()El método de matriz puede invertir el orden de los elementos en la matriz.

var　nums　=　[10,　20,　30,　40,　50];
nums.reverse();

Usarreverse()Después de eso, el último elemento será el primero y el primer elemento será el último.

sort()El método de matriz ordena los elementos de la matriz según el primer carácter del elemento. En caso de que los primeros caracteres sean iguales, continuará hacia la siguiente línea y comparará el segundo carácter, y así sucesivamente.

Por defecto,sort()Ordenará alfabéticamente todos los arreglos de cadenas en mayúsculas o minúsculas.

var　months　=　['March',　'Jan',　'Feb',　'Dec'];
months.sort();

Debido asort()Basado en el primer carácter unicode, por lo tanto, ordenará primero los elementos en mayúsculas y luego los en minúsculas.

让我们修改原始数组，以使我们的字符串之一以小写字母开头。

var　months　=　['March',　'Jan',　'Feb',　'dec'];
months.sort();

可以使用sort()方法对数字进行排序。

var　nums　=　[5,　1,　2,　7,　3,　6,　4
nums.sort();

sort()不会按大小对数字数组排序。相反，它只检查数字中的第一个字符。

var　nums　=　[5,　1,　2,　17,　13,　6,　34
nums.sort();

为了正确地对数字进行排序，您可以创建一个比较函数作为参数。

var　nums　=　[5,　1,　2,　17,　13,　6,　34
nums.sort(function(a,　b)　{return　a　-　b});

如果需要重复对数字进行排序，则可以创建一个单独的函数。

var　nums　=　[5,　1,　2,　17,　13,　6,　34
nums.sort(sortNumerically);
//　Función para ordenar números por tamaño
var sortNumerically = (a, b) => {
　　devolver a　-　b;
}

Referencia completa de array

Para obtener una referencia completa de las propiedades y métodos, visite nuestraManual de referencia de JavaScript Array.

La parte de referencia contiene descripciones y ejemplos de todas las propiedades y métodos de los arrays.