Artículo original escrito por: Bolaji Ayodeji
Artículo original: How to Manipulate Arrays in JavaScript
Traducido y adaptado por: Cristian Sulbaran

Una parte importante de cualquier lenguaje de programación. La mayoría de las veces necesitamos hacer varias operaciones en arreglos, de ahí este artículo.

En este artículo, mostraremos varios métodos para manipular arreglos en JavaScript

¿Qué son las matrices en JavaScript?

Antes de continuar, debemos comprender qué significan realmente los arreglos.

En JavaScript, un arreglo es una variable que se utiliza para almacenar diferentes tipos de datos. Básicamente almacena diferentes elementos en una caja y luego se puede evaluar con la variable.

Declarando un arreglo:

let miCaja = [];   // Declaración inicial de arreglo en JS

Los arreglos pueden contener múltiples tipos de datos

let miCaja = ['hola', 1, 2, 3, true, 'hey'];

Los arreglos se pueden manipular usando varias acciones conocidas como métodos. Algunos de estos métodos nos permiten agregar, eliminar, modificar y hacer mucho más en los arreglos.

Te estaremos mostrando algunos en este artículo, continuemos :)

NB: utilizamos funciones de flecha en esta publicación. Si no sabes lo que esto significa, puedes leerlo en español dando clic aquí o acá. La función de flecha es una característica de ES6.

toString()

El método JavaScript toString() convierte un arreglo en una cadena separada por una coma.

let colores = ['verde', 'amarillo', 'azul'];

console.log(colores.toString()); // verde,amarillo,azul

join()

El método JavaScript join() combina todos los elementos del arreglo en una cadena.

Es similar al método toString(), pero aquí se puede especificar el separador en lugar de la coma predeterminada.

let colores = ['verde', 'amarillo', 'azul'];

console.log(colores.join('-')); // verde-amarillo-azul

concat

Este método combina dos arreglos o agrega más elementos a un arreglo y luego devuelve uno nuevo.

let primerosNumeros = [1, 2, 3];
let segundosNumeros = [4, 5, 6];
let combinado = primerosNumeros.concat(segundosNumeros);
console.log(combinado); // [1, 2, 3, 4, 5, 6]

push()

Este método agrega elementos al final de un arreglo y cambia el arreglo original.

let buscadores = ['chrome', 'firefox', 'edge'];
buscadores.push('safari', 'opera mini');
console.log(buscadores); 
// ["chrome", "firefox", "edge", "safari", "opera mini"]

pop()

Este método elimina el último elemento de un arreglo y lo devuelve.

let buscadores = ['chrome', 'firefox', 'edge'];
buscadores.pop(); // "edge"
console.log(buscadores); // ["chrome", "firefox"]

shift()

Este método elimina el primer elemento de un arreglo y lo devuelve.

let buscadores = ['chrome', 'firefox', 'edge'];
buscadores.shift(); // "chrome"
console.log(buscadores); // ["firefox", "edge"]

unshift()

Este método agrega un elemento(s) al comienzo de un arreglo y cambia el arreglo original.

let buscadores = ['chrome', 'firefox', 'edge'];
buscadores.unshift('safari');
console.log(buscadores); //  ["safari", "chrome", "firefox", "edge"]
También podemos agregar varios elementos a la vez

splice()

Este método cambia un arreglo agregando, eliminando e insertando elementos.

La sintaxis es:

arreglo.splice(índice[, cantidadDeElementosPorRemover, elemento1, ..., elementoN])
  • índice aquí está el punto de partida para eliminar elementos en la matriz
  • cantidadDeElementosPorRemover es el número de elementos que se eliminarán de ese índice
  • elemento1, …, elementoN es el (los) elemento(s) a agregar

Quitar elementos

después de ejecutar splice() , devuelve el arreglo con los elementos eliminados y los elimina de el arreglo original.
let colores = ["verde", "amarillo", "azul", "púrpura"];
const menosColores = colores.splice(0, 3);

console.log(colores, menosColores); 
// ["púrpura"]
// ["verde", "amarillo", "azul"]
NB: cantidadDeElementosPorRemover no incluye el último índice en el rango.

Si no se declara el segundo parámetro, todos los elementos a partir del índice dado se eliminarán del arreglo.

let colores = ['verde', 'amarillo', 'azul', 'púrpura'];
const menosColores = colores.splice(3);

console.log(colores, menosColores); 
// ["verde", "amarillo", "azul"]
// ['púrpura']

En el siguiente ejemplo, eliminaremos 3 elementos del arreglo y los reemplazaremos con más elementos:

let agenda = ['Yo', 'tengo', 'una', 'reunión', 'mañana'];
// elimina los 4 primeros elementos y los reemplaza con otros

agenda.splice(0, 4, 'nosotros', 'vamos', 'a', 'nadar');

console.log(agenda); 
// ['nosotros', 'vamos', 'a', 'nadar', 'mañana']

Añadiendo elementos

Para agregar elementos, debemos establecer deleteCount en cero

let agenda = ['Yo', 'tengo', 'una', 'reunión', 'con'];
// añade 3 elementos al arreglo

agenda.splice(5, 0, 'algunos', 'clientes', 'mañana');

console.log(agenda); 
// ['Yo', 'tengo', 'una', 'reunión', 'con', 'algunos', 'clientes', 'mañana']

slice()

Este método es similar a splice() pero muy diferente. Devuelve subarreglos en lugar de subcadenas

Este método copia una parte dada de un arreglo, y devuelve esa parte copiada como un nuevo arreglo. No cambia el arreglo original.

La sintaxis es:

arreglo.slice(inicio, fin)

Un ejemplo básico:

let numeros = [1, 2, 3, 4]

console.log(numeros.slice(0, 3)) // regresa [1, 2, 3]

console.log(numeros) // regresa el array original

La mejor manera de usar slice() es asignarlo a una nueva variable.

let mensaje = 'Felicitaciones en tu día'
const msjCorto = mensaje.slice(0, 14) + '!';

console.log(msjCorto) // returns "Felicitaciones!"

split()

Este método se utiliza para cadenas. Divide una cadena en subcadenas y las devuelve como un arreglo.

Aquí la sintaxis: 

cadena.split(separador, límite)
  • El separador define cómo dividir una cadena ya sea por una coma
  • El límite determina el número de separaciones a realizar
let primerNombre = 'Bolaji';

// Regresa la cadena dentro de un arreglo
primerNombre.split() // ["Bolaji"]

otro ejemplo:

let primerNombre = 'Hola, mi nombre es Bolaji, soy un dev.';

primerNombre.split(',', 2); // ["Hola", " mi nombre es Bolaji"]
NB: Si declaramos con una cadena vacía, como primerNombre.split(''), entonces cada elemento de la cadena será dividido como subcadenas:
let primerNombre = 'Bolaji';

primerNombre.split('') // ["B", "o", "l", "a", "j", "i"]

indexOf()

Este método busca un elemento en un arreglo y devuelve el índice donde se encontró; de lo contrario, devuelve -1

let frutas = ['manzana', 'naranja', false, 3]

frutas.indexOf('naranja'); // devuelve 1
frutas.indexOf(3); // devuelve 3
frutas.indexOf(null); // devuelve -1 (no fue encontrado)

lastIndexOf()

Este método funciona de la misma manera que indexOf() excepto que funciona de derecha a izquierda. Devuelve el último índice donde se encontró el elemento.

let frutas = ['manzana', 'naranja', false, 3, 'manzana']

frutas.lastIndexOf('manzana'); // devuelve 4

filter()

Este método crea un nuevo arreglo si los elementos de una matriz pasan una determinada condición.

La sintaxis es:

let resultados = arreglo.filter(function(elemento, índice, arreglo) {
  // devuelve true si el elemento pasa el filtro
});

Ejemplo:

Comprueba a los usuarios de Nigeria.

const codigoPais = ['+234', '+144', '+233', '+234'];

const nigeriano = codigoPais.filter( codigo => codigo === '+234');

console.log(nigeriano); // ["+234", "+234"]

map()

Este método crea un nuevo arreglo manipulando los valores de un arreglo.

Ejemplo:

Muestra los nombres de usuario en una página. (Visualización básica de una lista de amigos)

const usuarios = ['tina', 'danny', 'mark', 'bolaji'];
const lista = usuarios.map(elem => {
	return '<li>' + elem + '</li>';
});

const render = '<ul>' + lista.join('') + '</ul>';

document.write(render);
1*obuBZKFb5vKmUP7D4TX2XA

otro ejemplo:

// agrega el signo de dólar a los números
const numeros = [10, 3, 4, 6];
const dolares = numeros.map( numero => '$' + numero);

console.log(dolares); // ['$10', '$3', '$4', '$6'];

reduce()

Este método es bueno para calcular totales..

reduce() se utiliza para calcular un valor único basado en un arreglo.

let valor = arreglo.reduce(function(acumulador, valorActual, índice, arreglo) {
  // ...
}, valorInicial);

ejemplo:

Para recorrer un arreglo y sumar todos los números de la matriz, podemos usar el bucle for of.
const numeros = [100, 300, 500, 70];
let suma = 0;

for (let n of numeros) {
	suma += n;
}

console.log(suma);

He aquí cómo hacer lo mismo con reduce()

const numeros = [100, 300, 500, 70];
const suma = numeros.reduce((acumulador, valorActual) =>
	acumulador + valorActual
, 0);

console.log(suma); // 970
Si omitimos valorInicial, el total comenzará por defecto desde el primer elemento del arreglo.
const numeros = [100, 300, 500, 70];
const suma = numeros.reduce((acumulador, valorActual) => acumulador + valorActual);

console.log(suma); // todavía devuelve 970

El siguiente fragmento en inglés muestra cómo funciona el método reduce() con los cuatro argumentos.

fuente: MDN Docs

1*Cbd9qR_vy71qZjEQCFpCLQ

Puedes encontrar más información sobre el método reduce() y varias formas de usarlo aquí(en inglés) y aquí.

forEach()

Este método es bueno para iterar a través de un arreglo. Aplica una función en todos los elementos de dicho arreglo.

const colores = ['verde', 'amarillo', 'azul'];

colores.forEach((elemento, índice) => console.log(elemento, índice));
// devuelve el índice y todos los elementos del arreglo
// "verde" 0
// "amarillo" 1
// "azul" 2

la iteración se puede hacer sin pasar el argumento de índice

const colores = ['verde', 'amarillo', 'azul'];

colores.forEach((elemento) => console.log(elemento));
// devuelve cada elemento del arreglo
// "verde"
// "amarillo"
// "azul"

every()

Este método verifica si todos los elementos en un arreglo pasan la condición especificada y devuelve true si pasa, de lo contrario, false.

comprueba si todos los números son positivos
const numeros = [1, -1, 2, 3];
let todosPositivos = numeros.every((valor) => {
	return valor >= 0;
})

console.log(todosPositivos); // devolvería false

some()

Este método verifica si al menos un elemento (uno o más) en un arreglo pasa la condición especificada y devuelve true si pasa, de lo contrario, devuelve false.

comprueba si al menos un número es positivo
const numeros = [1, -1, 2, 3];
let alMenosUnoPositivo = numeros.every((valor) => {
	return valor >= 0;
})

console.log(alMenosUnoPositivo); // devolvería true

includes()

Este método verifica si un arreglo contiene un determinado elemento. Es similar a .some(), pero en lugar de buscar una condición específica para pasar, verifica si el arreglo contiene un elemento específico.

let usuarios = ['paddy', 'zaddy', 'faddy', 'baddy'];
usuarios.includes('baddy'); // devuelve true

Si el elemento no se encuentra, regresa false

Hay más métodos para arreglos, estos son solo algunos de ellos. Además, hay toneladas de otras acciones que se pueden realizar en los arreglos, intenta consultar los documentos de MDN aquí para obtener información más detallada

Resumen

  • toString() convierte un arreglo en una cadena separada por una coma.
  • join() combina todos los elementos de un arreglo en una cadena.
  • concat() combina dos arreglos juntos o agrega más elementos a un arreglo y luego devuelve un nuevo arreglo.
  • push() agrega elementos al final de un arreglo y cambia el arreglo original.
  • pop() elimina el último elemento de un arreglo y lo devuelve
  • shift() elimina el primer elemento de un arreglo y lo devuelve
  • unshift() agrega un elemento(s) al comienzo de un arreglo y cambia el arreglo original.
  • splice() cambia un arreglo, agregando, eliminando e insertando elementos.
  • slice() copia una parte dada de un arreglo y devuelve esa parte copiada como un nuevo arreglo. No cambia el arreglo original.
  • split() divide una cadena en subcadenas y las devuelve como un arreglo.
  • indexOf() busca un elemento en un arreglo y devuelve el índice donde se encontró, de lo contrario, devuelve -1
  • lastIndexOf() busca un elemento de derecha a izquierda en un arreglo y devuelve el último índice donde se encontró el elemento.
  • filter() crea un nuevo arreglo si los elementos de un arreglo pasan una determinada condición.
  • map() crea un nuevo arreglo manipulando los valores en un arreglo.
  • reduce() calcula un valor único basado en un arreglo.
  • forEach() itera a través de un arreglo, aplica una función en todos los elementos del arreglo
  • every() comprueba si todos los elementos en un arreglo pasan la condición especificada y devuelve true si pasa, de lo contrario false.
  • some() comprueba si un elemento (uno o más) en un arreglo pasa la condición especificada y devuelve true si pasa, de lo contrario false.
  • includes() comprueba si un arreglo contiene un determinado elemento.

Vamos a finalizar aquí; Los arreglos son poderosos y el uso de métodos para manipularlos crea los algoritmos que utilizan las aplicaciones del mundo real.

Hagamos una pequeña función, una que convierta el título de una publicación en un url slug.

URL slug es la dirección exacta de una página o publicación específica en tu sitio web.

Cuando escribimos un artículo en freecodecamp News o en cualquier otra plataforma de escritura, el título de su publicación se convierte automáticamente en un slug sin espacios en blanco, los caracteres en minúsculas y cada palabra del título separada por un guion.

Aquí hay una función básica que hace eso usando algunos de los métodos que aprendimos hace un momento.

const url = 'https://bolajiayodeji.com/'

const urlSlug = (titulo) => {

	let urlPublicacion = titulo.toLowerCase().split(' ');
  
	return url + urlPublicacion.join('-')
}

let titulo = 'Introducción a Chrome Lighthouse'

console.log(urlSlug(titulo));
// https://bolajiayodeji.com/introducción-a-chrome-lighthouse

en urlPublicacion, convertimos la cadena a minúsculas y luego usamos el método split() para convertir la cadena en subcadenas y devolverla en un arreglo

["introducción", "a", "chrome", "lighthouse"]

Unimos en una cadena a urlPublicacion con guiones usando nuevamente .join('-') y estamos listos para devolver la url completa.

return url + urlPublicacion.join('-')

// urlPublicacion.join('-') -> introducción-a-chrome-lighthouse

Eso es todo, bastante simple, ¿verdad? :)

Si recién estás comenzando con JavaScript y sabes inglés, deberías consultar este repositorio aquí, Bolaji está compilando una lista de fragmentos básicos de JavaScript que van desde:

  • Arreglos
  • Flujo de control
  • Funciones
  • Objetos
  • Operadores

¡No te olvides compartir! :)
PD: Este artículo fue publicado por originalmente en inglés en el blog de Bolaji