解構默認導出對象

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並讓它引用從export-file以名稱bar導出的變量”。

鑒於以下導出語法（導出默認值）

 export default { foo, bar };

上述導入是否適用於此？

不。它所做的是聲明一個不可見的變量，用對象{ foo: foo, bar: bar }初始化它，並以default名稱導出它。
當此模塊作為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() { ... }

Answer 2

是的，使用動態導入

要添加到 Bergi 的答案，請注意在動態導入的情況下，由於返回的模塊是一個對象，您可以使用解構賦值來導入它：

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

為什么這有效

import在不同上下文中的運行方式大不相同。 當在模塊的開頭使用時，格式為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');