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

function learnJavaScript() {
  // Создаём объект `fruit`
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: 5
  }

  // Destrucción del objeto `fruit`
  let { title, group, quantity } = fruit

  // Mostrar `title`
  return title
}

function learnJavaScript() {
  // Создаём объект `fruit`
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: 5
  }

  // Destrucción del objeto `fruit`
  let { title, group, quantity } = fruit

  // Mostrar `title`
  return title
}

Resultado

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

function learnJavaScript() {
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: {
      store: 5,
      storeHaus: 99
    }
  }

  let {
    title,
    quantity: { store: s1, storeHaus: s2 }
  } = fruit

  return title + ', ' + parseFloat(s1 + s2)
}

function learnJavaScript() {
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: {
      store: 5,
      storeHaus: 99
    }
  }

  let {
    title,
    quantity: { store: s1, storeHaus: s2 }
  } = fruit

  return title + ', ' + parseFloat(s1 + s2)
}

Resultado

Otros nombres

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

Editor en vivo

function learnJavaScript() {
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: 5
  }
  // title -> a; group -> b; quantity -> c
  let { title: a, group: b, quantity: c } = fruit

  return a
}

function learnJavaScript() {
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: 5
  }
  // title -> a; group -> b; quantity -> c
  let { title: a, group: b, quantity: c } = fruit

  return a
}

Resultado

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

function learnJavaScript() {
  let fruit = {
    title: 'banana'
  }
  let { title = 'lime', group, quantity = 5 } = fruit

  return title + ', ' + group + ', ' + quantity
}

function learnJavaScript() {
  let fruit = {
    title: 'banana'
  }
  let { title = 'lime', group, quantity = 5 } = fruit

  return title + ', ' + group + ', ' + quantity
}

Resultado

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

function learnJavaScript() {
  let fruit = {
    title: 'banana ',
    group: 'tropical ',
    quantity: 5
  }
  let { group, ...prop } = fruit

  return prop.title + group
}

function learnJavaScript() {
  let fruit = {
    title: 'banana ',
    group: 'tropical ',
    quantity: 5
  }
  let { group, ...prop } = fruit

  return prop.title + group
}

Resultado

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

function learnJavaScript() {
  // Crear una matriz `fruit`
  let fruit = ['banana', 'tropical', 5]

  // Destrucción de la matriz `fruit`
  let [title, group, quantity] = fruit

  // Visualización en la pantalla
  return `${title}, ${group}, ${quantity}`
}

function learnJavaScript() {
  // Crear una matriz `fruit`
  let fruit = ['banana', 'tropical', 5]

  // Destrucción de la matriz `fruit`
  let [title, group, quantity] = fruit

  // Visualización en la pantalla
  return `${title}, ${group}, ${quantity}`
}

Resultado

Resto

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

Editor en vivo

function learnJavaScript() {
  let fruit = ['banana ', 'tropical ', 5]

  let [name, ...prop] = fruit

  return `${name}, ${prop}`
}

function learnJavaScript() {
  let fruit = ['banana ', 'tropical ', 5]

  let [name, ...prop] = fruit

  return `${name}, ${prop}`
}

Resultado

Copia de matriz

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

Copia

Editor en vivo

function learnJavaScript() {
  let fruit = ['banana ', 'tropical ', 5]

  let _fruit = [...fruit]

  return _fruit
}

function learnJavaScript() {
  let fruit = ['banana ', 'tropical ', 5]

  let _fruit = [...fruit]

  return _fruit
}

Resultado

Unión de arreglos

add

Un ejemplo de combinación de arreglos en uno.

Editor en vivo

function learnJavaScript() {
  let name = ['banana '],
    prop = ['tropical ', 5],
    fruit = [...name, ...prop]

  return fruit
}

function learnJavaScript() {
  let name = ['banana '],
    prop = ['tropical ', 5],
    fruit = [...name, ...prop]

  return fruit
}

Resultado

¿Problemas?

Problem

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

JavaScript Camp

preguntas

Question

¿Desestructurar es?

Función
Sintaxis
Objeto

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

true
false

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

error
undefined
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.