解构默认导出对象

Question

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

鉴于以下导出语法 (export default)

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

export default { foo, bar };

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

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

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

Answer 1

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

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

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

下面的导入语法是合法的JS吗？

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

是的。它确实从模块中导入了两个命名导出。这是一个简写符号

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

这意味着“声明一个绑定foo并让它引用从export-file以名称foo导出的变量，并声明一个绑定bar并让它引用在名称 bar 来自 export-file"。

给定以下导出语法（导出默认）

export default { foo, bar };

上述导入是否适用于此？

否。它的作用是声明一个不可见的变量，用对象{ foo: foo, bar: bar }对其进行初始化，然后以default的名称导出它。
当这个模块被导入为export-file 时，名称default 将不会被使用并且名称foo 和bar 将不会被找到，这会导致一个SyntaxError。。 p>

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

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() { ... }

Answer 2

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

是的，使用动态导入

要添加解决静态导入的 Bergi 答案，请注意，在动态导入的情况下，由于返回的模块是一个对象，您可以使用解构赋值来导入它：

(async function () {
  const { default: { foo, bar } } = await import('./export-file.js');
  console.log(foo, bar);
})();

为什么会这样

import 在不同的上下文中运行方式大不相同。在模块开头使用时，格式为import ... from ... ，它是static import，具有Bergi 的回答中讨论的限制。

当在程序中以import('./filename.js') 形式使用时，它被视为dynamic import。动态导入的操作非常类似于解析为对象的函数（作为命名导出和默认导出的组合，分配给default 属性），并且可以这样解构。

在提问者的例子中，await import('./export-file.js') 将解析为：

{
  default: {
    foo: ...,
    bar: function bar() {...}
  }
}

从这里，你可以只使用nested destructuring直接分配foo和bar：

const { default: { foo, bar } } = await import('./export-file.js');