默认导出和普通导出的区别

默认导出和普通导出的区别

一、为什么会出现默认导出和普通导出？

作为一个模块，可以选择性的给其他模块提供自己的属性和方法，供其他模块使用的作用

---

一、默认导出和普通导出是什么？

默认导出和普通导出是在模块化开发中常用的两种导出方式。

默认导出是指一个模块只能默认导出一个值或对象。在使用时，导入方可以自定义导入的名称，而不需要使用原模块中定义的名称。

二、使用步骤

1.例如，在一个名为module.js的模块中，我们可以使用export default关键字来默认导出一个函数：

代码如下（示例）：

// module.js
export default function add(a, b) {
    return a + b;
}

然后在另一个文件中，我们可以使用自定义的名称来导入该函数：例为main.js

// main.js
import myAddFunction from './module.js';

console.log(myAddFunction(2, 3)); // 输出 5

2.普通导出是指一个模块可以导出多个值或对象，并且在导入时需要使用原模块中定义的名称。例如，在一个名为module.js的模块中，我们可以使用export关键字来普通导出多个变量：

代码如下（示例）：

export const name = 'John';
export const age = 25;
export const country = 'USA';

2.然后在main.js文件中，我们需要使用相同的名称来导入这些变量

import { name, age, country } from './module.js';

console.log(name); // 输出 'John'
console.log(age); // 输出 25
console.log(country); // 输出 'USA'

---

总结

区别在于
1.默认导出只能导出一个值或对象，且只能导入一次，并且在导入时可以随便命名；
2.而普通导出可以导出多个值或对象，并且在导入时需要使用原模块中定义的名称。
3.普通导出需要用{}包裹变量名且普通导出同普通导入
4.默认导出在导入时不需要用{}包裹变量名，默认导出同默认导入
5.默认导出用export default来实现
注：在一个模块中，不能同时使用普通导出和默认导出