JS中的模块导出export与export default的区别

我们知道es6中增加了模块（module）体系，那在模块功能当中，最主要的是由import和export这两个命令组成。import用于输入其他模块提供的功能，export主要规定模块的对外接口
今天我们主要来谈谈export

export命令

export var name = 'chuichui'
// 等同于
var name = 'chuichui'
export {name}

第一种种导出的方法和第二种是等价的，但是更推荐第二种方法，较为清晰明了
export和export default有什么区别？

export default命令

为什么有这个指令呢？主要还是希望用户可以快速上手，在不需要知道模块的属性和方法的前提下，还能正常使用模块

//export.js
export default f(){
  console.log('chuichui')
}

// 加载以上模块的方法
import name from './export'

这里不管export.js中模块对外接口如何设置名称，只要使用了dafault，统统都变成匿名，import随便起个名称都可以正常使用

export与export default的区别

我们先看个例子

// export default 例子
//export.js
export default f(){
  console.log('chuichui')
}

// 加载以上模块的方法
import name from './export'

// export 例子
//export.js
export f(){
  console.log('chuichui')
}

// 加载以上模块的方法
import {f} from './export'

我们直观的可以看出
第一组中import 不需要{}，而第二组需要{}，为什么呢？
因为export default 用于指定模块的默认输出，一个模块只能有一个默认输出，import后面不加大括号，是因为只可能输出一个方法
本质上讲，export default 就是输出一个叫做default 的变量或者方法，然后系统允许我们任意修改它的名字

//export.js
f(){
  console.log('chuichui')
}
export default f
// 等同于
export {f as dedafult}

// 加载以上模块的方法
import {default as name } from './export'