Nov 28 2022

duduromeroa.com

Javascript

Programación para web (4.1/8): Métodos, métodos de arreglos


George Póyla, matemático. Resolver problemas de diseño. www.duduromeroa.com

Por Eduardo J. Romero Andrade
| Guayaquil

Twitter   JS para Guayacxs   duduromeroa@gmail.com




EL LENGUAJE CREA ACCIÓN MEDIANTE MÉTODOS

En la vida real, las acciones –nuestras, o de otros– alteran el entorno. Por ejemplo, una lluvia imprevista puede alterar las propiedades de una camisa bien planchada. Así mismo, en lenguajes de programación con orientación a objetos toda acción que altere datos es un método. Ya se explicó aquí porqué JS no está absolutamente orientado a objetos. Y veremos porqué un método es más predecible y menos imprevisto que una lluvia de invierno guayaco.

Para Antani y Stefanov[4], si un lenguaje de programación es un idioma, los métodos serían sus verbos; esto es, toda aquella acción que altere los valores de las propiedades de algo. Tomando el ejemplo de la camisa empapada por una imprevista lluvia guayaca, la propiedad de 'textura' se vería alterada en su valor: pasaría de 'planchada' a 'arrugada' o 'mojada'.

En las siguientes secciones se detallarán los métodos incorporados para alterar datos alfanuméricos o numéricos –caracteres y texto vario– en arreglos y objetos. En JS los métodos se agrupan en:

MÉTODOS DE ARREGLOS
MÉTODO POP()

Remueve el ÚLTIMO elemento de un arreglo, devolviéndolo. Además, altera la cantidad de elementos dentro del arreglo.

// 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


MÉTODO SHIFT()

Remueve el PRIMER elemento de un arreglo, devolviéndolo. Además, altera la cantidad de elementos dentro del arreglo.

// Remover el último elemento con pop()
var menu = [
// Indice 0
"Ceviche", 
// Indice 1
"guatita" 
];

/* Remueve el PRIMER elemento
y lo muestra */
console.log(menu.shift());
// Ceviche

/* Al ser removido el PRIMER elemento, 
el segundo elemento pasa a ser el primero */
console.log(menu[0]);
// guatita

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):

 // 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);
// Arreglo vacio

Otro ejemplo de mdn web docs_ es:

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);

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_).

// 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()

Para mdn web docs_ include() identifica si el elemento de un valor esta dentro de un arreglo (retorna true); o si no está (retorna false).

const autores = [
"Bruno", 
"Ricardo", 
"Dudú", 
"Miguel"];
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 la mía, yo soy el único con el nombre de Eduardo; pero hay dos José y un Adrián.

En JS, la presencia de una característica o elemento en una o más veces se conoce con el anglicismo de ocurrence. En cambio, en español el término de ocurrencia denota una idea repentina, un concepto muy diferente a ocurrence.

Es así que el método indexOf()ubica el valor índice de un elemento presente y/o que se repite dentro de un arreglo:

let nombres = ["Edu", "José", "José", "Adrian" ];

// Ubicar índice de 'José'
console.log(nombres.indexOf("José"));
/* El elemento 'José' está ubicado 
por primera vez en el índice uno */
// --> 1

En otro ejemplo (abajo) el argumento ingresado es la palabra que se debe hallar. En el segundo ejemplo, se busca una palabra pero a partir de un índice dado, y de allí en delante. indexOf() retornará únicamente el índice en donde esté ubicado el elemento a buscar:

 // **EJEMPLO UNO**
let cosas = ["rojo", "verde", "azul"];
// Ubicar índice de 'verde'
console.log(cosas.indexOf("verde"));
// --> 1

// **EJEMPLO DOS**
let himno = ["Salve", "oh", "patria", "mil", "veces"];
/* Guardar búsqueda. Buscar string 'mil' desde el índice 1 */
var buscar = himno.indexOf("mil", 1);
// índice = 3
console.log(buscar);
// Elemento de ese índice = 'mil'
console.log( himno[buscar] );


Para mdn web docs_ indexOf() compara el valor pedido desde argumento con otro dentro de un arreglo mediante igualdad estricta '==='. Si lo halla, retorna –obtiene y muestra– ubicación numérica del primer elemento hallado. Si no lo ubica, retorna -1. indexOf() 'rastrea' dentro del arreglo el valor a buscar desde la izquierda a la derecha (desde el inicio del arreglo hacia el final).

// Recordar ubicación de elementos de arreglo
// --> Inicia desde cero
const letras = ["aaa", "bbb", "ccc", "ccc"];

// Retorna primera ubicación de 'ccc'
console.log(letras.indexOf("ccc"));
// --> 2

// ¿Existe un elemento 'aaa' en la ubicación cero?
console.log(letras.indexOf("aaa", 0));
// Devuelve ubicación del elemento hallado
// ** OJO DEVUELVE UBICACIÓN ** --> 0

// No halla 'yyy' en la ubicación cinco
console.log(letras.indexOf("yyy", 5));
// --> -1

// Si halla 'aaa'...
if ( letras.indexOf("aaa") >= 0 ) 
console.log("Elemento hallado"); 
if ( letras.indexOf("aaa") < 0 ) 
console.log("** NO hallado **"); 
/* La condicional debe evaluar 
mayor o igual a cero para 
determinar si el elemento 
fue hallado */

/* La condicional debe evaluar 
menor a cero cuando el elemento
no sea ubicado */

MÉTODO LASTINDEXof()

Este método tiene una ligera diferencia con indexOf(): 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.

// Arreglo con siete índices
// Índices-->| 0| 1| 2| 3| 4|  5|   6|   7| 
var indices = [0, 0, 0, 0, 0, 'A', 'A', 'A'];
var idx = indices.lastIndexOf("A");

// Retorna la última ubicación del elemento "A"
console.log("La última ubicación del elemento A es el índice: ", idx);
// --> El elemento A está en el índice:  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()

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.

 // 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);
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.

MÉTODO SLICE()

Este método de arreglo 'corta' desde un inicio hacia un final una porción de valores dentro de un arreglo. Se resalta que slice() no altera la longitud del arreglo.

//                 Extraer
//            |–––––––––––––––|
const cosas = ['cosa0', 'cosa1', 'cosa2'];
// Extraer desde la pos. 0 hasta la 1
const extraer = cosas.slice(0, 1);
console.log(extraer);
// [ 'cosa0' ]

Según el ejemplo de arriba, ¿Por qué no se extrae también el valor 'cosa1', si pedimos cortar desde 0 hasta 1?. Debemos recordar que la ubicación de los valores dentro de un arreglo se cuentan desde 0 en adelante.

CONTAR VS UBICAR

En programación hay mucha diferencia entre contar y ubicar los elementos de un arreglo. Es decir, se cuentan los elementos desde el número uno en adelante, pero se ubican los elementos desde el cero en adelante.



Si tenemos un arreglo de tres elementos -cantidad–, 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. Es decir, para cada elemento de un arreglo contado desde el uno en adelante, siempre tendrá un índice iniciado desde cero.

  • [ 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.

var arreglo = [0,1,2,3];

// Cortar desde el índice 1 en adelante
console.log(arreglo.slice(1));
// --> [ 1, 2, 3 ]

En otras palabras, si JS cuenta los elementos de un arreglo desde el número 1, pero los ubica desde el número cero; entonces slice() tomará en cuenta la ubicación para seleccionar de 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.

// 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 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.

// ** 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ú' ]

// ** 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() 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.

// Dos argumentos
function remover(array, indice) {

/* Devuelve el primer argumento: el array */
/* 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()

// Alimenta los dos argumentos con valores 
// + El primer argumento: un array
// * El segundo: el número 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.

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ú' ]

Para insertar nuevos elementos con splice() desde dos parámetros: el primer parámetro indica el índice de la posición de inicio; el segundo parámetro es la cantidad de elementos a borrar desde el índice de inicio ya dado. Los parámetros después de los dos argumentos son los elementos a insertar (ejemplo abajo).

 // 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);
/* 
--> [ 'Guayaquil', 'de', 'mis', 'amores' ]
*/

MÉTODO FILL()

Al igual que splice(), altera el arreglo referenciado, rellenándolo según parámetros ingresados.

/*  Se crea 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) );

MÉTODO COPYWITHIN()

Altera el orden pero no el contenido de un arreglo referenciado: primero determinando en qué índice de ubicación de un elemento se agregarán los nuevos elementos en reemplazo de los que ya estaban; y luego, determinando qué elementos del arreglo se tomarán según los índices dados en los parámetros del método. El ejemplo de abajo iniciará desde el siguiente listado de índices y elementos de arreglo:

  • Indices:
  • 0 | 1 | 2 | 3 | 4    | 5    |
  • Elementos:
  • a | b | x | y | casa | gato |
  • El ejemplo de abajo pide que desde el índice cero se copien los elementos desde el índice tres hasta el cuatro.
// Orden inicial del arreglo 
var arreglo = ['a','b','x','y','casa','gato'];
console.log("El orden inicial fue " + arreglo);
/* 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));
// [ 'X', 'Y', 'casa', 'casa', 'gato' ]

En otros ejemplos:

// Arreglo
var arregloFrase = ['Eres', 'perla', 'que', 'surgiste', 'del más grande...'];

/* En el índice cero, COPIAR allí 
todo lo que se halle entre los índices 3 a 4 */
var cambioA =  arregloFrase.copyWithin(0, 3, 4);
console.log(cambioA);
// [ 'surgiste', 'perla', 'que', 'surgiste', 'del más grande...' ]
// El arreglo 'arregloFrase' ha sido alterado 

// + + + 

/* En el último índice cero, COPIAR todo lo que 
se halle entre los índices 2 a 3 */
var cambioB =  arregloFrase.copyWithin(-1, 2, 3);
console.log(cambioB);
// [ 'surgiste', 'perla', 'que', 'surgiste', 'que' ]

// + + + 
/* Copiar los dos primeros elementos 
de la matriz en los dos últimos 
elementos de la matriz: */

const letrasA = ["A", "B", "C", "D"];
let mostrarA = letrasA.copyWithin(2, 0);
console.log(mostrarA);
//-> [ 'A', 'B', 'A', 'B' ]

/* Copie los dos primeros elementos 
de la matriz en la tercera y cuarta posición: */
const letrasB = ["A", "B", "C", "D", "D", "E"];
let mostrarB = letrasA.copyWithin(2, 0, 2);
console.log(mostrarB);
//-> [ 'A', 'B', 'A', 'B' ]

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.

MÉTODO JOIN()

Junta los elementos de un arreglo con un separador alfanumérico dado en parámetro. La longitud del arreglo (arreglo.length) no es alterada.

// 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());

// Unir sin ningún elemento
console.log(elements.join(''));

// Unir con guión
console.log(elements.join(' ** '));

// Unir con comas
console.log(elements.join(', '));

/* 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 –y muestra, si la invocación lo pide– el valor 'true' en todos los elementos de un arreglo según una condición pedida que esté dentro de una función. Nuevamente, un método como every() recorrerá todos los elementos para evaluar lo que el método designe:

 // 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 de los elementos de un arreglo pasa una condición dada en una función callback. No altera el arreglo inicial y no evalúa elementos sin valor. some()siempre requerirá 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.

// 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 de un elemento dentro de un arreglo. Si no halla la búsqueda determinada, devolverá 'undefined'. find() acompaña a una función anónima con un argumento que compara el valor a buscar.

// 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 FOREACH()

Este método de arreglo de datos permite una acción para cada elemento de un arreglo. Para Svekis y Putten[5] forEach() podría comportarse como un bucle, pero este método además de iterar sin interrupciones, permite acción sobre el elemento iterado.

En el ejemplo de abajo, ¿Quién da valor a los parámetros de la función mostrar?: R: El recorrido –de cada elemento– que hace forEach(). Este inserta en los parámetros de la función 'mostrar' los dos valores tradicionales de un elemento de arreglo: el elemento en sí y el índice.

// 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
*/

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:

// 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
*/

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 un elemento de arreglo, sin cumplir condición alguna.

MÉTODO FILTER()

Este método lee una función como su argumento –y ejecuta esa función– cuando un elemento requerido por alguna condicional es detectado dentro del arreglo.

let num = [10, 20, 120, 240, 380];

function recorrer(elemento){
/* Extraer solo los números mayores a 100 */
return elemento > 100;
}

/* Invocar al arreglo, a filter() y a la 
función 'recorrer' como argumento de filter() */
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.

 // Arreglo
let jerga = ["pana", "yuntita", "amiwi"];

/* Función con parámetros */
function recorrer(elemento, indice){
/* Si haya un elemento igual a "..." devolver y detener iteración */
return elemento == "yuntita";
}

/* La función 'recorrer' es argumento de filter() */
/* Variable guarda la iteración mediante filter() */
let usoFilter = jerga.filter(recorrer);
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.

// 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' ]

Subir al inicio Seguir a la parte quinta



BIBLIOGRAFÍA:
    3ra edición. 2018. Marijn Haverbeke. No starch press.
    Mozilla Foundation.
    David Flanagan (2020). Editorial O'Reilly.
    Ved Antani, Stoyan Stefanov (2017). Packt Publishing.
    Editorial Packt.
    Information and Computation. Elsevier.
    ACM SIGCSE BulletinVolume 19Issue 1Feb. 1987 pp 98–102https://doi.org/10.1145/31726.31742.