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

Desestructuración de arreglos

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Conoce una forma alternativa para asignar múltiples datos o datos de un arreglo en un conjunto de variables o, incluso, en otro arreglo sin necesidad de hacer una asignación individual y así optimizar tiempo y líneas de código mientras estés programando.
03:41

Transcripción

Con los arreglos en JavaScript, también podemos trabajar con algo llamado desestructura o desestructuración de arreglos. ¿Esto qué es? Es como una asignación a la inversa. Vamos a analizarlo rápidamente. Aquí, en pantalla, tú podrás encontrar que tenemos un arreglo llamado'platillos'. Tenemos tres variables: 'platillo 1', 'platillo 2'y'platillo 3'. A cada una de estas variables estamos asignando cada una de las posiciones del arreglo'platillos': 'platillos'en la posición 0, en la posición 1 y en la posición 2, y posteriormente los estamos enviando a pantalla. Cuando los mandamos en pantalla, tenemos los tres elementos, que es: 'ceviche', 'tacos'y'pasta'. Ahora, esta asignación puede ser un tanto compleja. Entonces, ¿qué vamos a hacer? Primero, voy a comentar todos estos elementos y, una vez que ya están comentados, yo voy a trabajar generando primero tres variables, las mismas variables que teníamos pero sin ningún dato, y ahora voy a trabajar con este proceso de desestructuración. Lo primero que voy a hacer es utilizar la sintaxis del arreglo. Sí, no la estamos asignando a ningún lugar, solamente estamos escribiendo los corchetes. Y aquí vamos escribir los nombres de las tres variables: 'platillo 1', 'platillo 2' y'platillo 3'. Y después, siguiendo la sintaxis de la desestructuración de arreglos, vamos a escribir el símbolo igual. Espera, ¿igual?, ¿a un arreglo le vamos a asignar algo?, ¿cómo funciona esto? Esta sintaxis está muy rara, pero tiene mucha lógica cuando hablamos de este tema. Aquí vamos a asignar la variable'platillos'. Entonces, si estás de acuerdo, esto que tenemos aquí en pantalla no debería cambiar. Actualizamos nuestro navegador y vemos como, efectivamente, mantenemos el contenido. De hecho, si yo agrego aquí un elemento más, por ejemplo, 'tostadas', y voy a crear una variable nueva y a esta le voy a poner de nombre 'platillo 4', y aquí simplemente voy a hacer la referencia, 'platillo 4'. Esto mismo lo voy a mandar a imprimir y, una vez que lo mando a imprimir, actualizamos el navegador y, listo, tenemos esto. ¿Qué sucede con la desestructuración? Lo que pasa es que cuando estamos asignando utilizando esta sintaxis, por dentro el motor de Javascript toma el contenido que hay dentro de esta variable, la identifica como un arreglo y, al identificarla, empieza a hacer la asignación uno a uno, es decir, la posición 0 en el primer elemento que yo mandé, es decir, en la posición 0. Uno a uno, dos a dos, tres a tres. Entonces, este tipo de asignaciones es bastante sencillo ahora y, de hecho, podemos agregar un nivel de simplicidad más. ¿Y este cuál es? Voy a comentar todas estas variables, voy a guardar y actualizar mi navegador. Cuando yo lo hago, me genera un error y me dice'platillo 1'no está definido. Esto sucede porque estamos trabajando con el modo'use strict'. Pero lo que podemos hacer es que al inicio escribimos la palabra reservada'var'. Ahora sí, actualizamos el navegador y todo vuelve a funcionar correctamente. Dime, ¿qué tipo de sintaxis prefieres?, ¿esta donde tenemos que estar asignando cada una o estar declarando cada variable?, ¿o simplemente hacer este proceso de desestructuración? Creo que esto es bastante sencillo y te ayudará a agilizar tu proceso de generación de código.

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.