如题所示,这三种导入方式使用很常见,那么这三种方式有什么区别呢?
- 第一种 import *** from '***'
一般这种情况都证明在要导入的这个文件里有默认导出的语法存在,即存在export default语法
// a文件
const a = { name: '张三', age: 12 }
export default a;
// b文件
import a from '/a.js'
console.log(a) // { name: '张三', age: 12 }
这里需要注意的是 b文件导入的名字要与a文件导出的名字保持一致,否则导出不正确,会报错
2. 第二种 import {***} from '***'
这种情况是在a文件中定义了很多函数或变量,没有默认导出的模块,在b文件中导入时可按需导入,用那个导入那个
// a文件
export const a = (arg0) => {
return arg0 *100
}
export const b = [{ name: '马冬梅', age: 18 }, { name: '夏洛', age: 30 }]
// b文件
import { a } from '/a.js'
console.log(a(10)) // 1000
- 第三种 import * as *** from '***'
这种通常跟第二种很类似,只是把a文件里所有定义的函数或变量包装到了一个对象中,不需要单独一个一个去确定要导出的方法或属性名称,
// a文件
export const a = 1
export const b = '2'
export const c = true
// b文件
import * as module from '/a.js'
console.log(module.a) // 1
console.log(module.c) // true