默认导出和普通导出的区别
一、为什么会出现默认导出和普通导出?
作为一个模块,可以选择性的给其他模块提供自己的属性和方法,供其他模块使用的作用
文章目录
一、默认导出和普通导出是什么?
默认导出和普通导出是在模块化开发中常用的两种导出方式。
默认导出是指一个模块只能默认导出一个值或对象。在使用时,导入方可以自定义导入的名称,而不需要使用原模块中定义的名称。
二、使用步骤
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来实现
注:在一个模块中,不能同时使用普通导出和默认导出