JAVASCRIPT CREA ACCIÓN MEDIANTE MÉTODOS
Toda acción altera el entorno. Por ejemplo, una lluvia imprevista puede alterar las propiedades de la superficie de una camisa bien planchada. Así mismo, en lenguajes de programación con orientación a objetos las acciones -como insertar un nuevo dato o borrarlo- son ejecutadas por los métodos.
Para Antani y Stefanov[4] las acciones en programación serían como los verbos de cualquier idioma. Como en la camisa empapada por una lluvia de invierno guayaco: la propiedad de 'textura' se vería alterada en su valor: pasaría de 'planchada' a 'mojada'.
En códigoFalso
elemento : camisa;
estadoElemento : planchada;
acción(elemento){
hayLLuvia : si;
nuevoEstado : mojado;
}
resultado : elemento.nuevoEstado;
En las siguientes secciones se detallarán los métodos -acciones- incorporados en Javascript para alterar datos alfanuméricos. En JS los métodos se agrupan en:
MÉTODOS DE ARREGLOS
ARRAY.IS.ARRAY()
Evalúa si un valor creado como arreglo es un dato arreglo. Devuelve true si lo es, y false si no. Esa función detectará al arreglo aún si entre las llaves rectas [...] no hay datos. Si la función tiene incorrecta sintaxis -como no separar los elementos mediante comas- el códido dará error.
En Javascript
const arreglo = [1, 2, 3];
// Evalua si es un dato arreglo
const evaluarArreglo = Array.isArray(arreglo);
console.log(evaluarArreglo);
// true
const noEsArreglo = {};
// Evalua si es un dato arreglo
const nuevaEval = Array.isArray(noEsArreglo);
console.log(nuevaEval);
// false
En otro ejemplo, Array.isArray() es usado para determinar si un dato ingresado es efectivamente un arreglo. Y si lo es, se generará una acción que altere sus elementos:
En Javascript
// Función aloja argumento
function crearValoresDobles(arreglo) {
// Método evalúa si el dato ES DE TIPO ARREGLO
if (Array.isArray(arreglo)) {
// Si es true....
/*
- Se crea una variable que recorrerá el arreglo insertado
- Y en cada elemento recorrido, se lo multiplicará por dos */
for (let i = 0; i < arreglo.length; i++) {
arreglo[i] = arreglo[i] * 2;
}
// Devuelve el arrego
return arreglo;
// Si dato NO es Array
} else {
// SE CREA un objeto tipo Error
throw new Error(' - OJITO PANA: Se espera un dato arreglo!');
}
}
/* Se genera en un contexto diferente
un dato tipo arreglo */
const nuevoArreglo = [1, 2, 3];
/* Se genera en un contexto diferente
un dato QUE NO ES ARREGLO */
const noEsArreglo = 'hello';
console.log(crearValoresDobles(nuevoArreglo));
// [2, 4, 6]
//console.log(crearValoresDobles(noEsArreglo));
/* EN CASO DE QUE EL ARGUMENTO NO SEA UN ARREGLO,
SE ENVIARÁ MEDIANTE CONSOLA EL SIGUIENTE MENSAJE */
/* throw new Error('Se espera que se inserte
un dato arreglo. No importa si está vacio,
pero debe ser sintácticamente correcto.'); */
MÉTODO POP()
Remueve el ÚLTIMO elemento de un arreglo, devolviéndolo. Además, SÍ altera la cantidad de elementos dentro del arreglo.
En Javascript
// Remover el último elemento con pop()
var menu = [
// Indice 0
"Ceviche de camarón o pulpo",
// Indice 1
"guatita"
];
/* Remueve el ÚLTIMO elemento
y lo muestra */
console.log(menu.pop());
// guatita
/* Al ser removido el ÚLTIMO elemento,
el segundo elemento pasa a ser el primero */
console.log(menu[0]);
// Ceviche de camarón o pulpo
// Y el arreglo quedó solo con un elemento
console.log(menu.join(''));
// Ceviche de camarón o pulpo
MÉTODO SHIFT()
Remueve el PRIMER elemento de un arreglo, devolviéndolo. Además, altera la cantidad de elementos dentro del arreglo.
En Javascript
// Arreglo
const cosas = ['cubo', 'rueda', 'cilindro', 'esfera'];
// Remover y obtener el primer elemento del arreglo
const primerElemento = cosas.shift();
// Mostrar el primer elemento borrado
console.log(primerElemento);
// cubo
// Actualizar arreglo
console.log(cosas);
// [ 'rueda', 'cilindro', 'esfera' ]
// Mostrar los elementos sin [...]
console.log(cosas.join(', '));
// rueda, cilindro, esfera
Otro ejemplo itera la remoción del primer elemento hasta vaciar el arreglo:
En Javascript
// Crea arreglo
const cosas = ["esfera", "cubo", "ovalo"];
/* Itera el borrado del primer elemento
del arreglo y lo muestra */
function removerElPrimero() {
/* Itera: mientras la longitud del arreglo sea cero */
while (cosas.length > 0) {
// Variable obtiene elemento borrado
const primervalor = cosas.shift();
// Muestra elemento borrado
console.log(primervalor);
}
}
/* Invocar la función 'removerElPrimero' */
removerElPrimero();
// esfera cubo ovalo
// El arreglo ahora esta vacio
console.log(cosas);
// -> []
Una forma limpia de 'descargar' los elementos del arreglo para vaciarlo –pero al mismo tiempo mostrarlos– es la de mdn en 'Using shift() method in while loop' (abajo):
En Javascript
// Arreglo
const campeonato = ["Barcelona", "Aucas", "Emelec"];
// Inicializamos variable contador
var c;
/* // Loop y condición: envia TRUE si 'c'
NO ES igual a dato 'undefined' */
while (typeof (c = campeonato.shift()) !== 'undefined') {
console.log(c);
}
//-> Barcelona
//-> Aucas
//-> Emelec
console.log(campeonato);
// []
Otro ejemplo de mdn web docs_ es:
En Javascript
var cositas = [
'Caja grande',
'Caja mediana',
'Caja pequeña'];
var item = "*";
// Arreglo actual
console.log(`${item} ` +
'Primero es: ' + cositas);
// Arreglo Modificado
// Elimina el elemento [0]
var eliminado = cositas.shift();
// Muestra eliminado
console.log(`${item} ` +
'Elemento eliminado: ' + eliminado);
// Arreglo actual
console.log(`${item} ` +
"Ahora queda: " + cositas);
/*
* Primero es: Caja grande,Caja mediana,Caja pequeña
* Elemento eliminado: Caja grande
* Ahora queda: Caja mediana,Caja pequeña
*/
FLAT()
Toma los elementos en arreglos de más de una dimensión y los fusiona en un solo arreglo de una sola dimensión. flat() no altera el orden de los elementos dentro del arreglo.
En Javascript
// Arreglo con arreglos anidados
/* [.. [..], [[..], [..]]..] */
const arregloAnidado = [1, 2,
[3, 4],
[[5, 6], [7, 8]]
];
/* Valor flat('depth') */
/*Especifica la anidación del arreglo a aplanar */
/* Si el arreglo a aplanar tiene tres niveles de anidación,
flat(2) aplanará solo los dos primeros niveles
y dejará intacto el tercero. */
const arregloFusionado = arregloAnidado.flat(2);
console.log(arregloFusionado);
// Output: [1, 2, 3, 4, 5, 6, 7, 8]
En otro ejercicio combinado usamos map() junto con flat() para aplanar y procesar los elementos del arreglo hacia un objetivo:
En Javascript
// Arreglo con tres niveles
const arrayAnidado = [[1, 2], [3, 4, [5, 6]]];
// Aplanar los niveles del arreglo en un solo nivel
/* Si no se le dice que aplane los dos niveles,
dejará el último nivel como [5,6],
por lo que al procesarlo con map() resutlará en undefined. */
const arrayAplanado = arrayAnidado.flat(2);
// Cada elemento del array aplanado doblar por dos
const arrayDoble = arrayAplanado.map(num => num * 2);
console.log(arrayDoble);
// [2, 4, 6, 8, 10, 12]
RECORDAR
- Un nivel es cada arreglo anidado.
- Dos niveles de anidación significa que un arreglo agrupa dos conjuntos de brackets: [ [1,2], [3,4] ].
- flat() -sin argumento- aplana por default a nivel 1. Eso quiere decir que solo aplanará uno de los niveles presentes.
- Mediante flat( 2 ) pedimos que aplane los dos niveles hallados en el arreglo que estemos procesando.
MÉTODOS UNSHIFT
Este "agrega uno o más elementos al inicio [en la ubicación cero] del array, y devuelve la nueva longitud del array" (mdn web docs_).
Un ejemplo sencillo del uso de unshift() es:
En Javascript
// Arreglo
const numbers = [2, 3, 4];
// Agregar un valor resultante de una operación
numbers.unshift(8 * 2 + 5);
// Mostrar el arreglo actualizado
// join() para eliminar las llaves cuadradas
console.log(numbers.join(', '));
// 21, 2, 3, 4
Otro ejemplo más complejo podría ser:
En Javascript
// Arreglo con dos elementos
var generos = ['pop', 'punk'];
// Inserta nuevos elementos al arreglo
console.log("Cantidad de elementos: " +
generos.unshift("hardcore", "heavy metal"));
/* Pero también devuelve cantidad de elementos del arreglo */
// Muestra arreglo completo
console.log("Mostrar arreglo completo: " + generos);
/*
Cantidad de elementos: 4
Mostrar arreglo completo:
hardcore,heavy metal,pop,punk
*/
MÉTODO INCLUDES()
Método de respuestas binarias. Para mdn web docs_include() retorna true si un elemento está presente en un arreglo. Si no lo está, devuelve false.
En Javascript
const autores = [
"Bruno",
"Ricardo",
"Dudú",
"Miguel"
];
/* arreglo.includes(elementoAbuscar) */
console.log(autores.includes("Bruno"));
// --> True
MÉTODO INDEXof
En la vida real existen elementos cuantificables que se repiten. Por ejemplo, en ciertas familias hay más de una persona con el mismo nombre. En JS la primera presencia de un elemento dentro de un arreglo se conoce con el anglicismo de ocurrence.
Para mdn web docs_indexOf() evalúa igualdad estricta -el elemento debe ser igual en valor y en tipo de dato para darlo como presente-. Si halla el elemento se retorna solo el primer índice del elemento requerido. Si no lo ubica, retorna -1.
let nombres = ["Edu", "José", "José", "Adrian" ];
// Ubicar índice de 'José'
console.log(nombres.indexOf("José"));
/* José aparece por primera vez en el índice...*/
// 1
// Ubicar índice de 'Adrian'
console.log(nombres.indexOf("Adrian"));
// 3
// Ubicar algo inexistente
console.log(nombres.indexOf("bla"));
// -1
Abajo, el argumento de indexOf() es el elemento a buscar. En el segundo ejemplo, se busca una palabra pero a partir de un índice dado en delante. indexOf() retornará únicamente el índice en donde esté ubicado el elemento a buscar:
En Javascript
// ** EJEMPLO A **
let cosas = ["rojo", "verde", "azul"];
// Ubicar índice de 'verde'
console.log(cosas.indexOf("verde"));
// 1
// ** EJEMPLO B **
let himno = ["Salve", "oh", "patria", "mil", "veces"];
/* Guardar indice de 'mil'.
Solo se buscará desde el índice 1 en adelante */
var buscar = himno.indexOf("mil", 1);
/* Invocar variable que guarda el
índice del elemento requerido */
console.log(buscar);
// 3
/* // Invocar arreglo[elementoIndice]
para mostrar CUÁl es el elemento correspondiente al índice 3 */
console.log( himno[buscar] );
// 'mil'
/* O lo que es lo mismo */
console.log( himno[himno.indexOf("mil", 1)] );
// 'mil'
En otro ejemplo:
En Javascript
// Arreglo
const letras = ["aaa", "bbb", "ccc", "xxx"];
// Retorna primera ubicación de 'ccc'
console.log(letras.indexOf("ccc"));
// 2
/* Retorna primera ubicación de 'xxx'
desde el índice cero */
console.log(letras.indexOf("xxx", 0));
// 3
// No halla 'yyy' en la ubicación cinco
console.log(letras.indexOf("yyy", 5));
// --> -1
/* La condicional debe evaluar
igual o mayor a cero para
el elemento hallado. */
if ( letras.indexOf("ccc") > 0 )
console.log("'ccc' SÍ hallado");
// 'ccc' fue hallado
/* La condicional debe evaluar
menor a cero para elemento no
ubicado. */
if ( letras.indexOf("cosita") == -1 )
console.log("'cosita' NO hallado ");
// 'cosita' NO hallado
MÉTODO LASTINDEXof()
Este método devuelve el último índice de ubicación en caso de que el elemento a buscar tenga más de una ocurrencia. RECORDAR: los elementos de un arreglo se cuentan desde el cero en adelante.
// Índices: cero, uno, dos, tres...
var indices = [0, 0, 0, 0, 0, 'A', 'A', 'A'];
var idx = indices.lastIndexOf("A");
// Retorna el último índice de 'A'
console.log("El último índice de 'A' es ", idx);
// El último índice de 'A' es 7
Finalmente, se debe recordar que cualquier elemento no hallado por indexOf() o lastIndexOf() retornará el valor -1.
var indices = ["no", "no", "no"];
// Buscar con lastIndexOf()
var buscar1 = indices.lastIndexOf("si");
// Buscar con indexOf()
var buscar2 = indices.indexOf("si");
/* Si cualquiera de ambos resultados es -1*/
if ( buscar1 || buscar2 == -1){
console.log("No existe el elemento Sí");
}
// -> No existe el elemento "Sí""
MÉTODO MAP()
Crea nuevo arreglo con nuevos elementos alterando uno a uno los del primer arreglo original. Es decir, crea un nuevo arreglo con valores transformados uno a uno. Además, map() NO altera el arreglo original.
En Javascript
// Arreglo
const arreglo = [1, 2, 3];
/* Aloja alteración de cada elemento.
Cada elemento suma 10 */
const nuevoArreglo = arreglo.map(item => item + 10);
// Invoca nuevo arreglo
console.log(nuevoArreglo.join(', '));
// 11,12,13
// No altera el arreglo anterior
console.log(arreglo.join(', '));
// 1, 2, 3
A partir de un nuevo arreglo, map() devuelve el arreglo modificado con nuevos valores, pero sin cambiar el arreglo original. El método map() no permite como argumento una función común –function tal()–. Solo permite invocar una función común desde su propio parámetro.
En Javascript
const musica = [
{ estilo: 'punk', inicio: 1979 },
{ estilo: 'hardcore', inicio: 1992 },
{ estilo: 'blues', inicio: 1955 }
];
const lista = musica.map(genero => genero.estilo);
console.log(lista.join(', '));
// punk, hardcore, blues
También para obtener propiedades de cada elemento, como su longitud de caracteres:
En Javascript
// Arreglos con elementos alfanumericos
const palabras = ['Guayaquil', 'de', 'mis...'];
/* Aloja nuevo arreglo que mide cantidad
de caracteres de cada elemento mediante '.lenght' */
const cantidad = palabras.map(palabras => palabras.length);
/* Muestra cantidad de caracteres de cada elemento */
console.log(cantidad);
// [ 1, 2, 6 ]
Y para obtener SOLO los valores de una sola propiedad:
En Javascript
// Arreglo con elementos objeto
/* Recordar: el último elemento NO tiene coma */
const ecu = [
{ prov: 'Guayas', capital: "GYE" },
{ prov: 'Pichincha', capital: "UIO" },
{ prov: 'Azuay', capital: "CUE" }
];
// Aloja solo valores de cierta propiedades
const valores = ecu.map(mostrar => mostrar.capital);
// Mostrar en forma de lista
console.log(valores.join('\n'));
/*
GYE
UIO
CUE
*/
Otro ejemplo usando map() y variables literales ${'...'}:
En Javascript
const comida = ['Quito', 'Cuenca', 'Guayaquil'];
/* nombreArreglo.map(valor => {...}) */
const result = comida.map(evaluado => {
console.log(`${evaluado}, Ecuador.`);
});
/*
Quito, Ecuador
Cuenca, Ecuador
Guayaquil, Ecuador
*/
Otros tres ejemplos del uso de map():
// Arreglo inicial
let arreglo = [10, 20, 30];
console.log("> Arreglo inicial : " + arreglo);
/* Map() permite una función flecha
cuyo parámetro 'elemento' es identificado
como cada iteración de los elementos del arreglo */
let mapeo = arreglo.map(elemento => elemento + 1);
console.log("* Arreglo alterado : " + mapeo);
//-> [ 11, 21, 31, 41 ]
// + + + + + +
/* Seguimos trabajando con el arreglo inicial */
const nuevoArr = arreglo.map(calculo);
function calculo(num) {
return num * 10;
}
console.log("* Arreglo alterado : " + nuevoArr);
//-> [ 100, 200, 300, 400 ]
// + + + + + +
/* Seguimos trabajando con el arreglo inicial */
const nuevoCalculo = arreglo.map(Math.sqrt).join('\n');
console.log("* Arreglo alterado : " + nuevoCalculo);
// * Arreglo alterado : 3.1622776601683795,4.47213595499958,
5.477225575051661,6.324555320336759
// + + + + + +
/* Aún así, el arreglo inicial sigue intacto */
console.log("> Arreglo inicial : " + arreglo);
//-> [ 10, 20, 30, 40 ]
/*
> Arreglo inicial : 10,20,30
* Arreglo alterado : 11,21,31
* Arreglo alterado : 100,200,300
* Arreglo alterado : 3.1622776601683795
4.47213595499958
5.477225575051661
> Arreglo inicial : 10,20,30 */
Sin embargo, map() sí acepta como parámetro una función flecha. Ese parámetro –sea cual sea su nombre identificador– dentro de ese tipo de función flecha recibirá el elemento del arreglo.
Map() también permite reusar un arreglo alterado para activar otro método que también lo alteren:
En Javascript
// Primer arreglo
const numeros = [1, 2, 3];
// Aloja primer arreglo alterado cada elemento
const duplicados = numeros.map(numeros => numeros * 2);
// 2, 4, 6
/* Luego, aloja el arreglo anterior y lo
vuelve a alterar mediante método reduce() */
const totalduplicados = duplicados.reduce(
(total, numeros) => total + numeros);
// Suma cada elemento aloja un solo resultado
console.log(totalduplicados);
// 12
MÉTODO REDUCE()
Itera y acumula el resultado de un valor según actividad de la función de retorno callBack. 'Lee' los elementos de izquierda a derecha. El método reduce() contiene un llamado a la función callback que a su vez, puede contener hasta dos parámetros: un valor acumulador y el elemento del arreglo que está siendo procesado.
En Javascript
// Aloja arreglo y elementos
const numeros = [10, 20, 30];
/*
- Aloja acceso desde el arreglo 'numeros' hacia reduce()
- reduce() tiene dos parámetros
- En cada iteración 'valorActual' se añade a 'acumulador'
- Cada nuevo valor ingresa a 'acumulador'
y espera la siguiente iteración.
*/
/* OJO en el callback: primero es el acumulador
-cuyo valor deberá ser actualizado-, luego el
elemento del arreglo en 'valorActual' */
// Ambos valores se fusional para ser un solo valor
const suma = numeros.reduce((acumulador, valorActual) => {
return acumulador + valorActual;
/* Cero es el valor inicial para 'acumulador'.
Es un valor opcional, pero es buena práctica dar
ese valor inicial para asegurar que recude() funcione bien. */
}, 0);
/* SI NO SE DA EL VALOR INICIAL -en este caso, cero-,
reduce() usará el primer elemento del arreglo como
valor inicial. Sin embargo, ese valor no será
siempre el que se desea.
*/
/* reduce() acumula el valor de 'acumulador'
que es la suma de todos los valores del arreglo 'numeros' */
console.log(suma);
// 60
Así mismo, se puede usar reduce() con elementos alfanuméricos de un arreglo:
En Javascript
const palabras = ["Hola", "Edu", "!"];
/*
- 'a' es el valor que acumula
- 'b' es el actual valor procesado
*/
const x = palabras.reduce((a, b) => {
// Devuelve unión de valores
return a + " " + b;
});
console.log(x);
// Hola Edu !
MÉTODO REDUCERIGHT()
Similar al método reduce() -revisado más arriba-. Pero el método reduceRight() 'lee' los elementos del arreglo de derecha a izquierda. Ambos métodos -reduce() y reduceRight() usa la intervención de una función para alterar sus elementos.
ARGUMENTOS DE REDUCE() y REDUCERIGHT()
- reduce() y reduceRight() usan como argumento un llamado de función que puede alterar los valores del arreglo pedido.
- Así mismo, es opcional un valor inicial que funcional como acumulador.
ARGUMENTOS DE LA FUNCIÓN DE RETORNO -callBack-
- Argumento como acumulador que da el valor inicial al valor a procesar
- Argumento en el papel de actual elemento de arreglo procesado
- Argumento en el papel de índice del actual elemento
- Argumento en el papel del contenido del arreglo que se está analizando
En Javascript
const arr = ["primero", "medio", "ultimo"];
/* Esta vez, el acumulador OBTIENE el ÚLTIMO
elemento del arreglo */
/* El acumulador reactualiza su valor
con un nuevo dato para cada bucle */
const resultado = arr.reduceRight(
(accumulator, currentValue) => {
return accumulator + " " + currentValue;
});
// Resulta en string concatenados
console.log(resultado);
// ultimo medio primero
Ya que el resultado es un string -y NO un arreglo- no puedo separar los elementos mediante coma desde el método join(). Pero si deseamos usarlo, deberíamos aplicar en la invocación final a split() para separar los strings entre comas, y join() para eliminar los [...]
En Javascript
// Arreglo
const arr = ["primero", "medio", "ultimo"];
// Aloja proceso de cada elemento
const res = arr.reduceRight((acumula, elemActual) => {
return acumula + " " + elemActual;
});
/* Aquí es donde que CADA STRING obtenido
tenga separación mediante coma */
console.log(res.split(' ').join(', '));
// ultimo, medio, primero
/* Si usamos solo split, solo
se mostrarán también los [...] */
console.log(res.split(' '));
[ 'ultimo', 'medio', 'primero' ]
MÉTODO SLICE()
Este método de arreglo 'corta y obtiene' desde un inicio hacia un final una porción de elementos dentro de un arreglo. Se resalta que slice() no altera la longitud del arreglo. Recordar: un arreglo tiene elementos posicionados mediante índices desde del cero en adelante.
En Javascript
// Extraer
// |–––––––––––––––|
const cosas = ['elem0', 'elem1', 'elem2'];
// Extraer desde el indice 0 hasta el indice 2
// OJO: el ÚLTIMO elemento del último índice no se muestra
const extraer = cosas.slice(0, 2);
// join() para mostrar solo el elemento
console.log(extraer.join());
// elem0, elem1
Según el ejemplo de arriba, ¿Por qué no se extrae también el valor 'elem2', si pedimos cortar desde el índice 0 hasta el 2?. Es porque el último elemento del último índice no es mostrado.
CONTAR VS UBICAR NO ES LO MISMO
En programación hay mucha diferencia entre contar y ubicar los elementos de un arreglo. RECORDAR: Se cuentan los elementos desde el número uno en adelante, pero se ubican los elementos desde el ÍNDICE CERO en adelante.
Si tenemos un arreglo de tres elementos el conteo de la ubicación de cada elemento será a partir del índice cero en adelante. Si se pide slice(0, 1) para un arreglo de cuatro elementos, la extracción se delimitará entre los índices –de los elementos– 0 y 1.
[ 0xxxx, 1xxxx, 2xxxx, 3xxxx ]| ---- | se extrae
Pero si se pide slice(0, 2), la extracción del dato se delimitará entre los elementos ubicados entre los índices 0 y 2:.
[ 0xxxx, 1xxxx, 2xxxx, 3xxxx ]| ----------- | se extrae
Tomar cuenta que, a diferencia del último índice dado –que se excluye de ser extraído, el primer índice dado sí lo tomará en cuenta.
En Javascript
var arreglo = [0,1,2,3];
// Cortar y obtener desde el índice 1 en adelante
console.log(arreglo.slice(1));
// --> [ 1, 2, 3 ]
En otras palabras, JS cuenta los elementos de un arreglo desde el número uno, pero los ubica desde el índice cero en adelante. Por lo que slice() tomará en cuenta solo el índice para seleccionar desde dónde a dónde cortar.
Finalmente, con slice(), "Cuando no se proporcione el índice final, slice tomará todos los elementos después del índice de inicio" y omitir el índice de inicio copia todo el array[1].
const cosas = ['cosa0', 'cosa1', 'cosa2'];
// Solo un índice
const desdeEnAdelante = cosas.slice(2);
console.log(desdeEnAdelante);
// [ 'cosa1', 'cosa2' ]
// Sin índice
const copiaTodo = cosas.slice();
console.log(copiaTodo);
// [ 'cosa0', 'cosa1', 'cosa2' ]
SLICE() COMO MÉTODO INTEGRADO EN TIPOS PRIMITIVOS
Ya hemos dicho que el contenido de los valores no es modificable. Sin embargo, en JS todos los valores primitivos integran métodos que funcionan como manipuladores para un nuevo resultado, pero sin modificar la referencia original. Similar al uso de una fotocopiadora: obtendremos una copia de una imagen y podremos manipular esa copia, pero no el original.
En Javascript
// Valor original
var frase = "Guayaquil de mis amores";
// De inicio al final
// Mostrar solo la primera palabra
console.log(frase.slice(0, 8));
// --> Guayaquil
// Pero el string original sigue intacto
console.log(frase);
// --> Guayaquil de mis amores
// De final hacia delante
// Mostrar solo la última palabra
console.log(frase.slice(-6));
// --> amores
// Y el string original sigue intacto
console.log(frase);
// --> Guayaquil de mis amores
MÉTODO TOLOCALESTRING()
El método toLocaleString() devuelve un string con cada elemento del arreglo con alguna alteración. Es útil cuando se necesita mostrar datos con algún tipo de formato, como moneda local:
En Javascript
// Arreglo
const cost = [10, 20, 30];
// Aloja formato con estilo dólar y decimales
// Se especifica el simbolo de la moneda local 'en-US'
const dolar = cost.toLocaleString('en-US',
/* Opciones que el método toLocaleString()
facilita para el formateo de datos */
{ style: 'currency', currency: 'USD' });
console.log(dolar);
// $10.00,$20.00,$30.00
Ojito con las opciones de formato para los datos obtenidos por toLocaleString():
OPCIONES DE FORMATO
- { style:.. posibles valores son 'decimal', 'currency', 'percent'
- { currency:.. posibles valores son 'USD', 'EUR', 'JPY'
- { minimumIntegerDigits:.. mínima cantidad de dígitos antes del punto decimal
- { minimumFractionDigits:.. mínima cantidad de dígitos después del punto decimal
- { maximumFractionDigits:.. máximos dígitos después del punto decimal. Si el número tiene más dígitos estos serán redondeados.
- xxxx
Finalmente, toLocaleString() puede ser usado con elementos alfanuméricos -palabras, números y palabras- para ser mostrados como elementos string:
En Javascript
// Arreglo
let banda = ["bajo", "batería", "guitarra"];
let result = banda.toLocaleString();b
console.log(result);
// bajo,batería,guitarra
MÉTODO CONCAT()
Este método une dos o más arreglos en uno solo. No altera ninguno de los arreglos referenciados, pero concat() genera un nuevo arreglo a partir de esas referencia.
En Javascript
// ** Uniendo dos arreglos
const saludo = ["Hola! que tal,"];
const nombre = ["Dudú"];
// Genera nuevo arreglo
const completo = saludo.concat(nombre);
console.log(completo);
// --> [ 'Hola! que tal,', 'Dudú' ]
// OTRO EJEMPLO **
// ** Uniendo tres arreglos
const saludo = ["Hola!, soy"];
const nombre = ["Dudú. Vivo en "];
const ciudad = ["Guayaquil"]
// Genera nuevo arreglo
const completo = saludo.concat(nombre, ciudad);
console.log(completo);
// --> [ 'Hola!, soy', 'Dudú. Vivo en ', 'Guayaquil' ]
concat() permite juntar arreglos anidados insertos explícitamente como argumentos en concat():
En Javascript
// primer arreglo
const a = [1, 2, 3];
// segundo arreglo
const b = [4, 5, 6];
// nuevo arreglo :
/* Aloja en 'c' la unión del arreglo 'a' junto con 'b',
junto con los valores '7, 8, 9,' junto con un el arreglo anidado
[10, [11, 12]] */
const c = a.concat(b, 7, 8, 9, [10, [11, 12]]);
// resultado
console.log(c);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, [11, 12]]
concat() También permite unir valores sueltos hacia un arreglo. Nuevamente, ese método no altera los arreglos referenciados. Simplemente toma sus elementos y los 'pega' entre sí.
const a = ["Enero", 10];
const b = a.concat("Febrero", [2022, 2023]);
console.log(b);
// [ 'Enero', 10, 'Febrero', 2022, 2023 ]
concat()También se pueden 'pegar' juntos valores de arreglos anidados –llaves dentro de llaves-:
const a = [ [ 1,2, [10,20] ] ];
const b = [3,4, [5,6]];
const x = a.concat(b);
console.log(x);
Finalmente concat() permite usar arreglos como argumentos de funciones, 'cortarlos' y unirlos para crear uno nuevo.
En Javascript
// Función con dos argumentos
function remover(array, indice) {
/* Devuelve el primer argumento */
/* Corta el array desde la ubicación cero
hasta el valor que se haya ingresado */
return array.slice(0, indice) /*...sigue */
/* Luego, 'une' a ese resultado un nuevo arreglo:
con el valor indice' sumado con 1 */
.concat(array.slice(indice + 1));
} // Fin remover()
// Aloja invocación de función + argumentos
// + El primer argumento: un array
// * El segundo: el 2
var resultado = remover( ["a", "b", "c", "d", "e", "f"], 2);
// Muestra: cortar desde 0 hasta 3
console.log(resultado);
// [ 'a', 'b', 'd', 'e', 'f' ]
MÉTODO SPLICE()
Si el método slice() no altera los elementos de un arreglo, el método splice() sí lo hace. Primero, este devuelve un arreglo de elementos borrados; o un arreglo vacio si no hay elementos en el arreglo. Segundo: inserta nuevos elementos en el arreglo.
En Javascript
var arr = [0,1,2,3,4];
// Quitar desde el índice 3 en adelante
var quitar = arr.splice(3);
// Se va 3, 4..
// Mostrar lo quitado
console.log(quitar);
// --> [ 3, 4 ]
// Muestra el arreglo alterado
console.log(arr);
// --> [ 0, 1, 2 ]
Un segundo argumento dado a splice()(ejemplo abajo) indica cuántos elementos en adelante deben ser quitados.
var arr = [0,1,2,3,4,5,6,7,8,9];
/* Quitar desde el índice 3,
SOLO DOS elementos hacia adelante */
var quitar = arr.splice(3, 2);
// Mostrar lo quitado
console.log(quitar);
// --> [ 3, 4 ]
// Muestra el arreglo alterado
console.log(arr);
// --> [0, 1, 2, 5, 6, 7, 8, 9]
/* Al arreglo le faltan
los dos valores mostrados */
Así mismo, nuevos argumentos dados a splice() reemplazan los elementos eliminados del arreglo.
var arr = [0,1,2,3,4,5,6,7,8,9];
/* Quitar desde el índice 3,
SOLO DOS elementos hacia adelante. */
/* Y además, agregar DESDE lo quitado
dos nuevos strings */
var quitar = arr.splice(3, 2, "Aqui..", "estoy..");
// Mostrar lo quitado
console.log(quitar);
// --> [ 3, 4 ]
// Muestra el arreglo alterado
console.log(arr);
/* [ 0, 1, 2, 'Aqui', 'estoy..', 5, 6, 7, 8, 9 ]*/
De igual forma, splice() también funciona como intercalador de valores cuando se le da un argumento cero:
var frase = ["Hola, ", "soy " + "Dudú"];
/* Desde el índice 1, no quitar nada. Agregar strings*/
var quitarYponer = frase.splice(1,0,
["Buenos ","días!"], "Qué tal");
// Muestra lo que se quitó (nada)
console.log(quitarYponer);
// --> []
console.log(frase);
// [ 'Hola, ', [ 'Buenos ', 'días!' ], 'Qué tal', 'soy Dudú' ]
En el ejemplo de abajo, para insertar nuevos elementos con splice(), primero desde dos argumentos -posición y cantidad de elementos a borrar-; luego, los argumentos alfanuméricos restantes son las palabras a insertar.
En Javascript
// Arreglo de índices
var arr = ["Guayaquil"];
/* SPLICE()
Inserta dos elementos 'A' y 'B'
a partir desde el índice 1,
sin eliminar nada*/
arr.splice(1,0, "de", "mis", "amores");
// Muestra todo
console.table(arr);
/*
┌─────────┬─────────────┐
│ (index) │ Values │
├─────────┼─────────────┤
│ 0 │ 'Guayaquil' │
│ 1 │ 'de' │
│ 2 │ 'mis' │
│ 3 │ 'amores' │
└─────────┴─────────────┘
*/
MÉTODO FILL()
Al igual que splice(), fill() altera el arreglo referenciado rellenándolo según parámetros ingresados.
En Javascript
/* Se aloja un arreglo con
el constuctor 'new' con 5 elementos */
var a = new Array(5);
// Rellene todo el arreglo con letra 'o'
console.log( a.fill("o") );
// --> [ 'o', 'o', 'o', 'o', 'o' ]
/* Rellene con 'x' pero inicie el
relleno desde el indice 1 */
console.log( a.fill("x",1) );
// --> [ 'o', 'x', 'x', 'x', 'x' ]
/* Rellene con 'A' desde
los indices 2 a hasta el
penúltimo índice */
console.log( a.fill("A",2,-1) );
// [ 'o', 'x', 'A', 'A', 'x' ]
Un uso útil de fill() podría ser el de generar datos según porcentajes:
En Javascript
// Barras con porcentajes
// función con dos argumentos
function barra(nombre, porcentaje) {
/* 'longitud' aloja el argumento numérico ingresado
// El argumento numérico será el porcentaje que deseamos mostrar
// Divido para 10, porque solo limitaremos
el rango de los '*' en 10 */
const longitud = Math.round(porcentaje / 10);
/* bar' aloja un arreglo con la longitud
dada por el cálculo 'longitud'. Luego, llena con
'*' sin separación */
const bar = new Array(longitud).fill('*').join('');
// Aloja el argumento numérico dado junto con el signo '%'
const porcentajeString = `${porcentaje}%`;
/* OJO ESTE USO DE LAS PLANTILLAS LITERALES (!)
Devuelve argumento 'nombre', el nuevo arreglo
en 'bar' y el porcentaje. */
return `${nombre} ${bar} ${porcentajeString}`;
}
// Example usage
console.log(barra("ValorA", 26));
console.log(barra("ValorB", 65));
console.log(barra("ValorC", 85));
/*
ValorA *** 26%
ValorB ******* 65%
ValorC ********* 85%
*/
Finalmente, un ejemplo similar al anterior; pero con un método para ordenar los valores:
En Javascript
// Función con dos parámetros
function crearBarras(item, porcentaje) {
// Aloja porcentaje divido para la cantidad de asteriscos
const longitudBarra = Math.round(porcentaje / 10);
/* Aloja nuevo arreglo con la cantidad de '*'
según el argumento ingresado y separado mediante 'join'*/
const bar = new Array(longitudBarra).fill('* ').join('');
// Aloja argumento ingresado con signo '%'
const porcentajeString = `${porcentaje}%`;
// Devuelve argumentos, barra y... una propiedad.
/* SÍ. la propiedad 'propiedadBarraString' con el valor
de la plantilla literal `${item}... */
return { item, porcentaje,
propiedadBarraString: `${item} ${bar} ${porcentajeString}` };
}
/* Agregamos en un arreglo las INVOCACIONES
de la función y sus argumentos. Sí, un arreglo también
puede alojar invocaciones de funciones */
const lasBarras = [
crearBarras("Candidato A", 100),
crearBarras("Candidato B", 15),
crearBarras("Candidato C", 80),
crearBarras("Candidato D", 8)
];
/* Al arreglo 'lasBarras' le accedemos sort() y creamos una
función comparadora. Dos argumentos 'a, b' y comparamos
que cada elemento sea menor al siguiente */
lasBarras.sort((a, b) => a.porcentaje - b.porcentaje);
/* Si de mayor a menor, invertir argumentos*/
/* Luego, por cada elemento del arreglo -es decir,
por cada barra- muestre la propiedad 'propiedadBarraString' */
// Output each bar string in the sorted order
lasBarras.forEach(bar => console.log(bar.propiedadBarraString));
/*
Candidato D * 8%
Candidato B * * 15%
Candidato C * * * * * * * * 80%
Candidato A * * * * * * * * * * 100%
*/
MÉTODO COPYWITHIN()
Para ChatGPT: "copyWithin() es un método de matriz que permite copiar una parte de una matriz a otra ubicación dentro de la misma matriz, sobrescribiendo -borrando- los elementos existentes en el proceso". El arreglo original es alterado.
En Javascript
const frase = [2.50, "Vendo", "guatita", ];
// [2.50, "Vendo", "guatita", ]
// Copiar en el primer índice el valor desde 1 a 2
frase.copyWithin(0, 1, 2);
console.log(frase);
/* El valor 2.50 fue reemplazado por 'vendo' */
// [ 'Vendo', 'Vendo', 'guatita' ]
Tomar en cuenta al momento de invocar arreglos:
- Agregar un string al llamado de un arreglo elimina los [..., ...]
- Ej.: console.log(" " + arreglo);
En otro ejemplo:
En Javascript
// Orden inicial del arreglo
var arreglo = ['a','b','x','y','casa','gato'];
console.log("El orden inicial fue " + arreglo);
// El orden inicial fue a,b,x,y,casa,gato
/* Desde la ubicación del indice cero insertar
los elementos ubicados desde el índice 3 hasta 4 */
console.log("Ahora el orden es " + arreglo.copyWithin(0, 3, 4));
// Ahora el orden es y,b,x,y,casa,gato
// El arreglo original FUE ALTERADO
console.log(arreglo);
// [ 'y', 'b', 'x', 'y', 'casa', 'gato' ]
En otros ejemplos:
En Javascript
// Arreglo
var arregloFrase = ['Guayaquil', 'de', 'mis'];
/* En el índice cero, COPIAR allí
todo lo que se halle entre los índices 3 a 4 */
var cambioA = arregloFrase.copyWithin(1, 0, 2);
console.log(cambioA);
// [ 'Guayaquil', 'Guayaquil', 'de' ]
// El arreglo 'arregloFrase' ha sido alterado
// + + +
/* En el último índice COPIAR todo lo que
se halle entre los índices 0 a 1 */
var cambioB = arregloFrase.copyWithin(-1, 0, 1);
console.log(cambioB);
// [ 'Guayaquil', 'Guayaquil', 'Guayaquil' ]
// Otro ejemplo:
const letrasA = ["A", "B", "C", "D"];
/* Copiar en el indice cero lo que se halle en el indice 3 */
let mostrarA = letrasA.copyWithin(0, 3);
console.log(mostrarA);
// [ 'D', 'B', 'C', 'D' ]
/* Copiar al indice 2 lo que se halle entre indice 0 y 2 */
const letrasB = ["A", "B", "C", "D", "D", "E"];
let mostrarB = letrasA.copyWithin(1, 2, 3);
console.log(mostrarB);
// [ 'D', 'C', 'C', 'D' ]
Finalmente, si no se especifica el último índice en los parámetros del método –es decir, si solo se piden dos valores y no tres– se copiarán los elementos desde el primer índice en adelante. Hasta la fecha de hoy esté método no funciona para navegadores Internet Explorer 11 y anteriores.
En Javascript
const frase = ["A", "B", "C", "D" ];
// Solo se da un argumento de indice
/* Copia en el indice 1 sobreescribirá
los elementos que inician en indice 1 */
frase.copyWithin(1);
console.log(frase);
// [ 'A', 'A', 'B', 'C' ]
MÉTODO FINDINDEX()
Retorna un índice de elemento de un array siempre que cumpla una condición desde 'findIndex (...condicion...)'. Devuelve -1 si no la cumple. Recordar:
En Javascript
const nums = [1, 2, 3, 4, 5];
/* Aloja búsqueda del índice
de un elemento que sea IGUAL a 3 */
const indiceHallado = nums.findIndex(item => item === 3);
console.log(indiceHallado);
// 2
En otro ejemplo se busca el primer índice de un elemento de arreglo que finalice con un caracter dado en condición:
En Javascript
// Arreglo
const arr = ['Julio', 'Julia'];
// Hallar elemento que finalice con la letra 'a'
/* OJO COMO EL ELEMENTO ITEM DEBE ACCEDER
AL MÉTODO CHARAT PARA ASÍ, LOGRAR OBTENER EL CARACTER */
const x = arr.findIndex(
item => item.charAt(item.length - 1) === 'a');
console.log(x);
// 1
// Luego, podemos llamar al elemento según el índice dado
console.log(arr[1]);
// Julia
MÉTODO JOIN()
Junta los elementos de un arreglo con un separador alfanumérico dado en parámetro. Aún así, la longitud del arreglo arreglo.length no es alterada.
En Javascript
// Arreglo con cuatro elementos
const elements = ['Guayaquil', 'de',
'mis', 'amores'];
/* Sin unión. Separación standart
mediante ',' cuando se omite
elemento de separación */
console.log(elements.join());
// Guayaquil,de,mis,amores
// Unir sin ningún elemento
console.log(elements.join(''));
// Guayaquildemisamores
// Unir con guión
console.log(elements.join(' ** '));
// Guayaquil ** de ** mis ** amores
// Unir con comas
console.log(elements.join(', '));
// Guayaquil, de, mis, amores
/* El arreglo referenciado sigue
teniendo cuatro elementos */
console.log(elements.length);
// 4
Y para mostrar el último elemento de todo arreglo, la sintaxis es: nombreArreglo [nombreArreglo.length-1]
//Arreglo con dos elementos
const elements = ['primero', 'final'];
// Mostrar el último
console.log(elements[elements.length-1]);
// --> final
MÉTODO EVERY()
Evalua el cumplimiento de una condición en todos los elementos del arreglo:
En Javascript
// Arreglo
const numbers = [15, 20, 25, 30];
/* Aloja evaluación: si cada item es mayor a 10 */
const eval = numbers.every((item) => item > 10);
/* Si todos los elementos son mayores a 10, da TRUE */
// Sino, da FALSE
console.log(eval);
// true
En otro ejemplo:
En Javascript
// Arreglo
let palab = ['panita', 30];
function detectar(){
/* Detectar si el elemento con índice
cero corresponde a la palabra 'panita'*/
return palab[0] == "panita";
}
console.log(palab.every(detectar));
//-> True
En otro ejemplo, la evaluación se la hace retornando desde la función al parámetro 'elemento' de la función 'detectar():
let palab = [true, true, false];
function detectar(elemento){
/* Detectar si TODOS LOS ELEMENTOS
del arreglo tienen valor booleano 'true' */
// Retornamos parámetro 'elemento'
return elemento == true;
}
/* Invocamos arreglo, método every() y función */
console.log(palab.every(detectar));
//-> False.
MÉTODO REPEAT()
Sencillo método que repite valores según cantidad dada en argumento.
var frase= "Gringa loca," + "\n" ;
// Repite 3 veces
var coro = frase.repeat(3);
/*
Gringa loca...
Gringa loca...
Gringa loca...
*/
var sigue = "Fuiste tú la que se quiso casar..."
console.log(coro + "\n" + sigue);
// Valor referenciado desde 'frase' no se altera
MÉTODO SORT() y REVERSE()
Ordena de forma ascendente –o también descendente– lo valores de un arreglo. Con reverse() resulta en un orden inverso.
const dias = [9, 20, 1000];
/* Ordena y altera el arreglo
–de mayor a menor– */
console.log(dias.sort());
// --> [ 1000, 20, 9 ]
// Para ordenar de menor a mayor
/* Debe comparar dos valores.
Luego, devolver de menor a mayor */
function ordenarInverso(a, b) {
return a - b;
}
// Uso de nombre de función como argumento
console.log( dias.sort(ordenarInverso) );
// --> [ 9, 20, 1000 ]
// ** CON REVERSE() **
console.log(dias.reverse());
// --> 1000, 20, 9
MÉTODO SOME()
Evalúa si cada uno o al menos uno de los elementos de un arreglo cumple una condición dada callback. No altera el arreglo inicial y no evalúa elementos sin valor. some()siempre requerirá de una función para recorrer un arreglo. Devolverá booleanos: true si alguno de los elementos –no mostrará el elemento– da true en la condición.
En Javascript
// Arreglo
const numbers = [5, 10, 15, 20];
/* Aloja condición: si todos o alguno
de los elementos cumple la condición */
const eval = numbers.some((number) => number > 10);
// Si condición se cumple: TRUE
console.log(eval);
// true
En otro ejemplo:
// Arreglo
const edad = [5, 10, 15, 20];
/* Se crea función 'revisar'
con el arreglo 'edad' como argumento */
function revisar(edad) {
return edad > 19;
}
/* ¿Hay algún valor en 'edad' por encima de 19? */
console.log(edad.some(revisar));
// True
En otro ejemplo se evalua si existe dentro de los elementos del arreglo algún elemento mayor a 10:
function evaluar(element) {
return element > 10;
}
// Dentro del arreglo existe un número mayor a 10?
console.log( [1, 2, 3, 4, 15].some(evaluar) );
// TRUE
Para determinar si un elemento está presente en un arreglo dado:
const apellidos = ["Romero", "Ugalde", "Ramirez"];
// Función con parámetros
/* nombreArreglo recibirá el nombre del arreglo */
/* valorElemento recibirá el string a evaluar */
function buscar(nombreArreglo, valorElemento) {
/* Devuelve el nombre del arreglo pero activando
la función evaluadora some() */
return nombreArreglo.some((loquesea) =>
/* Condición: que valorElemento sea igual al
argumento string en la invocación final */
valorElemento === loquesea);
}
console.log( buscar(apellidos, "ugalde"));
/* False.
El valor existente en el arreglo
tiene la U en mayúscula */
En un ejemplo final, se busca hallar si habrá algún número que de residuo mayor a cero al dividirlo para 2:
const array = [10, 2, 3];
/* Hallar si existe residuo mayor a cero al dividir
2 con cada elemento del arreglo */
console.log(array.some(data => data % 2));
// Análisis:
// 10 / 2 = no hay residuo
// 2 / 2 = no hay residuos
// 3 / 2 = SÍ hay residuo
// El algoritmo devolverá TRUE
/* Es decir, al menos un número
dividido para 2 da un residuo mayor
a cero */
MÉTODO FIND()
Evalua la presencia del PRIMER elemento que ha cumplido una condición de coincidencia dentro de un arreglo. Si no halla la búsqueda determinada, devolverá 'undefined'. Por lo tanto, find() contiene la función anónima con la condición a evaluar.
MÉTODO STRING()
Si bien no es un método nativo del objeto Array, string() es útil para una simple conversión de elementos de arreglo a dato string, además de separarlos con coma.
En Javascript
const arr = [1, 2, 3];
const arrString = arr.toString();
/* Genera un solo string a partir
de los elementos del arreglo */
console.log(arrString);
// "1,2,3"
// - - -
const saludo = ["Holi", " amiwwis"];
const arrSaludo = saludo.toString();
/* Genera un solo string a partir
de los elementos del arreglo */
console.log(arrSaludo);
// Holi, amiwwis
En Javascript
// Se crea arreglo con objetos
const personal = [
// Propiedades y valores
{ nombre: 'Alice', edad: 27 },
// Solo obtiene el primer 'Willy'
{ nombre: 'Willy', edad: 32 },
{ nombre: 'Willy', edad: 97 },
{ nombre: 'Dave', edad: 24 },
];
/* Aloja búsqueda: alguna propiedad
'nombre' que coincida con 'Willy' */
const hallar =
personal.find((item) =>
item.nombre === 'Willy');
console.log(hallar);
// { nombre: 'Willy', edad: 32 }
En otro ejemplo:
En Javascript
// Arreglo
let ciudad = ["GYE", "Uio", "Esm"];
// Se guarda búsqueda
let buscar = ciudad.find(function(val) {
// Se determina si es minúscula o mayúscula
return val === "Gye" || val === "GYE"});
// Mostrar valor hallado
console.log(buscar);
// GYE
MÉTODO OBJECT.KEYS ()
Es una función cuyo resultado será un arreglo. No es un método dirigido a arreglos, pero es usado para retornar las propiedades de un objeto en forma strings, y agrupado en arreglo. El orden de las propiedades se regirán según el orden ya dado en el objeto.
En Javascript
// Objeto con propiedades y valores
const humano = {
nombre: 'Dudu',
edad: 41,
ciudad: 'Guayaquil'
};
// Aloja solo las propiedades del objeto
const claves = Object.keys(humano);
// Muestra
console.log(claves);
// [ 'nombre', 'edad', 'ciudad' ]
// Muestra sin los brackets
console.log(claves.join(', '));
// nombre, edad, ciudad
Así mismo, obtiene solo los índices de cada elemento de un arreglo:
En Javascript
// Arreglo
const humano = ["Hola", "Edu", "Romero"]
// Obtiene solo los índices de cada elemento
const claves = Object.keys(humano);
// Muestra
console.log(claves);
// [ '0', '1', '2' ]
MÉTODO FOREACH()
Este método permite una acción para cada elemento de un arreglo. Para Svekis y Putten[5] forEach() podría comportarse como un bucle, pero además de iterar sin interrupciones, ejecuta una alteración definida en cada elemento iterado.
En Javascript
// Arreglo
const numbers = [1, 2, 3, 4, 5];
// Se accede a forEach()
// Por cada item, mostrar item
numbers.forEach(item => {
console.log(item);
});
En otro ejemplo se accede y se muestran solo los items de las propiedades de los elementos objeto del arreglo. Recordemos que un objeto contiene datos duales de {propiedad:'valor'}. Y recordar también que un arreglo puede contener datos objetos como en el siguiente ejemplo:
En Javascript
// Arreglo con datos objetos
const banda = [
{ nombre: "Paul", edad: 30, instrumento: "bajo" },
{ nombre: "Ringo", edad: 25, instrumento: "bateria" },
{ nombre: "John", edad: 35, instrumento: "voz" }
];
// Acción para cada elemento 'a' del arreglo 'banda'
banda.forEach(a => {
// Por cada elemento de arreglo,
// se invoca a cada elemento del arreglo desde ForEach,
// y a las propiedades del objeto del arreglo.
console.log(
`${a.nombre} tiene ${a.edad} y usa ${a.instrumento}.`);
});
/*
Paul tiene 30 y usa bajo.
Ringo tiene 25 y usa bateria.
John tiene 35 y usa voz.
*/
En el ejemplo de abajo sucede algo especial: forEach() invoca como argumento a una función de retorno o 'callBack'. Y es solo esa función -y no forEach()- quién presenta dos parámetros '(elemento, indice)'. Donde 'elemento' apunta a cada elemento del arreglo procesándose, e 'índice' apunta al valor de ubicación de ese elemento.
Pero, ¿por qué forEach() llama a dos parámetros?. Es por que solo la función de retorno puede leer hasta tres parámetros en este estricto orden: el elemento de arreglo a procesar, el índice del elemento procesado y el contenido del arreglo que la función callback activa al ser llamada por forEach(). En general, los tres parámetros que podrían ser usados por el callback llamado desde forEach() son:
En Javascript
array.forEach(
elementoDelArray,
indiceDelArray,
contenidoDelArreglo){}...
CUIDADO
- forEach() no usa tres parámetros. SOLO usa uno, que es el nombre identificador de la función callback.
- Solo la función callback es la que sí puede usar hasta tres de los parámetros explicados más arriba.
Sin embargo, el segundo y el tercer parámetro son opcionales al momento de usar forEach(). Puesto que si no se necesita el índice del array o el contenido del array en la función de retorno, ambos parámetros no serán de utilidad.
Por lo tanto, cuando forEach() presente solo un parámetro, ese parámetro representará solamente el elemento -del arreglo- procesándose, y no al índice o al contenido del arreglo en sí.
En Javascript
// Arreglo
let geometricos = ["cubo", "rectangulo", "circulo"];
/* Ojo: separamos con comas y no con signo '+' */
/* Función 'mostrar' con parámetros: elemento e indice*/
function mostrar(elemento, indice){
/* Método de la función: ojo como
llama a los parámetros de 'mostrar'*/
console.log("Mostrar", elemento,
"en ubicación ", indice)
}
/* Esta invocación llama a la función 'mostrar',
que a su vez es argumento de la función forEach()*/
geometricos.forEach(mostrar);
/* ->
Mostrar cubo en ubicación 0
Mostrar rectangulo en ubicación 1
Mostrar circulo en ubicación 2
*/
Entonces, ¿cómo sería un ejemplo de la función de retorno llamada por forEach() usando los tres parámetros (elemento, indiceArreglo, arreglo)?. ChatGPT da una muestra:
En Javascript
// Array
const num = ["cero", "uno", "dos"];
/* Los tres parámetros de forEach() */
num.forEach((elemento, indice, arreglo) => {
// Ojo el uso de plantillas literales
console.log(`Elemento ${elemento} es indice ${indice}
en arreglo [${arreglo}].` + "\n");
});
/*
Elemento cero es indice 0
en arreglo [cero,uno,dos].
Elemento uno es indice 1
en arreglo [cero,uno,dos].
Elemento dos es indice 2
en arreglo [cero,uno,dos].
[Finished in 66ms]
*/
En otro ejemplo, forEach() agrega solo un valor –el del elemento del arreglo– al único parámetro de la función que mostrará las frases:
En Javascript
// Arreglo
let ideas = ["sol", "encebollado", "salsa"];
function recorre(cadaElemento){
console.log("Guayaquil es...", cadaElemento);
}
ideas.forEach(recorre);
/*
Guayaquil es... sol
Guayaquil es... encebollado
Guayaquil es... salsa
*/
DIFERENCIA ENTRE FOREACH() Y UN BUCLE
Para Svekis y Putten[5] forEach() no interrumpe la iteración –como sí lo hace un bucle como if/else cuando una condición sea 'false'–. En otras palabras, forEach() recorre y toma los valores de contenido y ubicación de al menos tres elementos -en caso de usarlos todos-: del elemento del arreglo, del índice y del contenido del arreglo. Los obtendrá sin cumplir condición alguna, como sí lo hace un bucle. En todo caso, el uso de bucles o de forEach() dependerá de las necesidades de iteración y de utilidad.
MÉTODO FILTER()
Obtiene aquellos elementos del arreglo que han aprobado una condicional. En otras palabras, filter() crea un nuevo arreglo con los elementos del arreglo que cumplen una condición dada por la función de retorno o callback.
En Javascript
let num = [10, 20, 120, 240, 380];
function recorrer(elemento){
/* Extraer solo los números mayores a 100 */
return elemento > 100;
}
/*
- Invoca función de retorno.
- recorrer() activa condición
- Solo los elementos que han pasado
la condición se obtienen
*/
console.log( num.filter(recorrer) );
//-> [ 120, 240, 380 ]
En otro ejemplo, una función 'recorrer' devolverá un elemento solo si hay igualdad. Si filter() no haya el elemento, devolverá un arreglo vacío [ ].
En Javascript
// Arreglo
let jerga = ["pana", "yuntita", "amiwi"];
/* Función con parámetros 'elemento' e 'indice' */
function recorrer(elemento, indice){
/* Condición */
return elemento == "yuntita";
}
/* Función callback 'recorrer' */
/* Guarda la iteración */
let usoFilter = jerga.filter(recorrer);
// Muestra
console.log(usoFilter);
//-> [ 'yuntita' ]
Es decir, forEach() permite devolver un nuevo arreglo conteniendo los elementos 'filtrados' obtenidos según la evaluación dada por el método. Sin embargo, el arreglo original está inalterado.
En Javascript
// Arreglo
let palab = ['panita', 'yuntita', 'hermano'];
/* Ojo como filter() contiene
como argumento una función flecha */
let filtrado = palab.filter(
/* Detectar solo las palabras que contengan las letras 'ita'*/
palab => palab.includes("ita")
);
console.log(filtrado);
//-> [ 'panita', 'yuntita' ]
// El arreglo sigue tal cual
console.log(palab);
// [ 'panita', 'yuntita', 'hermano' ]
Un peque ejemplo más: filter() activa una función de retorno con una condición que busca números pares entre los elementos de un arreglo:
En Javascript
// Arreglo
const nums = [1, 2, 3, 4, 5];
// Aloja callback
/**/
const extraerPares = nums.filter((elemento) => {
/* Condición: Si el número dividido
para 2 tiene residuo cero */
return elemento % 2 === 0;
});
console.log(extraerPares);
// [2, 4]
RECORDAR SIEMPRE:
- Es un error afirmar que métodos como forEach() o filter() pueden contener hasta tres parámetros -el elemento del arreglo, el índice y el contenido del arreglo-.
- Esos métodos pueden usar solo un parámetro. Este es, el nombre identificador de la función callback que están llamando.
- Solo la función callback o de retorno -que esos métodos invocan- es la que sí puede usar hasta tres parámetros en caso de necesitarlos. Aunque es común que solo se use el primer parámetro -el del elemento
Queda por estudiar los métodos para arreglos: reduceRight(), toLocaleString(), toString(), valueOf()
Subir al inicio Avanzar