通过本新手指南学习如何使用 JavaScript ES6 模块。了解导入和导出、默认导出与命名导出，并查看实际示例，从而编写简洁、现代的代码。
介绍
随着 JavaScript 项目规模的扩大，将所有内容都放在一个文件中很快就会变得混乱且难以管理。为了解决这个问题，ES6 模块应运而生。模块使开发人员能够将代码拆分成更小、可重用的块，从而更易于管理和扩展。
您将学到什么
ES6 模块是什么以及它们为何重要
如何使用export和import
默认导出和命名导出之间的区别
一个简单的现实世界模块示例
关于模块的常见初学者问题
什么是 ES6 模块？
模块就像独立的代码盒，可以在需要时使用。您可以将代码组织成更小的文件，而不必将所有内容都写在一个大文件中。每个模块负责处理特定的任务，从而使您的代码更简洁、更易于理解。
使用 JavaScript 导出
要与其他文件共享代码，您必须先将其导出。
命名导出：一个文件中可以存在多个导出。
Example:
// math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
默认导出：仅导出一个主值或功能。
例子：
// greet.js
export default function greet(name) {
return `Hello, ${name}!`;
}在 JavaScript 中导入
导出后，您可以使用import将代码导入另一个文件。
导入命名导出：
import { add, subtract } from './math.js';导入默认导出：
import greet from './greet.js';
真实案例：一个小应用程序
以下是不同模块如何协同工作。
math.js
export const multiply = (a, b) => a * b; export const divide = (a, b) => a / b;
greet.js
export default function greet(name) {
return `Welcome, ${name}!`;
}应用程序.js
import greet from './greet.js';
import { multiply, divide } from './math.js';
console.log(greet("Wisdom"));
console.log("5 x 4 =", multiply(5, 4));
console.log("20 ÷ 5 =", divide(20, 5));这表明将项目拆分成模块可以使事情变得整洁且易于管理。
为什么要使用模块？
模块很重要，因为它们使您的代码：
有条理：代码的每个部分都排列整齐。
可重复使用：您可以在不同的项目中使用相同的模块。
可维护：修复或更新一个模块可以改善整个项目。
关于 JavaScript ES6 模块的常见问题解答
1. JavaScript 中 import 和 require 有什么区别？
import是现代 ES6 加载模块的方式，并且内置于 JavaScript 中。require较旧且在支持 ES6 模块之前主要用于 Node.js。
2. 是否允许在一个文件中同时使用默认导出和命名导出？
是的，一个文件可以有一个默认导出和多个命名导出。
3. 为什么我的浏览器会显示“意外的令牌导出”错误？
type="module"您的浏览器可能不直接支持模块，或者您忘记在脚本标签中使用。例如：
< script type="module" src="app.js">
4. ES6 模块在所有浏览器中都能工作吗？
现代浏览器支持模块，但旧浏览器可能需要 Babel 或 Webpack 等工具才能兼容。
结论
JavaScript ES6 模块让您能够编写结构化的现代代码。通过使用export和import，您可以将项目拆分为更小、可复用的部分。这使得您的代码更易于阅读、测试和维护。
从简单的示例开始练习，导出一个函数并将其导入另一个文件。随着时间的推移，您将看到模块如何使您的编码工作流程更加专业，并符合当今的 JavaScript 标准。