Métodos de arreglos de JavaScript

El poder de JavaScript Array se oculta en los métodos del array.

Convierte un array en una cadena

Método JavaScript toString() Convierte un array en una cadena de valores de array (separados por comas).

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Resultados

Banana,Orange,Apple,Mango

Prueba por tu cuenta

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

Su comportamiento es similar a toString(), pero también puede especificar un separador:

Ejemplo

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Resultados

Banana * Orange * Apple * Mango

Prueba por tu cuenta

Popping y Pushing

Al manejar arrays, eliminar elementos y agregar nuevos elementos es muy simple.

Popping y Pushing se refieren a:

De un arraySacarProyecto, o añadir a un arrayIngresarProyecto.

Popping

pop() El método elimina el último elemento del array:

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // Elimina el último elemento de fruits ("Mango")

Prueba por tu cuenta

pop() El método devuelve el valor "sacado":

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // El valor de x es "Mango"

Prueba por tu cuenta

Pushing

push() El método (en el final del array) añade un nuevo elemento al array:

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       // Añade un nuevo elemento al final de fruits

Prueba por tu cuenta

push() El método devuelve la longitud del nuevo array:

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");   // El valor de x es 5

Prueba por tu cuenta

Desplazar elementos

El desplazamiento es equivalente a pop(), pero se maneja el primer elemento en lugar del último.

shift() El método elimina el primer elemento del array y "desplaza" todos los otros elementos a índices más bajos.

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // Elimina el primer elemento de fruits "Banana"

Prueba por tu cuenta

shift() El método devuelve la cadena "desplazada":

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();             // Devuelve "Banana"

Prueba por tu cuenta

unshift() El método (en el principio) añade nuevos elementos al array y "desplaza" los elementos antiguos:

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // Añade el nuevo elemento "Lemon" al principio de fruits

Prueba por tu cuenta

unshift() El método devuelve la longitud del nuevo array.

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // Devuelve 5

Prueba por tu cuenta

cambiar elementos

usando susnúmero de índicepara acceder a los elementos del array:

arrayíndice (subíndice)Comienza en 0. [0] es el primer elemento del array, [1] es el segundo, [2] es el tercero ...

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // Cambia el primer elemento de fruits a "Kiwi"

Prueba por tu cuenta

length La propiedad ofrece un método simple para agregar nuevos elementos a un array:

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // Añade "Kiwi" al final de fruits

Prueba por tu cuenta

eliminar elementos

Dado que los arrays de JavaScript son objetos, los elementos pueden ser accedidos utilizando JavaScript delete operador paraEliminar:

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // Cambia el primer elemento de fruits a undefined

Prueba por tu cuenta

Usar delete Dejará 'huecos' no definidos en el array. Usa pop() O shift() En su lugar.

Conectar arrays

splice() El método se puede usar para agregar nuevos elementos a un array:

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

Prueba por tu cuenta

El primer parámetro (2) define la posición a la que deben agregarse los nuevos elementos (conexión).

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

Los demás parámetros ("Lemon", "Kiwi") definen los nuevos elementos que se deben agregar.

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

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

Prueba por tu cuenta

Usar splice() para eliminar elementos

A través de una configuración de parámetros inteligente, puedes usar splice() Eliminar elementos sin dejar 'huecos' en el array:

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // Elimina el primer elemento de fruits

Prueba por tu cuenta

El primer parámetro (0) define que el nuevo elemento debe estarAgregarubicarse.

El segundo parámetro (1) define la posición en la que debeEliminar múltipleselementos.

Los demás parámetros se omiten. No se agregarán nuevos elementos.

Combinar (conectar) arrays

concat() El método crea un nuevo array mediante la combinación (conexión) de los arrays existentes:

Ejemplo (combinar dos arrays)

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // Conectar myGirls y myBoys

Prueba por tu cuenta

concat() El método no cambia el array existente. Siempre devuelve un nuevo array.

concat() El método puede usar una cantidad arbitraria de parámetros de array:

Ejemplo (combinar tres arrays)

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // Conectar arr1, arr2 y arr3

Prueba por tu cuenta

concat() El método también puede tomar valores como parámetros:

Ejemplo (combinar array con valor)

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

Prueba por tu cuenta

Cortar array

slice() El método crea un nuevo array usando un fragmento del array.

En este ejemplo, se cortará un segmento del array desde el elemento 1 ("Orange"):

Ejemplo

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

Prueba por tu cuenta

slice() El método crea un nuevo array. No elimina ningún elemento del array de origen.

En este ejemplo, se cortará un segmento del array desde el elemento 3 ("Apple"):

Ejemplo

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);

Prueba por tu cuenta

slice() Se pueden aceptar dos parámetros, por ejemplo (1, 3).

Este método seleccionará elementos desde el parámetro de inicio hasta el parámetro de finalización (sin incluir).

Ejemplo

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

Prueba por tu cuenta

Si se omite el parámetro de finalización, como en el primer ejemplo, entonces slice() Cortará la parte restante del array.

Ejemplo

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);

Prueba por tu cuenta

toString() automático

Si necesita valores originales, JavaScript convertirá automáticamente el array a una cadena. Los siguientes dos ejemplos generarán el mismo resultado:

Ejemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Prueba por tu cuenta

Ejemplo

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

Prueba por tu cuenta

Todos los objetos JavaScript tienen toString() Métodos.

Ordenamiento de arrays

Aprenderemos sobre el ordenamiento de arrays en el próximo capítulo ~.

Encontrar el valor máximo y mínimo en un array

No hay funciones integradas en JavaScript para encontrar los valores máximos y mínimos en un array.

Aprenderá a resolver este problema en el siguiente capítulo de este tutorial.

Guía completa de arrays

Para obtener una guía completa, por favor visite nuestra Manual de referencia de arrays de JavaScript.

Este manual de referencia contiene descripciones e instancias de todas las propiedades y métodos de los arrays.