javascript - 解构默认导出对象

Question

我可以在导入时解构默认导出对象吗？

给定以下导出语法(导出默认)

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

export default { foo, bar };

下面的导入语法是有效的 JS 吗？

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

我问是因为它确实可以在我的系统上工作，但我被告知它不应该根据规范工作。

Answer 1

Can I destructure a default export object on import?

没有。您只能在将对象导入变量后对其进行解构。

请注意，导入/导出的语法和语义与对象文字/对象模式的语法和语义完全不同。唯一的共同点是两者都使用大括号，并且它们的简写表示(仅包含标识符名称和逗号)无法区分。

Is the following import syntax valid JS?

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

是的。它确实从模块导入两个命名导出。这是

的简写符号

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

这意味着“声明一个绑定(bind)foo并让它引用从export-file以foo名称导出的变量，并且声明一个绑定(bind) bar 并让它引用从 export-file 中以 bar 名称导出的变量”。

Given the following export syntax (export default)

export default { foo, bar };

does the above import work with this?

否。它的作用是声明一个不可见变量，用对象{ foo: foo, bar: bar }初始化它，并以名称导出它默认。
当此模块作为 export-file 导入时，将不会使用名称 default 以及名称 foo 和 bar > 不会被发现，这会导致 SyntaxError。

要解决此问题，您需要导入默认导出的对象:

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

或者保留导入语法并使用命名导出:

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