Autor Tema: JavaScript compara palabras mayor menor orden alfabético localeCompare CU01153E# (Leído 5549 veces)

pedro,, · « **en:** 01 de Noviembre 2015, 00:36 »

Hola. Respuesta al ejercicio CU01153E del tutorial de desarrollo web con JavaScript usando Notepad++ como editor.

Citar

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.

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

Están los dos ejercicios en el mismo código.

Código: [Seleccionar]

<!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">
		<style>
			.pulsador {padding:15px; width: auto; display: inline-block; margin: 25px;
				cursor: pointer; color: yellow; border-radius: 40px; background: purple;}
		</style>
		<script type="text/javascript">
			function ejercicio1(){
				var miArrayOriginal = [33,2,36,55,4,1];
				var deMayorAMenor = [33,2,36,55,4,1];
				var deMenorAMayor = [33,2,36,55,4,1];
				deMayorAMenor = deMayorAMenor.sort(function(elem1, elem2){return elem2-elem1;});
				deMenorAMayor = deMenorAMayor.sort(function(elem1, elem2){return elem1-elem2;});
				var msg = 'El arry original contine: ' + miArrayOriginal + '\n'
				msg += 'Ordenado de mayor a menor: ' + deMayorAMenor;
				msg += '\nOrdenado de menor a mayor: ' + deMenorAMayor;
				alert(msg);
			}
			function ejercicio2(){
				var miArray = ['Moto','soto','Abaco','abeja','Sapo','nieve','Zumba','barco'];
				alert(miArray.sort(function(a, b){return a.toLowerCase().localeCompare(b.toLowerCase());}));
			}
		</script>
	</head>
	<body>
		<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
		<div class ="pulsador" onclick="ejercicio1()"> Probar Ejercicio 1 </div>
		<div class ="pulsador" onclick="ejercicio2()"> Probar Ejercicio 2 </div>
	</body>
</html>

Sobre el ejercicio 1, tengo una duda en estas dos lineas

Código: [Seleccionar]

deMayorAMenor = deMayorAMenor.sort(function(elem1, elem2){return elem2-elem1;});
deMenorAMayor = deMenorAMayor.sort(function(elem1, elem2){return elem1-elem2;});

Si cambio deMayoramenor que hay justo antes del sort y coloco miArrayOriginal quedando las lineas así:

Código: [Seleccionar]

deMayorAMenor = miArrayOriginal.sort(function(elem1, elem2){return elem2-elem1;});
deMenorAMayor = miArrayOriginal.sort(function(elem1, elem2){return elem1-elem2;});

el resultado que me da por pantalla es que deMayorAMenor, deMenorAMayor y miArrayOriginal toman el mismo valor, es decir, todos dan el contenido ordenado de menor a mayor.
¿Por qué sucede esto?

En el ejercicio 2 tuve que buscar ayuda exterior para crear la función para que que no se tuviera en cuenta si las letras estaban o no en mayúsculas o minúsculas.

Saludos.

Mario R. Rancel · « **Respuesta #1 en:** 02 de Noviembre 2015, 10:06 »

Hola Pedro en el ejercicio 1 tu código resuelve exactamente lo que se pedía.

Sobre la duda de por qué si colocar miArrayOriginal obtienes siempre la ordenación de menor a mayor, la respuesta que le daría (no lo consideres un 100% seguro) es la siguiente:

La función sort modifica el array sobre el que se aplica, de ahí que en el ejercicio se trabaje con distintas copias, de esta manera lo que se haga con cada copia no afecta a las otras.

Si escribes esto:

Código: [Seleccionar]

deMayorAMenor = miArrayOriginal.sort(function(elem1, elem2){return elem2-elem1;});
deMenorAMayor = miArrayOriginal.sort(function(elem1, elem2){return elem1-elem2;});

Estarías diciendo: deMayorAMenor contiene el array miArrayOriginal (que después de aplicar sort queda de determinada manera)

deMenorAMayor contiene el array miArrayOriginal (que después de aplicar sort queda de determinada manera)

Tanto deMayorAMenor como deMenorAMayor estarían apuntando a lo mismo: al objeto miArrayOriginal. Por eso cuando los muestras por pantalla ves lo mismo, porque están apuntando a lo mismo.

En este caso se trataría de un detalle de la función sort: no te devuelve algo nuevo, sino que modifica el array sobre el que se aplica.

Para el ejercicio 2 había distintas maneras de resolverlo, tú lo has hecho usando localeCompare() que por su definición:

The localeCompare() method compares two strings in the current locale.
The locale is based on the language settings of the browser.
The localeCompare() method returns a number indicating whether the string comes before, after or is equal as the compareString in sort order.

Tu solución funciona bien y ser capaces de resolver problemas que se nos plantean es positivo así que por mi parte lo veo bien.

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: