Foto de Caspar Camille Rubin en Unsplash
En este artículo hablaremos de:
- join()
- split()
- sort()
¿Por qué todos los desarrolladores JavaScript deberían conocer estos métodos? Los arrays son elementos muy importantes que necesitarás en tú código. Estos métodos te ayudarán a que tu código sea más elegante.
Puedes hacer que tus aplicaciones se ejecuten sin estos métodos, pero para ellos tendrás que escribir líneas de código innecesarias, sin ninguna utilidad.
Así pues, empecemos. Primero veremos algunos métodos básicos como join() y split(), y después pasaremos a sort().
1. join()
Imagina un escenario en el que los usuarios introducen valores en un array y después queremos verlo como un mensaje (string).
Aquí es donde interviene join(), convierte los elementos de un array en un string.
La sintaxis es muy sencilla, tan sólo tienes que usar:
array.join(separador)Aquí, el separador es un argumento opcional, que define como queremos que los elementos del array estén separados. Puede ser una coma, un espacio, un punto, una palabra,…
Veámoslo en acción:
const array1=[1,2,3,'My','Name','is','Ney']
const string1=array1.join()
const string2=array1.join('')
const string3=array1.join(',')
const string4=array1.join('and')
const string5=array1.join('-')
const string6=array1.join('=')
const string7=array1.join(':')
const string8=array1.join(' ')
console.log(array1)
// [ 1, 2, 3, 'My', 'Name', 'is', 'Ney' ]
console.log(string1)
// 1,2,3,My,Name,is,Ney
console.log(string2)
//123MyNameisNey
console.log(string3)
// 1,2,3,My,Name,is,Ney
console.log(string4)
// 1and2and3andMyandNameandisandNey
console.log(string5)
// 1-2-3-My-Name-is-Ney
console.log(string6)
// 1=2=3=My=Name=is=Ney
console.log(string7)
// 1:2:3:My:Name:is:Ney
console.log(string8)
// 1 2 3 My Name is NeyAquí tenemos unos ejemplos. Los más importante son el string8 y string2.
En string2, no hay nada entre las comillas, mientras que en el string8 hay un espacio.
Puedes poner tantos espacios como quieras entre ellos y el resultado cambiará de acuerdo a ello.
2. split()
Así pues, hemos visto que podemos convertir los elementos de un array en strings.
¿Y convertir una cadena en elementos de un array? Eso es lo que hace el método split().
split() puede ser muy útil en situaciones en las que tienes que tomar un mensaje de entrada y ver si contiene o no una palabra específica. Puedes hacerlo fácilmente convirtiéndola en un array y usar el método includes(). Pronto hablaremos de eso.
También puedes usar muchas otras funciones una vez que has convertido el string a un array. Técnicamente, split() es un método de string, pero lo discutiremos aquí.
Primero, veamos us sintaxis:
string.split(separador, limite)
- Separador especifica el carácter o palabras usadas para separar el string. Si se deja en blanco, entonces el string entero se convertirá en el único elementos del array.
- Límite es un argumento opcional que se usa con poca frecuencia. Es un entero que especifica el número de separaciones. Los elementos posteriores al límite no se incluirán en el array.
Veamos algunos ejemplos:
Usaré los ejemplos del método join() anterior e intentaré convertirlos en un string con split().
const string1 = `1,2,3,My,Name,is,Ney`
const array1 = string1.split(',')
const arrayConLimite = string1.split(',', 4)
const arraySinSeparador = string1.split()
console.log(array1, arrayConLimite, arraySinSeparador)
//[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ] [ '1', '2', '3', 'My' ] [ '1,2,3,My,Name,is,Ney' ]
const string2 = `123MyNameisNey`
const array2 = string2.split('')
console.log(array2)
//[ '1', ',', '2', ',', '3', ',', 'M', 'y', ',', 'N', 'a', 'm', 'e', ',', 'i', 's', ',', 'N', 'e', 'y' ]
const string3 = `1,2,3,My,Name,is,Ney`
const array3 = string3.split(',')
console.log(array3) //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
const string4 = `1and2and3andMyandNameandisandNey`
const array4 = string4.split('and')
console.log(array4) //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
const string5 = `1-2-3-My-Name-is-Ney`
const array5 = string5.split('-')
console.log(array5) //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
const string6 = `1=2=3=My=Name=is=Ney`
const array6 = string.split('=')
console.log(array6) //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
const string7 = `1:2:3:My:Name:is:Ney`
const array7 = string7.split(':')
console.log(array7) //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
const string8 = `1 2 3 My Name is Ney`
const array8 = string8.split(' ')
console.log(array8) //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]Ahora, veamos el ejemplo anterior uno a uno.
- array1, string1: separar en un array donde encuentra la coma.
- arrayConLimite: he especificado un límite, así que el array resultante tiene sólo cuatro elementos, que era el límite.
- arraySinSeparador: lo hemos comentado, si no hay separado el string entero se convierte en el único elemento de un array.
- array2: como el parámetro está vacío, split() ha separado cada carácter, incluyendo espacios, comas y cualquier otro carácter que exista.
- array4: verás que faltan todos los ‘and’ del string, y el resto pasan a ser elementos del array. Si hubiera una sola letra en el parámetro, el resultado serían elementos sin esa letra. Pruébalo tú mismo. Así, debemos tener cuidado al usar palabras como separadores.
- array3, array5, array, array7, array8: obtenemos el mismo string como resultado, después de separarlos, lo cual es correcto ya que tan sólo deshacemos lo que join() había hecho.
Práctica: crear una función con join(), split() y reverse()
Podemos practicar creando una función con join(), split() y reverse() para comprobar si la entrada del usuario es un palíndromo.
Si no conoces el método reverse(), tan sólo invierte los elementos de un array.
Aquí tenemos un ejemplo:
const num = [1,2,3,4,5,6]
const reverseNum = num.reverse()
console.log(reverseNum) //[ 6, 5, 4, 3, 2, 1 ]Con esto finalizamos nuestro método split(). Intenta resolver la práctica y comparte el repositorio de GitHub con tu código en los comentarios.
3. sort()
Como su nombre en inglés sugiere, sort() ordena los elementos de un array .
Por defecto, sort() ordena los valores como strings.
let greekLetter = ['beta','alpha','delta','gamma'];
console.log(greekLetter.sort()) // [ 'alpha', 'beta', 'delta', 'gamma' ] De este modo, tenemos un problema al ordenar números.
Porque si ordenamos, por ejemplo, 100 y 25, 100 aparecerá antes que 25, ya que el 1 de 100 es menor que el 2 de 25.
let num1 = [25, 100, 23]
console.log(num1.sort()) //[ 100, 23, 25 ]
let num2 = ['25', '100', '23']
console.log(num2.sort()) //[ '100', '23', '25' ] Esto se puede solucionar usando la función de comparación, donde se pasa una función con la sintaxis:
let num = [25, 100, 23]
console.log(num.sort((a, b) => {
return a - b
}))
//[ 23, 25, 100 ]He utilizado una función flecha (=>) en lugar de la típica declaración de función.
Entendamos esta función de comparación. Debería devolver una valor negativo, positivo o cero, dependiendo de los argumentos – sí a es mayor que b.
Cuando la función sort() compara estos dos valores, los envía a la función de comparación y ordena los valores dependiendo del resultado devuelto (positivo, negativo o cero.)
- Si el resultado es negativo, a se coloca antes que b.
- Si el resultado es positivo, b se coloca antes que a.
- Si el resultado es 0, no se cambia la posición de ninguno de los dos valores.
- La función de comparación compara todos los valores del array, y sólo dos cada vez (a, b)
- Cuando compara 25 y 100, el método sort() llama a la función de comparación (25, 100).
- La función calcula 25-100 (a, b) y el resultado es negativo (-75), la función ordenará 25 como un valor menor que 100.
Conclusión
Esto nos lleva al final de este artículo.
Hemos cubierto con éxito join(), split() y sort().
En mi próximo artículo hablaremos de las funciones map() y filter() y por qué son importantes para un programador.
¡Gracias por tu tiempo!
Puedes leer el artículo original en https://medium.com/better-programming/3-must-know-javascript-array-methods-88c764dff034