web-dev-qa-db-fra.com

Qu'est-ce que la déstructuration de l'affectation et ses utilisations?

J'ai lu sur Affectation de destructuration introduit dans ES6.

Quel est le but de cette syntaxe, pourquoi a-t-elle été introduite et quels sont quelques exemples de la manière dont elle pourrait être utilisée dans la pratique?

javascriptecmascript-6destructuringobject-destructuring
14
Code Maniac

Qu'est-ce que l'assignation de déstructuration?

La syntaxe d'affectation de déstructuration est une expression JavaScript qui permet de décompresser des valeurs de tableaux ou des propriétés d'objets en variables distinctes.

- MDN

Avantages

A. Rend le code concis et plus lisible.

B. Nous pouvons facilement éviter les expressions destructrices répétées.

Certains cas d'utilisation

1. Pour obtenir des valeurs dans une variable à partir d'objets, tableau

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. Pour combiner un tableau à n'importe quel endroit avec un autre tableau.

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

3. Pour modifier uniquement la propriété souhaitée dans un objet

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. Pour créer une copie superficielle d'objets

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. Pour extraire des valeurs de paramètres dans des variables autonomes

// 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. Pour obtenir la valeur des clés dynamiques de l'objet

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

console.log(value)

7. Pour construire un objet à partir d'un autre objet avec des valeurs par défaut

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

8. Pour échanger des valeurs

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

console.log(b);

9. Pour obtenir un sous-ensemble d'un objet

10. Pour faire une conversion de tableau en objet:

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

console.log(date);

11. Pour définir les valeurs par défaut dans la fonction. (Lisez cette réponse pour plus d'informations)

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. Pour obtenir des propriétés telles que length à partir d'un tableau, le nom de la fonction, le nombre d'arguments, 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);
24
Code Maniac

C'est quelque chose comme ce que vous avez peut être extrait avec le même nom de variable

L'affectation de déstructuration est une expression JavaScript qui permet de décompresser des valeurs de tableaux ou des propriétés d'objets dans des variables distinctes. Obtenons les valeurs de mois d'un tableau en utilisant l'affectation de déstructuration

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

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

et vous pouvez obtenir les propriétés utilisateur d'un objet en utilisant l'affectation de déstructuration,

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

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

L'affectation déstructurée de Javascript est probablement une inspiration tirée du langage Perl.

Cela facilite la réutilisation en évitant d'écrire des méthodes getter ou des fonctions wrapper.

Un meilleur exemple que j'ai trouvé très utile en particulier était la réutilisation de fonctions qui retournent plus de données que ce qui est requis.

S'il existe une fonction qui renvoie une liste ou un tableau ou un json, et que nous ne sommes intéressés que par le premier élément de la liste ou du tableau ou du json, nous pouvons simplement utiliser l'affectation déstructurée au lieu d'écrire une nouvelle fonction wrapper pour extraire l'élément de données intéressant.

0
Gopinath