es6的导入导出
时间: 2023-06-30 16:16:52 浏览: 47
ES6 中的模块化系统采用了 import 和 export 语句来实现模块的导入和导出。
1. 导出
使用 export 语句可以将一个模块中的变量、函数或类导出,以便其他模块可以使用它们。例如:
```javascript
// 导出单个变量
export const name = 'Tom';
// 导出多个变量
const age = 18;
const gender = 'male';
export { age, gender };
// 导出函数
export function sayHello() {
console.log('Hello!');
}
// 导出类
export class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
```
2. 导入
使用 import 语句可以从其他模块中导入变量、函数或类。例如:
```javascript
// 导入单个变量
import { name } from './module.js';
// 导入多个变量
import { age, gender } from './module.js';
// 导入默认导出
import Person from './module.js';
// 导入所有导出
import * as module from './module.js';
```
其中,"./module.js" 是要导入的模块的路径,需要根据实际情况进行修改。
- 如果一个模块只有一个默认导出,可以使用 import default 语法直接导入默认导出。例如:`import Person from './module.js';`
- 如果一个模块有多个导出,可以使用 import * as 语法导入所有导出,然后通过 module.name、module.age 等语法来访问它们。例如:`import * as module from './module.js';`
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)