在传统的 JavaScript 中，我们往往需要使用全局变量或命名空间来组织代码，这样会导致代码的可维护性和可读性较差。而 ES6 中引入了 import 和 export 语法来实现模块化编程，它可以帮助我们更好地组织代码，提高代码的可维护性和可读性。
import 和 export 的基本用法
在 ES6 中，我们可以使用 import 和 export 语法来导入和导出模块。比如，我们可以使用 export 关键字来导出一个模块：
-- ---------- ------ ----- ---- - ---------- ------ -------- ---------- - ------------------ ---- ----------- -
然后，我们可以使用 import 关键字来导入该模块：
-- ---------- ------ - ----- -------- - ---- --------------- ------------------ -- --------- ----------- -- ------ ---- ---------
上面的代码中，我们使用 import 关键字从 moduleA.js 文件中导入了 name 和 sayHello 两个变量和函数，并使用它们来输出一些信息。
import 和 export 的高级用法
除了基本的用法，import 和 export 还有一些高级用法，比如：
导入和导出默认值
我们可以使用 export default 语法来导出默认值：
-- ---------- ------ ------- -------- ---------- - ------------------ ---- ----------- -
然后，我们可以使用 import 语法来导入默认值：
-- ---------- ------ -------- ---- --------------- ----------- -- ------ ---- ---------
上面的代码中，我们使用 export default 导出了一个默认的函数，然后使用 import 导入了该函数，并直接调用它。
导入和导出多个值
除了默认值，我们还可以使用 export 关键字来导出多个值：
-- ---------- ----- ---- - ---------- -------- ---------- - ------------------ ---- ----------- - -------- -------- - ---------------- ---- ----------- - ------ - ----- --------- ------ --
然后，我们可以使用 import 语法来导入多个值：
-- ---------- ------ - ----- --------- ------ - ---- --------------- ------------------ -- --------- ----------- -- ------ ---- --------- --------- -- ---- ---- ---------
上面的代码中，我们使用 export 导出了多个变量和函数，并使用 import 导入了这些变量和函数。
导入和导出命名空间
我们还可以使用 import * as 语法来导入命名空间：
-- ---------- ----- ---- - ---------- -------- ---------- - ------------------ ---- ----------- - -------- -------- - ---------------- ---- ----------- - ------ - ----- --------- ------ --
然后，我们可以使用 import * as 语法来导入命名空间：
-- ---------- ------ - -- ------- ---- --------------- -------------------------- -- --------- ------------------- -- ------ ---- --------- ----------------- -- ---- ---- ---------
上面的代码中，我们使用 import * as 导入了一个命名空间 moduleA，并使用它来访问 moduleA 中的变量和函数。
总结
使用 import 和 export 语法可以帮助我们更好地组织代码，提高代码的可维护性和可读性。我们可以使用 export 关键字来导出模块，使用 import 关键字来导入模块。除了基本的用法，还可以使用 export default 导出默认值，使用 export 导出多个值，使用 import * as 导入命名空间。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65092f4a95b1f8cacd3f1c9e