Funciones predefinidas JavaScript para arrays. APRENDERAPROGRAMAR.COM FUNCIONES ARRAYS JAVASCRIPT. PUSH, SORT (ORDENAR NÚMEROS), CONCAT, JOIN, POP, SHIFT, SLICE, SPLICE. (CU01153E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript desde cero Fecha revisión: 2029 Resumen: Entrega nº53 del Tutorial básico “JavaScript desde cero”. © aprenderaprogramar.com, 2006-2029 Autor: César Krall Funciones predefinidas p JavaScript para arrays. a FUNCIONES PREDEFIN NIDAS PARA A ARRAYS (AR RREGLOS) JavaScriptt proporcion na una seriee de funciones predefinidas para el manejo d de arrays. Entre E ellas podemos citar concaat, join, splitt, pop, push h, shift, unsshift, reversee. Vamos a estudiarlas. Recordar también que q para con nocer el núm mero de elem mentos en un array bastta con invocaar la propied dad length del array escribiendo nombreArraay.length blas se resumen funciones que pueden ser úttiles para trrabajar con arrays en En las sigguientes tab JavaScriptt. Algunas dee ellas ya fueeron nombradas cuando hablamos dee funciones p para cadenas de texto, ya que JavvaScript asem meja las cadeenas de texto como arrays de caracteres. Supondreemos que A1, A2, A3, A4 y A5 son arrays JavaScrip pt. ÑADIR ELEMEENTOS O CO ONCATENAR ARRAYS FUNCIONES PARA AÑ FUNCIÓ ÓN concat(it1,, … , itN) it2, UTTILIDAD EJEMPLO OS aprenderraprogramarr.com Devu uelve la conccatenación dee it1, it2, …, itN i con el array sobre el e que se invo oca. It1, it2, …, … itN pueden ser tipos prim mitivos u objettos. var v A3 = A1.co oncat(5, 9); Añad de x al final del array com mo nuevo (o nuevos) n elem mento, y devvuelve la nuevva longitud deel array. A1.push(55, A 66 6); Añad de x al principio del arrray como nuevvo (o nuevos) elementos. A1.unshift([77 A , 88, 99]); splice (in nd, 0, it1, it2, … , itN) difica el array añadieendo los Mod elem mentos it1, it2, i …, itN, que son insertados en la posiciión ind (dessplazando a lo os existentes). A1.splice(3, A 0, 'xxx', 'yyy'); splice (ind, cuant, it1, it2, … , itN) Mod difica el array eliminand do cuant elem mentos e inseertando it1, itt2, …, itN, desd de el índice ind. ejemplo.splice e e(3, 2, 'es', 'un n', 'en'); push(x) unshift(x) © aprenderraprogramar.co om, 2006-2029 var v A4 = A1.co oncat(A2); var v A5 = A1.co oncat([-4, 22, 1 11]); //Añade 55 y 66 6 al final //Ahora A1 tieene 3 elementtos más, al principio //Inserta xxx en posición 3, yyy en po osición 4 y desplaza d a los elementos exxistentes antes. //Se borran do os elementos y se insertan tres, con lo que q la longitud d del array es 1 más de la anterior. Funciones predefinidas JavaScript para arrays. FUNCIONES PARA EXTRAER ELEMENTOS O PARTES DE UN ARRAY CON ELIMINACIÓN FUNCIÓN pop() UTILIDAD EJEMPLOS aprenderaprogramar.com Elimina el último elemento del array y lo devuelve. var ultimoElemento = A1.pop(); Elimina el primer elemento del array y lo devuelve. var primerElemento = A1.shift(); (ind, Modifica el array borrando cuant elementos a partir del índice ind. A1.splice(3, 2); splice (ind, cuant, it1, it2, … , itN) Modifica el array eliminando cuant elementos e insertando it1, it2, …, itN, desde el índice ind. ejemplo.splice(3, 2, 'es', 'un', 'en'); delete A[ind] Elimina el elemento con índice ind del array A. El contenido a[ind] pasa a ser undefined. delete A[7]; shift() splice cuant) //Ahora A1 tiene 1 elemento menos //Ahora A1 tiene 1 elemento menos //Se borran dos elementos y se insertan tres, con lo que la longitud del array es 1 más de la anterior. //Ahora A[7] contiene undefined FUNCIONES PARA EXTRAER PARTES O ELEMENTOS DE UN ARRAY SIN ALTERARLO FUNCIÓN UTILIDAD EJEMPLOS aprenderaprogramar.com slice (firstIn, lastOut) Devuelve un array con los elementos extraídos entre los índices firstIn y lastOut-1. Es decir, el elemento en la posición firstIn se incluye y el elemento en la posición lastOut se excluye. var result = [1, 2, 3, 4, 5].slice(1,4); slice (firstIn) Devuelve un array con los elementos extraídos entre el índice firstIn y el último elemento. Si se indica un valor negativo, se extrae un array con los firstIn últimos elementos. var result = [1, 2, 3, 4, 5].slice(-2) //result contiene [2, 3, 4] //result contiene [4, 5] FUNCIONES PARA RECUPERAR ÍNDICES DE POSICIONES FUNCIÓN UTILIDAD EJEMPLOS aprenderaprogramar.com indexOf(x) Busca x dentro del array y devuelve la posición de la primera ocurrencia. var result = A1.indexOf(14); lastIndexOf() Busca x dentro del array empezando por el final y devuelve la posición de primera ocurrencia. var result = A1.lastIndexOf(14); © aprenderaprogramar.com, 2006-2029 Funciones predefinidas JavaScript para arrays. FUNCIONES PARA TRANSFORMAR ARRAYS EN STRINGS O TIPOS PRIMITIVOS FUNCIÓN UTILIDAD join(separador) Une los elementos de un array en una cadena de texto donde cada elemento está separado por ‘separador’. var frase = ['quiero', 'aprender'].join(' '); Une los elementos de un array en una cadena de texto donde cada elemento está separado por una coma. var frase = ['quiero', 'aprender'].toString(); Este método devuelve la representación como tipo primitivo de un objeto. En el caso de un array, hace lo mismo que el método toString(). alert (A1.valueOf()); toString() valueOf() EJEMPLOS aprenderaprogramar.com //frase es tipo String y contiene ‘quiero aprender’ //frase es tipo String y contiene ‘quiero,aprender’ //Mismo resultado que alert(A1); FUNCIONES QUE PERMITEN ORDENAR O REORDENAR ARRAYS FUNCIÓN reverse() sort() UTILIDAD EJEMPLOS aprenderaprogramar.com Invierte el orden de los elementos en el array (el final pasa a ser el principio). A1.reverse(); Si no recibe parámetros, ordena los elementos del array por orden alfabético (que no coincide con el numérico), quedando el array modificado. Comentaremos esta función con más detenimiento. var result = [2, 11, 111, 7].sort(); //Los elementos quedan ordenados al revés //result vale [11, 111, 2, 7] porque el orden es alfabético, no numérico. LA FUNCIÓN SORT JAVASCRIPT. CÓMO ORDENAR NUMÉRICAMENTE Hemos visto que [2, 11, 111, 7].sort() devuelve [11, 111, 2, 7] porque el array se ordena por orden alfabético y alfabéticamente cualquier número que contenga un 1 inicial se coloca antes que cualquier número que contenga un 2 inicial, independientemente de cuál de los dos números es mayor o menor. Si el array contiene elementos undefined, estos se colocan al final del array. Nos planteamos ahora, ¿cómo ordenar números de menor a mayor (o de mayor a menor)? Para que la función sort ordene de forma distinta a la predeterminada se le debe pasar como parámetro una función de comparación. Por ejemplo: © aprenderaprogramar.com, 2006-2029 Funciones predefinidas JavaScript para arrays. [3, 5, 1, 7, 4].sort (funcionDeComparacion); Donde funcionDeComparacion debe ser una función que reciba como parámetros dos elementos del tipo con el que trabaja el array y devuelva un número negativo si el primer elemento debe ordenarse antes que el segundo, cero si ambos elementos tienen igual orden, o un número positivo si el segundo elemento debe ordenarse antes que el primero. Definir una función de comparación que permita ordenar un array numérico de menor a mayor es sencillo: function funcionDeComparacion (elem1, elem2) { return elem1 – elem2; } Esta función devuelve un número positivo si elem1 es mayor que elem2, con lo cual elem1 se colocará detrás. Si escribimos return elem2 – elem1 se ordenará de mayor a menor. Escribe el siguiente código y comprueba los resultados. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8"> <script type="text/javascript"> function ejemplo() { var miArrayOriginal = [1, 4, 2, 9, 11, 44, 111, 7, 4]; var miArray = [1, 4, 2, 9, 11, 44, 111, 7, 4]; var msg ='El array original es: ' + miArrayOriginal +'\n'; msg = msg + 'Ordenado de mayor a menor es ' + miArray.sort(deMayorAMenor)+'\n'; msg = msg + 'Ordenado de menor a mayor es ' + miArray.sort(deMenorAMayor)+'\n'; alert(msg); } function deMenorAMayor(elem1, elem2) {return elem1-elem2;} function deMayorAMenor(elem1, elem2) {return elem2-elem1;} </script> </head> <body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div> <div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div> </body> </html> El resultado esperado es: El array original es: 1,4,2,9,11,44,111,7,4 Ordenado de mayor a menor es 111,44,11,9,7,4,4,2,1 Ordenado de menor a mayor es 1,2,4,4,7,9,11,44,111 © aprenderaprogramar.com, 2006-2029 Funciones predefinidas JavaScript para arrays. EJERCICIO 1 Crea un script donde a partir del array [33, 2, 36, 55, 4, 1] se realicen los siguientes procesos: a) Mostrar el array ordenado de menor a mayor y de mayor a menor usando la función sort y definiendo la función de ordenación de forma anónima, es decir, deberás invocar X.sort(function (…) { … } ) definiendo la función de forma anónima en vez de cómo función con nombre. b) Crea una variable de nombre deMenorAMayor que contenga el resultado de ordenar de menor a mayor los elementos del array. c) Crea una variable de nombre deMayorAMenor que contenga el resultado de ordenar de mayor a menor los elementos del array. d) Muestra por pantalla el array original, la variable deMenorAMayor y la variable deMayorAMenor. Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com. EJERCICIO 2 Crea un script donde sea posible ordenar palabras por orden alfabético sin tener en cuenta la existencia de mayúsculas o minúsculas. Por ejemplo, declarar var miArray=['Moto', 'soto', 'Abaco', 'abeja', 'Sapo', 'nieve', 'Zumba, 'barco'] y tras ordenar obtener =[ 'Abaco', 'abeja', 'barco', 'Moto', 'nieve', 'Sapo', 'soto', 'Zumba]. Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com. Próxima entrega: CU01154E Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206 © aprenderaprogramar.com, 2006-2029