从js和json中引入数据的区别

在前端开发中，你可以使用 JavaScript 来从 JSON 文件中引入数据。以下是一个基本的示例，演示如何从 JSON 文件中加载数据：

假设你有一个名为 data.json 的 JSON 文件，其中包含一些数据，如下所示：

{
  "name": "John Doe",
  "age": 30,
  "email": "john@example.com"
}
1
2
3
4
5

你可以使用 JavaScript 来从这个 JSON 文件中加载数据，并在你的应用程序中使用它。以下是一个示例代码：

// 引入 JSON 文件
import data from './data.json';

// 在这里你可以使用从 JSON 文件中加载的数据
console.log(data.name); // 输出 "John Doe"
console.log(data.age);  // 输出 30
console.log(data.email); // 输出 "john@example.com"
1
2
3
4
5
6
7

在上述示例中，我们使用 import 语句来引入名为 data.json 的 JSON 文件。然后，我们可以通过 data 变量来访问 JSON 文件中的数据。

请确保你的开发环境支持 ES6 模块语法，并且 JSON 文件的路径是正确的。此外，通常在开发中，你可能需要使用异步请求从服务器或外部 API 加载 JSON 数据，这时可以使用 AJAX 或 Fetch API 来实现。

如果你是在Node.js环境中操作，你可以使用 require 来引入 JSON 文件的数据：

const data = require('./data.json');
1

这个方法适用于Node.js环境中。在浏览器环境中，import 和异步请求是更常见的做法。

---

在 JavaScript 中，你可以使用 export 来导出数据，以便在其他文件中引入并使用。以下是一个示例，演示如何在一个文件中导出数据，然后在另一个文件中引入和使用它：

示例1: 导出数据

// FileA.js

// 导出一个变量
export const name = 'John';

// 导出一个函数
export function sayHello() {
  return `Hello, ${name}!`;
}
1
2
3
4
5
6
7
8
9

在上述示例中，我们使用 export 将变量 name 和函数 sayHello 导出，以便其他文件可以引入它们。导出的是一个对象，对象里面的属性名是export时定义的名字

示例2: 引入并使用数据

// FileB.js

// 引入导出的数据
import { name, sayHello } from './FileA';

console.log(name); // 输出 'John'
console.log(sayHello()); // 输出 'Hello, John!'
1
2
3
4
5
6
7

在上述示例中，我们使用 import 语句从 FileA.js 文件中引入了 name 变量和 sayHello 函数，并在 FileB.js 中使用它们。

这是一种常见的方法，用于在 JavaScript 中导出和引入数据，以实现模块化的代码结构。请确保两个文件在同一目录或已正确指定路径。如果你在浏览器中使用 ES6 模块，你可以使用 type="module" 属性来启用模块化加载。如果你在 Node.js 环境中操作，你可以使用 require 和 module.exports 来实现相似的导入和导出。

---

使用 export default 语法可以导出模块的默认值。这意味着一个模块可以只有一个默认导出，并且当其他模块导入时不需要使用大括号 {} 包裹导入的变量或函数。下面是一个示例，演示如何使用 export default 导出和引入默认值：

示例1: 导出默认值

// FileA.js

// 导出默认值
const name = 'John';
export default name;
1
2
3
4
5

在上述示例中，我们使用 export default 导出了 name 变量作为默认值。

示例2: 引入默认值

// FileB.js

// 引入默认值，不需要使用大括号
import name from './FileA';

console.log(name); // 输出 'John'
1
2
3
4
5
6

在上述示例中，我们使用 import 语句从 FileA.js 文件中引入默认值 name，而不需要使用大括号 {} 包裹导入的变量。

请注意以下几点关于 export default 的使用：

1. 一个模块只能有一个默认导出。如果模块中包含默认导出，你无法再使用 export 语句来导出其他变量或函数作为默认值。

2. 在引入默认值时，你可以为默认值起任意名字。在示例2中，我们起名为 name，但你可以使用任何合法的标识符名称。

3. 默认导出通常用于导出一个主要功能、类或对象，而命名导出用于导出多个相关功能。你可以根据具体需求来选择导出方式。

使用 export default 语法有助于简化模块的导入和引用，尤其当模块中只有一个主要功能需要导出时。