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

不可以。您只能在将对象导入变量后对其进行解构。

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

以下导入语法是否有效 JS？

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

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

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

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

鉴于以下导出语法（导出默认值）

export default { foo, bar };

上述导入是否适用于此？

不。它所做的是声明一个不可见的变量，用 object 初始化它{ foo: foo, bar: bar }，然后以 name 导出它default。
当这个module被导入为时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() { ... }

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

是的，使用动态导入

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

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

为什么这有效

import在不同的上下文中操作有很大的不同。当在module的开头使用时，在 format 中import ... from ... ，它是一个静态 import，它具有在 Bergi 的回答中讨论的限制。

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

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

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

从这里开始，您可以使用嵌套解构直接分配foo, 和bar：

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