Un ejercicio con arrays en JavaScript

Ya hemos visto una serie de entradas que hablan sobre arrays o listas en JavaScript.

1. Arrays en JavaScript
2. Arrays multidimensionales en JavaScript
3. Manejar arrays en JavaScript
4. Buscar en arrays en JavaScript

En esta ocasión vamos a realizar un ejercicio para practicar el uso de arrays en JavaScript.

El ejercicio quiere que resolvamos los siguientes puntos.

• Pide seis números por pantalla y los meta en un array
• Mustra el array entero (todos sus elementos) en el cuerpo de la página y en la consola
• Ordena y muestra el array
• Muestra cuantos elementos tiene el array
• Búsca un valor introducido por el usuario, dica si lo encuentra y su índice

https://repl.it/@valoro/JS-ejercicio-con-arrays

• Creamos la variable global numeros como una lista. Ha de ser global para que se puede leer por todas las funciones. También creamos la variable global n que contendrá el número de elementos solicitados que es de seis.
• Invocamos la función solicita(n) que pedirá al usuario n números enteros y los añadirá a la lista numeros usando push. La función retorna numeros que al ser una variable global ya puede ser usada por todos.
• Creamos una copia de numeros llamada numerosbis. Esta copia usa slice() ya que en caso contrario la copia que pretendemos crear no sería una copia autonoma sino un alias. Estos supone que si métodos como sort o reverse afectan la lista numeros de forma irreversible tambíen afectarían a su alias. Deseamos que numerosbis sea una copia independiente y no un alias por lo que para conseguirlo hemos tenido que usar slice().
• Mostramos el número de elementos con length.
• Mostramos el array original numeros.
• Invocamos la función cuerpo() que muestra en el cuerpo de la página los valores del array uno a uno usando for(var i in numeros) para recorrer todos ellos.
• Mostramos los valores ordenados usando numeros.sort(). Esto consigue que la ordenación se haga según el código unicode, esto es, considerando los valores como cadenas alfanuméricas donde, por ejemplo, 101 precede a 2, porque en orden alfabético va antes.
• Para mostrar un orden numérico se ha de usar sort con una función de ordenación dentro de sus paréntesis. En este caso hemos incluido una función de flecha siguiendo este link de Mocilla.
• El inconveniente de usar sort es que se modifica la lista original, este es el motivo por el que se realizó una copia, manteniedo en numerosbis la lista inicial.
• Si ahora hacemos numeros.reverse() estaremos obteniendo el reverso de lo que contiene ahora la lista numeros. Esto supone que obtendremos los números ordenados en orden de mayor a menor, pero no estaremos obteniendo el reverso de la lista original.
• Para conseguir el reverso de la lista de numeros original aplicmos reverse() sobre numerosbis que es la copia que sacamos en su momento. Pero si no queremos que esta copia también quede modificada de forma permanente lo que tenemos que hacer es escribir numerosbis.slice().reverse(). Esto mismo se podría haber utilizado con sort usando numeros.slice().sort().
• Comprobamos que numerosbis no ha sido modificada y conserva los números de la lista origienal.

• Finalmente pedimos a usuario un número para ver si existe en el array que se ha formado. Esto lo hacemos invocando la función buscar() que nos pide el número buscado numbuscado y que con findIndex(función de flecha) asignan a la variable indice un booleano true o false que nos indica si se ha encontrado o no el número buscado.

 'use strict'  
 var numeros=[]; //variable global  
 var n=6; //variable global  
   
 function solicita(n){  
  for(var i=0;i<n;i++){  
   var nuevo=parseInt(prompt("Indique un número entero: "));  
   numeros.push(nuevo);  
  }  
  return numeros;  
 }  
   
 function cuerpo(){  
  var texto="<h3>Elementos del array</h3>"  
  for(var i in numeros){texto+=numeros[i]+"<br>"}  
  document.write(texto);  
 }  
   
 function buscar(){  
 var numbuscado=parseInt(prompt("¿Qué número desea buscar?: "));  
 var indice=numerosbis.findIndex(item => item==numbuscado);  
 if(indice==-1){  
  var mensaje="Número "+numbuscado+" no encontrado";  
 }else{  
  var mensaje="Número "+numbuscado+" encontrado en la posición: "+indice;  
 }  
 console.log(mensaje);  
 }  
   
 solicita(n); //construimos el array  
 const numerosbis=numeros.slice(); //copia la lista para tener un duplicado  
 console.log("Número de elementos: ",numeros.length); //número de elementos  
 console.log("Valores iniciales: ",numeros); //se mustra en consola el array original  
 cuerpo(); //mostramos el array en página web, uno a uno  
 console.log("Ordenados unicode: ",numeros.sort()); //array ordenado  
 console.log("Ordenando numeros: ",numeros.sort((a,b)=>a-b)); //numeros ordenados  
 console.log("En orden inverso: ",numeros.reverse()); //lo muestra en orden inverso  
 console.log("Reverse original: ",numerosbis.slice().reverse());  
 console.log("Valores iniciales: ",numerosbis); //aún tenemos los números iniciales  
 buscar();  

Podemos establecer un código alternativo para la función cuerpo() que usaría numeros.forEach(función de flecha).

 function cuerpo(){  
  var texto="<h3>Elementos del array</h3>"  
  numeros.forEach(item => {texto+=numeros[item]+"<br>"});  
  document.write(texto);  
 }