在现代 Web 开发中，JavaScript 作为前端开发的核心语言，已经成为各大公司和组织的标配。同时，随着 ECMAScript 2021 标准的发布，JavaScript 的功能和能力得到了极大的增强。其中，import() 函数的出现为动态导入提供了非常强大的支持，使得我们可以更加灵活地加载各种文件。本篇文章主要介绍如何在 ECMAScript 2021 中使用 import() 函数加载 JSON 文件。
什么是动态导入
在 ECMAScript 6 中，我们已经可以使用 import/export 语法来导入和导出模块。同时，在 ECMAScript 2020 中，还提供了 import() 函数，使得我们可以在运行时加载模块，从而实现更加灵活的模块化开发。
import() 函数的语法如下：
import(moduleName)
.then((module) => {
// 引入模块成功
})
.catch((error) => {
// 引入模块失败
});我们可以看到，import() 函数的参数是一个字符串，表示要加载的模块的路径。当加载成功后，我们可以通过 then 方法来获取该模块的导出。当加载失败时，我们可以通过 catch 方法来处理错误。
加载 JSON 文件
JSON 是一种常用的数据交换格式，在前端开发中也经常用于存储和传输数据。在 ECMAScript 2021 中，我们可以使用 import() 函数来加载 JSON 文件。
首先，让我们来看一个简单的 JSON 文件，假设它的路径是 data.json：
{
"name": "Tom",
"age": 18,
"gender": "male"
}接下来，我们可以通过 import() 函数来加载这个 JSON 文件：
import("./data.json")
.then((module) => {
console.log(module);
})
.catch((error) => {
console.error(error);
});在加载成功后，module 的值应该就是该 JSON 文件的内容。我们可以在浏览器控制台中打印出它的内容：
{
name: "Tom",
age: 18,
gender: "male"
}实战示例
为了更好地演示如何在 ECMAScript 2021 中加载 JSON 文件，我们可以编写一个简单的示例。
假设我们有一个简单的网站，需要展示一些商品的信息，每个商品包括名称、价格、描述等属性。我们可以将这些属性存储在一个 JSON 文件中，并通过 import() 函数加载该文件。
首先，让我们来创建一个名为 product.json 的 JSON 文件：
-- -------------------- ---- -------
-
-
------- ------- ----
-------- -----
-------------- ------
--
-
------- -------
-------- -----
-------------- ------
--
-
------- -------
-------- -----
-------------- --------
-
-我们可以在主页面中编写以下代码，来加载并展示这些商品的信息：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------------
-------
------
-------------
---- ------------------------
------- --------------
------------------------
---------------- -- -
----- ----------- - ----------------------------------------
-------------------------- -- -
----- -------------- - ------------------------------
------------------------ - -
------------------------
---------------------- -----
--------------------------------
--
----------------------------------------
---
--
-------------- -- -
---------------------
---
---------
-------
-------我们可以在浏览器中打开该页面，即可看到展示了产品列表的网页。
总结
在 ECMAScript 2021 中，我们可以使用 import() 函数来动态加载各种模块，包括 JSON 文件。本篇文章主要介绍了如何使用 import() 函数来加载 JSON 文件，并通过实战示例来展示如何在网页中展示这些数据。深入理解这些知识点，可以帮助我们更好地实践前端开发，在实际工作中提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c37e3b83d39b4881780e80