总结js的export、impor作用和使用方法
时间: 2023-05-19 15:02:50 浏览: 71
export和import是ES6中用于模块化开发的关键字,用于导出和导入模块中的变量、函数、类等。
export用于将模块中的变量、函数、类等导出,可以使用以下方式:
1. 导出单个变量、函数或类:
export const name = 'John';
export function sayHello() {
console.log('Hello!');
}
export class Person {
constructor(name) {
this.name = name;
}
}
2. 导出多个变量、函数或类:
const name = 'John';
function sayHello() {
console.log('Hello!');
}
class Person {
constructor(name) {
this.name = name;
}
}
export { name, sayHello, Person };
3. 导出默认变量、函数或类:
export default function sayHello() {
console.log('Hello!');
}
import用于导入模块中的变量、函数、类等,可以使用以下方式:
1. 导入单个变量、函数或类:
import { name, sayHello, Person } from './module.js';
2. 导入多个变量、函数或类:
import * as module from './module.js';
console.log(module.name);
module.sayHello();
const person = new module.Person('John');
3. 导入默认变量、函数或类:
import sayHello from './module.js';
以上就是export和import的作用和使用方法的总结。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)