Manipulación de arrays Flashcards
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”]
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
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
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”]
unshift()
Este método agrega un elemento(s) al comienzo de un arreglo y cambia el arreglo original.
let buscadors = [‘chrome’, ‘firefox’, ‘edge’];
buscadors.unshift(‘safari’);
console.log(buscadors); // [“safari”, “chrome”, “firefox”, “edge”]
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);
- tina
- danny
- mark
- bolaji
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
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
