web-dev-qa-db-fra.com

Puis-je pré-déclarer des variables pour déstructurer l'affectation d'objets?

Contexte

Quand j'ai essayé de déstructurer l'affectation avec des tableaux, j'ai pu pré-déclarer mes variables:

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

console.log(a) // logs 1
console.log(b) // logs 2
console.log(c) // logs 3

Cela est passé très bien par le compilateur Babel.

Mais quand j'ai essayé de faire la même chose avec des objets, j'ai eu une erreur

let a, b, c
let obj = {cat: 'meow', dog: 'woof', mouse: 'squeak'};
{cat: a, dog: b, mouse: c} = obj;

console.log(a) // I want this to log 'meow'
console.log(b) // I want this to log 'woof'
console.log(c) // I want this to log 'squeak'

Question

Est-ce un problème/problème ES6 ou Babel? Si c'est intentionnel pour ES6, pourquoi la différence avec la façon dont les tableaux sont traités?

Remarque

Je comprends que le remplacement de var par let signifie que je ne suis pas obligé de pré-déclarer mes variables et que le fait d'avoir let en ligne est valide (et, je crois, généralement préféré ). J'aimerais connaître la différence entre les implémentations plutôt qu'une réponse "ne faites pas ça du tout".

javascriptecmascript-6babeljsdestructuring
35
Lucy Bain

Lorsque vous déstructurez un objet,

  1. vous devez utiliser les mêmes noms de variables que les clés de l'objet. Ce n'est qu'alors que vous obtiendrez une correspondance un à un et que les valeurs seront correctement déstructurées.

  2. et vous devez encapsuler l'intégralité de l'affectation entre parenthèses si vous n'utilisez pas de déclaration, sinon le littéral d'objet dans l'expression de gauche serait considéré comme un bloc et vous obtiendrez une erreur de syntaxe.

Donc, votre code fixe ressemblerait à ceci

'use strict';
let cat, dog, mouse;
let obj = {cat: 'meow', dog: 'woof', mouse: 'squeak'};
({cat, dog, mouse} = obj);     // Note the `()` around

ce qui équivaut à

'use strict';
let obj = {cat: 'meow', dog: 'woof', mouse: 'squeak'};
let {cat, dog, mouse} = obj;
81
thefourtheye