El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Generación de arreglos con split(), from() y of()

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Conoce las alternativas que existen para poder generar arreglos y crearlos en relación a elementos nuevos o existentes en tu página o sitio web. Conoce los principales métodos alternativos para comenzar a crear arreglos de manera dinámica.
05:21

Transcripción

La generación de arreglos no está ligada exclusivamente a tener una variable seguida de los corchetes y están ingresando los datos en ese momento. De hecho, tenemos algunos métodos que nos pueden servir para poder crear un arreglo desde 0. Uno de estos primeros métodos que vamos a utilizar es el método'split'. En este caso, tenemos una variable llamada'mensaje' que tiene en una sola línea la palabra'ceviche', 'tacos'y'pasta'. Lo que yo quiero es convertirlo en un arreglo, para lo cual voy a crear una constante llamada'platillos', que, de hecho, ya la tengo aquí como una variable, entonces simplemente la voy a copiar y la voy a pegar, y en lugar de tener un valor "null" lo que voy hacer es mandar el contenido de'mensaje'. Pero'mensaje', al ser una cadena de texto, tiene disponible un método llamado'split'. Este método llamado'split' recibe como parámetro un elemento con el cual vamos a tomar de base para hacer la separación. Nosotros podemos ver que aquí tenemos una coma. Entonces, vamos a mandar esa coma como cadena de texto y, después de esto, simplemente dejaremos que se imprima en pantalla. Ahora vamos a mostrarlo y actualizamos nuestro navegador y vemos como lo que teníamos antes como una cadena de texto ahora ya lo tenemos como un arreglo. Pero tenemos algo justo detrás, que es un espacio en blanco. Entonces, simplemente tomamos el patrón que sería: coma, espacio en blanco, que son estos dos elementos. Actualizamos el navegador y ahora ya tenemos un arreglo bien formado. Otra manera que tenemos de generar arreglos es cuando logramos conectarnos a nuestro HTML. En este caso tenemos una división que contiene tres párrafos. Esta división tiene una clase llamada'platillos' y dentro de cada párrafo tenemos el nombre de uno de estos'platillos'. Lo primero que vamos a hacer es traernos dicha información. Para traernos esta información, vamos a generar una variable llamada 'platillos HTML' y lo vamos a ligar de esta forma, con'document. querySelectorAll', y vamos a mandar el nombre de la clase que tenemos y la etiqueta'p'. ¿Qué significa esto? Que vamos a acceder a esta clase y vamos a acceder a cada uno de estos elementos. Así, si yo quiero enviar a consola'platillos html', actualizo el navegador y vemos que tenemos un arreglo con tres elementos. Aquí podríamos decir "Perfecto, entonces ya tengo un arreglo y ya lo pude generar". Pero ¿cuál es el detalle? Cada que accedemos a este elemento, lo que tenemos es todo el contenido de la etiqueta y ese contenido no nos sirve para lo que queremos hacer. Lo que necesitamos nosotros es lo que tendremos dentro de la propiedad'text content', para lo cual vamos a utilizar entonces el método'array. from'. Para evitar estar generando tantas variables, lo que voy a hacer es encapsular esta referencia directamente aquí. Entonces, lo que yo estoy haciendo, es decir, 'array. from' de este elemento. En resumen, lo que estoy diciendo es que se convierta todo esto que tenemos acá en un arreglo formal. Así, actualizamos nuevamente y vemos que tenemos otra vez la misma etiqueta'p' pero tenemos otros métodos disponibles. Dentro de ellos, el método'map', que con el método'map' voy a poder hacer el mapeo de los elementos que yo necesito para trabajar. Por tanto, voy a acceder nuevamente a la variable'platillos' y para lo cual y evitar alguna confusión voy a comentarlas anteriormente. De aquí generaremos'bar platillos' igual a, y vamos a utilizar este'platillos html' como la referencia, y aquí ya vamos a contar con un método llamado'map'. Este método llamado'map'me va a permitir a mí hacer un mapeo de todos los contenidos. Por lo cual, esto mismo va a ser una iteración continua. Yo no necesito meter un ciclo'for'o un'for in'o lo que sea. Automáticamente, esto lo hace solo. Y ya, una vez que lo vamos a hacer solo, lo primero que va a recibir será un'platillo'como un parámetro. Cuidado: esto es el nombre de un parámetro. Tú le puedes poner el nombre que quieras. En este caso le estamos poniendo nosotros el nombre de'platillo' para mantener la referencia. Cuando tenemos esta referencia, lo único que diré yo es: 'platillo' punto 'textContent', que este'textContent'es lo que nosotros estábamos revisando, puesto que nosotros con este método'map' ya estamos haciendo la iteración. Ahora vamos a mostrar'platillos'en el'console. log', actualizamos y, listo, ahora sí ya tenemos un arreglo formal. Esto puede sonar algo rebuscado, pero realmente es algo bastante usable. Y, por último, tenemos el método llamado'array. of'. Este método es más simple. Todo lo que le enviemos aquí dentro simplemente lo va a generar y lo va a convertir en un arreglo. Ahora actualizamos el navegador y vemos como la línea 22, que es esta última, nos está mostrando el contenido de esta variable. Así, nosotros ya pudimos crear de distintas maneras un arreglo, ya sea con el método'split' o con el método'array. from'y el método'map' y con el método'of'.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.