Saltar al contenido principal

Destrucción de arreglos y objetos.

@serverSerrverlesskiy

La desestructuración en JavaScript es una sintaxis de asignación que le permite extraer datos de forma conveniente, en una sola línea, de matrices y objetos.

Desestructuración de objetos

object

Editor en vivo
Resultado
Loading...

Las propiedades title, group y quantity repiten la estructura del objeto fruta y copian sus valores en variables idénticas ubicadas en {...}. Por lo tanto, si intercambia las variables en {...}, entonces el código funcionará igual de bien, intente intercambiar las variables en el ejemplo anterior.

Video

objeto anidado

bookmark

También podemos desestructurar un objeto anidado.

Editor en vivo
Resultado
Loading...

Otros nombres

Si necesita usar nombres de variables que no sean nombres de propiedades, esta sintaxis funcionará:

Editor en vivo
Resultado
Loading...

Valores predeterminados

Si en {...} escribes una variable propiedades que no se encuentran, entonces se le asignará el valor undefined. Para asignar un valor predeterminado a una variable , se le puede asignar este valor. Si intenta asignar un valor a una variable cuyas propiedades se encuentran, se le asignará el valor de la propiedad. Veamos un ejemplo.

Dafault

Editor en vivo
Resultado
Loading...

title muestra el valor de la propiedad, no lo que le asignamos. La propiedad group no existe en el objeto fruit y no hemos asignado ningún valor a la variable . La propiedad quantity tampoco existe, pero le hemos asignado el valor 5 a la variable .

Resto

octatok

Si necesita obtener una variable de un objeto y agrupar el resto en otro objeto, utilice ... antes de la variable a partir de la cual se creará el objeto con las propiedades restantes.

Editor en vivo
Resultado
Loading...

Desestructuración de arreglos

La desestructuración de una matriz ocurre de la misma manera que la de un objeto. La única diferencia es que los valores de los elementos de la matriz se asignarán a las variables en el orden en que se definen los elementos.

Take

Editor en vivo
Resultado
Loading...

Resto

Por analogía con los objetos, el resto funciona.

Editor en vivo
Resultado
Loading...

Copia de matriz

Un ejemplo de creación de una copia de una matriz.

Copia

Editor en vivo
Resultado
Loading...

Unión de arreglos

add

Un ejemplo de combinación de arreglos en uno.

Editor en vivo
Resultado
Loading...

¿Problemas?

Problem

Escribe en Discord o Telegram chat y suscríbete a nuestras noticias

preguntas

Question

¿Desestructurar es?

  1. Función
  2. Sintaxis
  3. Objeto

Al desestructurar un objeto, ¿es necesario poner las variables en el mismo orden que están en el objeto?

  1. true
  2. false

¿Qué se asignará a una variable si no se encuentra una propiedad idéntica en el objeto?

  1. error
  2. undefined
  3. unknown

Para comprender cuánto ha aprendido en esta lección, realice la prueba en [aplicación móvil] (http://onelink.to/njhc95) en nuestra escuela sobre este tema.

EnglishMoji!

Enlaces

  1. Learn JavaScript
  2. MDN Web Docs
  3. Desestructuración en ES6

Contributors ✨

Thanks goes to these wonderful people (emoji key):


IIo3iTiv


Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

EnglishMoji!