javascript - 为什么JS代码中导入JSON文件需要默认

Question

我有一个 JSON 数据，可以从中获取 API 。但是，当我将此链接的内容复制到本地文件并将其另存为 JSON，然后在 JS 中导入时，如下所示:

import * as data from "./data.json" assert { type: "json" };

console.log(data)

我在控制台中获取一个模块，其中默认参数包含我的 JSON 对象。

但是当我这样做时:

import * as data from "./data.json" assert { type: "json" };

console.log(data.default)

然后只有我可以像平常一样查看我的 JSON 对象，即如果我这样做，输出会是什么:

async function populate() {

  const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
  const request = new Request(requestURL);

  const response = await fetch(request);
  const superHeroes = await response.json();
  console.log(superHeroes)
}

populate();

为什么会发生这种情况？有没有更好的方法来导入 JSON 文件，以便我可以在代码中访问它？

Answer 1

发生这种情况是因为 import * as 行导入 an_entire_modules_contents由于缺少显式导出默认值，default 属性与 json 文件的内容一致。如果您希望 data 变量包含您的 json 文件，您可以使用:

import {default as data} from "./data.json";
console.log(data); //<-- it will print the content of your json file

或者下面的简单简写:

import data from "./data.json";