javascript - ¿Qué es la tarea de desestructuración y sus usos?

ecmascript-6 destructuring

Question

He estado leyendo sobre la tarea de Destructura 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?

Answer 1

¿Qué es la tarea de desestructuración?

La sintaxis de asignación de desestructuración es una expresión de JavaScript que hace posible desempaquetar valores de arrays, o propiedades de objetos, en variables distintas.

Ventajas

A. Hace el código conciso y más legible.

B. Podemos evitar fácilmente la expresión destructiva repetida.

Algunos casos de uso

1. Para obtener valores en variable desde Objetos, matriz

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)

2. Combinar una matriz en cualquier lugar con otra matriz.

let arr = [2,3,4,5]
let newArr = [0,1,...arr,6,7]
console.log(newArr)

3. Para cambiar solo la propiedad deseada en un objeto

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)

4. Para crear una copia superficial de objetos.

let obj = {a:1,b:2,c:3}
let newObj = {...obj}
newObj.a = ''new Obj a''

console.log(''Original Object'', obj)
console.log(''Shallow copied Object'', newObj)

5. Extraer valores de parámetros en variables independientes.

let str = ''abcdefghijklmonpqrstuvwxyz''
console.log("Alphabet array ---///n",[...str])

6. Obtener el valor de las claves dinámicas del objeto.

let obj = {a:1,b:2,c:3}
let key = ''c''
let {[key]:value} = obj

console.log(value)

7. Para construir un objeto a partir de otro objeto con algunos valores por defecto

let obj = {a:1,b:2,c:3}
let newObj = (({d=4,...rest} = obj), {d,...rest})
console.log(newObj)

8. Intercambiar valores.

const b = [1, 2, 3, 4];
[b[0], b[2]] = [b[2], b[0]]; // swap index 0 and 2

console.log(b);

9. Para obtener un subconjunto de un objeto

• 9.1 subconjunto de un objeto :

  const obj = {a:1, b:2, c:3},
  subset = (({a, c}) => ({a, c}))(obj); // credit to Ivan N for this function
  
  console.log(subset);

• 9.2 Para obtener un subconjunto de un objeto utilizando el operador de coma y la desestructuración :

  const object = { a: 5, b: 6, c: 7  };
  const picked = ({a,c}=object, {a,c})
  
  console.log(picked); // { a: 5, c: 7 }

10. Para hacer una conversión de matriz a objeto:

const arr = ["2019", "09", "02"],
date = (([year, day, month]) => ({year, month, day}))(arr);

console.log(date);

11. Establecer valores predeterminados en función. (Lea esta respuesta para más información)

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''})

12. Para obtener propiedades como la length de la matriz, nombre de la función, número de Args, etc.

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)