js导入import *** from '***'、import { *** } from '***'和import * as *** from '**'的区别

143 阅读1分钟

如题所示,这三种导入方式使用很常见,那么这三种方式有什么区别呢?

  1. 第一种 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
  1. 第三种 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