es6 module 的语法

es6 module 的语法
【原创版】
目录
1.ES6 模块的概述
2.ES6 模块的语法
3.ES6 模块的导入和导出
4.ES6 模块的优点
5.ES6 模块的应用示例
正文
1.ES6 模块的概述
ES6（ECMAScript 2015）是 JavaScript 语言的一个版本，它引入了许多新特性，其中包括模块化的支持。

模块化是指将程序划分为不同的独立模块，每个模块有自己的作用域和功能，可以方便地进行代码组织和管理。

在 ES6 之前，JavaScript 没有原生的模块化支持，开发者通常使用CommonJS、AMD 等第三方库来实现模块化编程。

ES6 的模块化支持使得原生 JavaScript 模块化变得更加简单和直观。

2.ES6 模块的语法
ES6 模块的语法主要包括以下两个方面：模块声明和模块导入/导出。

2.1 模块声明
在 ES6 中，可以使用`import`语句和`export`语句来声明模块。

`import`语句用于导入其他模块的变量或函数，而`export`语句用于导出本模块的变量或函数。

```javascript
// 导入模块
import { functionName } from "module";
// 导出模块
export function functionName() {
// 函数实现
}
```
2.2 模块导入/导出
在 ES6 模块中，可以使用`export default`语句来导出一个默认的导出值。

当导入时，可以使用`import`语句直接引用这个默认值。

```javascript
// 导出默认值
export default function functionName() {
// 函数实现
}
// 导入默认值
import functionNameDefault from "module";
```
此外，ES6 还支持跨模块导入，即在一个模块中导入另一个模块的默认导出值。

```javascript
// 导出默认值
export default function functionName() {
// 函数实现
}
// 导入默认值
import { functionNameDefault } from "./another-module";
```
3.ES6 模块的优点
ES6 模块化支持带来了以下优点：
- 更简洁的语法：ES6 模块声明和导入/导出语法更加简洁易懂，提高了代码可读性。

- 更好的兼容性：ES6 模块支持在各种现代浏览器中运行，不需要额外的库支持。

- 更高的性能：ES6 模块的实现是基于 JavaScript 原生实现的，因此性能更好。

4.ES6 模块的应用示例
以下是一个简单的 ES6 模块应用示例：
```javascript
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// main.js
import { add, subtract } from "./math.js";
console.log(add(1, 2)); // 输出：3
console.log(subtract(1, 2)); // 输出：-1
```
在这个示例中，我们创建了一个名为`math.js`的模块，其中包含两个函数：`add`和`subtract`。