자바스크립트에서 구조화하기

새로운 데이터에 대한 제안은 소프트웨어에 대한 롤 드의 설계에 따라 효율적이며, 그랜 헤라미엔타는 요구 사항을 충족하지 못하며, 구조화는 불가능하며, 추가 변수에 대해서는 허용되지 않습니다.

객체 구조화

Antes, si querías obtener los valores de un objeto, debíamos implementar algo como esto

const user = {
  name: "McFly",
  rol: "Time Travel"
};

const { name, rol } = user;
console.log(`${name} is a  ${rol}`);
// McFly is a  Time Travel 

Ahora, con destructuring, esto lo podemos escribir así

const user = {
  name: "McFly",
  rol: "Time Travel"
};

const { name, rol } = user;
console.log(`${name} is a  ${rol}`);
// McFly is a  Time Travel 

현실적 요소의 집합체, 상상된 구성 요소의 구성 요소, 코드의 영역에 대한 제한 요소 없음.

Además de tan solo asignar valores, nos permite otras funcionalidades como por ejemplo:

Asignar Valores por Defecto

const user = {
  name: "McFly"
};

const { name, rol = "Time Travel" } = user;
console.log(`${name} is a  ${rol}`);
// McFly is a  Time Travel 

o también cambiar los nombres de las 변수

const user = {
  name: "McFly"
};

const { name: nick, rol = "Time Travel" } = user;
console.log(`${nick} is a  ${rol}`);
// McFly is a  Time Travel 

También nos permitte Trabajar con estructuras anidadas

const user = {
  name: "McFly",
  range: {
    from: 1988,
    to: 2021
  }
};

const {
  name: nick,
  rol = "Time Travel",
  range: { from, to }
} = user;
console.log(`${nick} is a  ${rol} from ${from} to ${to}`);
// McFly is a  Time Travel from 1988 to 2021 

기능에 대한 평가를 수행하는 사람

const user = {
  name: "McFly",
  range: {
    from: 1988,
    to: 2021
  },
  rol: "Time Travel"
};
function getRol({ rol }) {
  return rol;
}

console.log(getRol(user));
// Time Travel 

배열 구조화

Como es de esperarse, esta funcionalidad también la podemos utilizar en tipos de datos array, donde podemos asignar nuestros valores a variables, sin la necesidad de realizar un bucle

const rocksBands = ["Metallica", "Iron Maiden", "Slayer"];
let [first, seccond, third] = rocksBands;

console.log(first, seccond, third);
// Metallica Iron Maiden Slayer 

오미티르 용기

const rocksBands = ["Metallica", "Iron Maiden", "Slayer"];
let [first, , third] = rocksBands;

console.log(first, third);
// Metallica Slayer 

레토르노 엔 펑션

const rocksBands = () => ["Metallica", "Iron Maiden", "Slayer"];
let [first, second , third] = rocksBands();

console.log(first, second, third);
// Metallica Iron Maiden Slayer

휴식/퍼짐
el operador (es6) "..."puede ser usado en destructuring al lado izquierdo de la asignación, mapeando el resto de los elementos que no han sido asignados, a un nuevo array con sus valores.

const rocksBands = () => ["Metallica", "Iron Maiden", "Slayer"];
let [first, ...others] = rocksBands();

console.log(first, others);
// Metallica , ["Iron Maiden", "Slayer"]

변수 교환

const rocksBands = ["Metallica", "Iron Maiden"];
let first, seccond;
[first, seccond] = rocksBands;
[first, seccond] = [seccond, first];

console.log(first, seccond);
// Iron Maiden Metallica 

Arreglos y objetos anidados

const bands = {
  style: "rock",
  names: ["Metallica", "Iron Maiden", "Slayer"]
};

let { style: styleOfBands, names: [nameOfFirstBand] } = bands;

console.log(styleOfBands, nameOfFirstBand);
//rock Metallica 

Como hemos notado, son muchas las mejoras de codigo que podemos realizar con Destructuring, podemos revisar sus especificaciones y disfrutar de sus beneficios.