JavaScript ES6 模块

本文被收录到:

JavaScript 教程

JavaScript 是互联网上最流行的编程语言。使用 JavaScript 可以开发网站、APP、小程序、游戏和服务器端。写这个教程是为了提高自己的 JavaScript 编程水平,而最好的学习方法就是“费曼学习法”,以教代学,以输出倒逼输入。最近日渐成熟的 AI 工具,刚好成为我写这个教程锦上添花。

目录

JavaScript 的 import 和 export 语句是ES6(ECMAScript 2015)引入的特性,它们用于实现模块化编程,允许你将代码分割成可重用的组件。下面是一个关于如何使用 import 和 export 的基本教程。

导出(Export)

导出允许你从一个模块中共享指定的函数、对象或变量到其他模块。

导出单个实体

// 命名导出
export const add = (a, b) => a + b;

// 或者
function subtract(a, b) {
  return a - b;
}
export { subtract };

默认导出

每个模块只能有一个默认导出。它通常是模块的主要输出。

export default function multiply(a, b) {
  return a * b;
}

导入(Import)

导入语句用于从其他模块获取导出的实体。

导入命名导出

// 导入单个命名导出
import { add } from './math.js';
console.log(add(2, 3)); // 输出: 5

// 导入多个命名导出
import { add, subtract } from './math.js';
console.log(subtract(5, 7)); // 输出: -2

// 重命名导入的实体
import { add as sum } from './math.js';
console.log(sum(4, 5)); // 输出: 9

导入默认导出

import multiply from './math.js';
console.log(multiply(3, 4)); // 输出: 12

// 也可以与命名导出一起使用
import multiply, { add } from './math.js';

通配符导入

如果你想要从一个模块中导入所有导出的实体,可以使用通配符*,但这样做不鼓励,因为它可能导致命名冲突且不易追踪依赖。

import * as math from './math.js';
console.log(math.add(2, 3)); // 输出: 5

注意事项

  • 文件路径: 导入和导出的路径应该是相对的或绝对的,并且通常基于文件系统结构。
  • 模块解析: Node.js和浏览器在解析模块路径时有所不同,Node.js遵循其特定的规则,而浏览器主要依据<script type="module">标签的src属性。
  • 类型: import和export仅在ES模块(.mjs文件或通过type: "module"声明的脚本)中有效。在传统的CommonJS模块(Node.js中常见的.js文件)中,应继续使用require和module.exports。

掌握import和export是进行现代JavaScript开发的基础,能帮助你编写更清晰、可维护的代码。

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
763 文章
4 教程
8 项目
随机推荐
JavaScript 类
WordPress 主题激活和取消激活钩子
阿里云内容安全 API 签名机制
WordPress 添加自定义接口
WordPress 分页
JavaScript 原型链
JavaScript audio 教程
HTML select 下拉列表