web-dev-qa-db-fra.com

Déstructurer un objet d'exportation par défaut

Puis-je détruire un objet d'exportation par défaut lors de l'importation?

Étant donné la syntaxe d'exportation suivante (export default)

const foo = ...
function bar() { ... }

export default { foo, bar };

la syntaxe d'importation suivante est-elle JS valide?

import { foo, bar } from './export-file';

Je demande parce que cela fonctionne sur mon système, mais on m'a dit que cela ne devrait PAS fonctionner selon les spécifications.

javascriptes6-modules
27
sfletche

Puis-je détruire un objet d'exportation par défaut lors de l'importation?

Non. Vous ne pouvez détruire un objet qu'après l'avoir importé dans une variable.

Notez que les importations/exportations ont une syntaxe et une sémantique complètement différentes de celles des littéraux/modèles d'objet. La seule chose courante est que les deux utilisent des accolades et leurs représentations sténographiques (avec uniquement des noms d'identifiants et des virgules) sont indiscernables.

La syntaxe d'importation suivante est-elle valide JS?

import { foo, bar } from './export-file';

Oui. Il importe deux exportations nommées du module. C'est une notation abrégée pour

import { foo as foo, bar as bar } from './export-file';

ce qui signifie "déclarer une liaison foo et la laisser référencer la variable qui a été exportée sous le nom foo de export-file, et déclarez une liaison bar et laissez-la référencer la variable qui a été exportée sous le nom bar de export-file ".

Étant donné la syntaxe d'exportation suivante (exportation par défaut)

export default { foo, bar };

l'importation ci-dessus fonctionne-t-elle avec cela?

Non. Ce qu'il fait, c'est déclarer une variable invisible, l'initialiser avec l'objet { foo: foo, bar: bar }, et exportez-le sous le nom default.
Lorsque ce module est importé en tant que export-file, le nom default ne sera pas utilisé et les noms foo et bar ne seront pas trouvés, ce qui conduit à un SyntaxError.

Pour résoudre ce problème, vous devez soit importer l'objet exporté par défaut:

import { default as obj } from './export-file';
const {foo: foo, bar: bar} = obj;
// or abbreviated:
import obj from './export-file';
const {foo, bar} = obj;

Ou vous conservez votre syntaxe d'importation et utilisez à la place des exportations nommées:

export { foo as foo, bar as bar };
// or abbreviated:
export { foo, bar };
// or right in the respective declarations:
export const foo = …;
export function bar() { ... }
51
Bergi