¿Qué es la asignación desestructurante y sus usos?

He estado leyendo sobre la tarea de desestructuración introducida en ES6.

¿Cuál es el propósito de esta sintaxis, por qué se introdujo y cuáles son algunos ejemplos de cómo podría usarse en la práctica?

Feb 09 '19 17:02 Code Maniac

¿Qué es la tarea desestructurante?

La sintaxis de asignación de estructuración es una expresión de JavaScript que permite descomprimir valores de matrices o propiedades de objetos en variables distintas.

- De MDN

Ventajas

Hace que el código sea conciso y más legible.
Podemos evitar fácilmente expresiones destructivas repetidas.

Algunos casos de uso

Para obtener valores en variables de Objetos, matriz

Mostrar fragmento de código

let obj = { 'a': 1,'b': {'b1': '1.1'}}
let {a,b,b:{b1}} = obj
console.log('a--> ' + a, '\nb--> ', b, '\nb1---> ', b1)

let obj2 = { foo: 'foo' };
let { foo: newVarName } = obj2;
console.log(newVarName);

let arr = [1, 2, 3, 4, 5]
let [first, second, ...rest] = arr
console.log(first, '\n', second, '\n', rest)


// Nested extraction is possible too:
let obj3 = { foo: { bar: 'bar' } };
let { foo: { bar } } = obj3;
console.log(bar);

Expandir fragmento

Para cambiar solo la propiedad deseada en un objeto

Mostrar fragmento de código

let arr = [{a:1, b:2, c:3},{a:4, b:5, c:6},{a:7, b:8, c:9}]

let op = arr.map( ( {a,...rest}, index) => ({...rest,a:index+10}))

console.log(op)

Expandir fragmento

Para extraer valores de parámetros en variables independientes

Mostrar fragmento de código

// Object destructuring:
const fn = ({ prop }) => {
  console.log(prop);
};
fn({ prop: 'foo' });


console.log('------------------');


// Array destructuring:
const fn2 = ([item1, item2]) => {
  console.log(item1);
  console.log(item2);
};
fn2(['bar', 'baz']);


console.log('------------------');


// Assigning default values to destructured properties:

const fn3 = ({ foo="defaultFooVal", bar }) => {
  console.log(foo, bar);
};
fn3({ bar: 'bar' });

Expandir fragmento

Para obtener el valor de las claves dinámicas del objeto
Mostrar fragmento de código
```
let obj = {a:1,b:2,c:3}
let key = 'c'
let {[key]:value} = obj

console.log(value)
```
Expandir fragmento
Para intercambiar valores
Mostrar fragmento de código
```
const b = [1, 2, 3, 4];
[b[0], b[2]] = [b[2], b[0]]; // swap index 0 and 2

console.log(b);
```
Expandir fragmento
Para obtener un subconjunto de un objeto
- subconjunto de un objeto :
  Mostrar fragmento de código
```
const obj = {a:1, b:2, c:3},
      subset = (({a, c}) => ({a, c}))(obj); // credit to Ivan N for this function

console.log(subset);
```
  Expandir fragmento
- Para obtener un subconjunto de un objeto usando el operador de coma y desestructurando :
  Mostrar fragmento de código
```
const object = { a: 5, b: 6, c: 7  };
const picked = ({a,c}=object, {a,c})

console.log(picked); // { a: 5, c: 7 }
```
  Expandir fragmento
Para realizar una conversión de matriz a objeto:
Mostrar fragmento de código
```
const arr = ["2019", "09", "02"],
      date = (([year, day, month]) => ({year, month, day}))(arr);

console.log(date);
```
Expandir fragmento

Para establecer valores predeterminados en la función. (Lea esta respuesta para obtener más información)

Mostrar fragmento de código

function someName(element, input, settings={i:"#1d252c", i2:"#fff", ...input}){
    console.log(settings.i);
    console.log(settings.i2);
}

someName('hello', {i: '#123'});
someName('hello', {i2: '#123'});

Expandir fragmento

Para obtener propiedades como las lengthde una matriz, nombre de función, número de argumentos, etc.

Mostrar fragmento de código

let arr = [1,2,3,4,5];

let {length} = arr;

console.log(length);

let func = function dummyFunc(a,b,c) {
  return 'A B and C';
}

let {name, length:funcLen} = func;

console.log(name, funcLen);

Expandir fragmento

Feb 09 '2019 10:02 VLAZ

Es algo así como lo que tienes se puede extraer con el mismo nombre de variable.

La tarea de desestructuración es una expresión de JavaScript que permite descomprimir valores de matrices o propiedades de objetos en variables distintas. Obtengamos los valores del mes de una matriz usando la asignación de desestructuración

var [one, two, three] = ['orange', 'mango', 'banana'];

console.log(one); // "orange"
console.log(two); // "mango"
console.log(three); // "banana"

y puede obtener propiedades de usuario de un objeto mediante la asignación de desestructuración,

var {name, age} = {name: 'John', age: 32};

console.log(name); // John
console.log(age); // 32

Dec 16 '2019 16:12 vishu2124