El método join une los elementos del array, mediante una separación, y retorna un string. Si un elemento es undefined o null, se convierte en una cadena vacía.
Este procedimiento recibe un argumento:
La separación de cada elemento del array al unirlos.
array.join(separación)
Diferencia entre la estructura for y el método join
Los métodos de arrays nos permiten realizar algoritmos con una menor cantidad de líneas que una estructura for, con un resultado igual o parecido.
Si utilizamos la estructura for para recrear el método join, necesitaremos una variable con el valor acumuladora con un string vacío y otra con el valor del separador. Se debe evaluar si existe elementos null o undefined, se lo puede realizar con el operador nullish coalescing.
const elements =["hola",null,"como","estas"]let acumulator =""const separator ="/"for(let i =0; i<elements.length; i++){const element = elements[i]??""if(i !== elements.length-1){ acumulator += element + separator
}else{ acumulator += element
}}console.log(acumulator)// 'hola//como/estas'
Con el método join solamente debemos establecer el separador de cada elemento como argumento.
const elements =["hola",null,"como","estas"]const resultado = elements.join("/")console.log(resultado)// 'hola//como/estas'
Método split de strings
El método split de strings, es lo contrario que el método join, consiste en separar un string en substrings, indicando un valor a separar. Este método retornará un array de los elementos separados.
Este método recibe dos argumentos:
El separador que especifica el conjunto de caracteres a separar en substrings.
El límite de elementos separados a retornar.
const cadena ="JavaScript es maravilloso, con JavaScript puedo crear el futuro de la web."cadena.split(" ")/* [ 'JavaScript', 'es', 'maravilloso,', 'con', 'JavaScript', 'puedo', 'crear', 'el', 'futuro', 'de', 'la', 'web.' ]
*/cadena.split(", ")/* [
'JavaScript es maravilloso',
'con JavaScript puedo crear el futuro de la web.'
]*/cadena.split("JavaScript")/* [
'',
' es maravilloso, con ',
' puedo crear el futuro de la web.'
]*/cadena.split(" ",3)// [ 'JavaScript', 'es', 'maravilloso,' ]
Contribución creada por: Andrés Guano.
Unificación y separación de arrays con join y split en JavaScript
Hola, el item[i] hace referencia a la posición i del array de items.
Como es un for, i empieza en 0, entonces es como si const el = items[0], pero para hacerlo dinámico usas el iterador (i) para que en cada ciclo acceda al siguiente elemento
Otro ejemplo muy común del método join en el ejercicio del palíndromo (Básicamente una palabra que se escribe igual de derecha a izquierda y viceversa
const word ='Arepera'constpalindrome=(word)=>{// Lo que hace dividir, voltear y luego unirlo con el join...return word.split('').reverse().join('').toLocaleLowerCase()};console.log(palindrome(word))
Para quitar la tilde, por ejemplo, dejo esta función bastante sencilla e interesante que he encontrado en stackoverflow.
constremoveAccents=(str)=> str.normalize('NFD').replace(/[\u0300-\u036f]/g,'');const title =removeAccents('Curso de Manipulación de Arrays');const urlFinal = title.split(' ').join('-').toLocaleLowerCase();console.log('urlFinal', urlFinal);
for(let index =0; index < elements.length; index++){const element = elements[index];if(index ===(elements.length-1)){ rtaFinal = rtaFinal + element
}else{ rtaFinal = rtaFinal + element + separator;}}
Para solucionar el doble guíon al final simplemente añadí el primer elemento sin el separador y en el ciclo primero se añade el separador y después el elemento.
De esta manera evitamos condicionales dentro del ciclo que a la larga podrían alentar la ejecución de nuestro programa.
Si le añadimos el resto de la URL si sería un metodo muy funcional. :)
const title ='Curso de manipulación de arrays';const finalUrl = title.split(' ').join('-').toLowerCase();console.log(`https://platzi.com/cursos/${finalUrl}`)//https://platzi.com/cursos/curso-de-manipulación-de-arrays
Esto se puede hacer mucho más fácil con el nuevo método que nos trajo ECMAScirpt 12 llamado String.replaceAll( ). Que reemplaza todas las coincidencias que le indiquemos de un String con el valor que nosotros deseemos, en este caso reemplazar los espacios en blanco por el signo de menos.
const title ='Curso de manipulación de Arrays';console.log(title.replaceAll(' ','-'));// Output = Curso-de-manipulación-de-Arrays
Método join: unifica un array por un separador en específico como un espacio, coma o guion.
const elements =['Este','es','el','titulo','de','un','post']//Join unira los elementos del array con un espacio ' 'const joinMetod = elements.join(' ');console.log('Resultado:', joinMetod);