Question

我正在使用React Redux构建的应用程序。在代码中，有一个这样的声明：

import * as test from 'util/test'

我知道这样的陈述：

 import test from 'util/test'

这样的陈述：

 import {test} from 'util/test'

但*对我来说是新的。

任何人都可以向我解释这种语法的含义及其工作原理吗？

Answer 1

您的原始问题（不包含as test部分）不是有效的语法，您可以从ES2015 specification中看到。您更新的示例有效，但由于原因不明确，因此未被广泛使用。

当您编写import * as test from 'util/test'时，您可以访问名为test的对象上“util / test.js”的所有导出。例如，假设“util / test.js”导出一个值为42的常量，如下所示：

// util/test.js
export const myNumber = 42;

现在，假设您想在其他模块中访问上面的常量（让我们称之为“index.js”）。当然，您可以使用更典型的语法访问它，如下所示：

// index.js
import {myNumber} from 'util/test';

console.log(myNumber); // => 42

或者，使用import * as ...语法，您可以执行以下操作：

// index.js
import * as test from 'util/test';

console.log(test.myNumber); // => 42

在第一个示例中，我们将myNumber直接导入模块范围;在第二个示例中，myNumber是test的属性。

{...}语法的优点在于它使我们的导入名称显式位于文件的顶部。此外，我们可以直接访问模块级别的导入;我们不必通过其他对象继续访问它。这可能是*语法相对罕见的原因。但它有它的用途，你有时会看到它，所以尽管如此熟悉它还是很好的。