Saltar al contenido

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

Te sugerimos que pruebes esta resolución en un ambiente controlado antes de enviarlo a producción, saludos.

Solución:

¿Qué es la asignación de desestructuración?

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

– MDN

Ventajas

UNA. Hace que el código sea conciso y más legible.

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

Algunos casos de uso

1. Para obtener valores en variables de Objetos,array

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);

2. Para combinar un array en cualquier lugar con otro array.

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. Para extraer valores de parámetros en variables independientes

// 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' );

6. Para ser dinámico keys valor 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 predeterminados

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

8. Para 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. 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 usando 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 array a la conversión de objetos:

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

console.log(date);

11. Para establecer valores predeterminados en función. (Lea esta respuesta para obtener 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 length desde un array, nombre de la función, número de argumentos, 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);

Aquí puedes ver las comentarios y valoraciones de los lectores

Eres capaz de añadir valor a nuestro contenido colaborando tu experiencia en las interpretaciones.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *