一、概述

在ES6中，export和export default都用于导出常量、函数、文件、模块等。
export和export default都可以用import导入。

二、export

每个模块都是独立的文件。该文件内部的所有变量外部无法获取。外部想读取某个模块内部的变量，就必须使用import导入该变量。在一个文件中，可以有多个export。export可以导出一个变量，也可以导出一个方法。export命令规定的是对外的接口，必须与模块内部的变量建立一一对应的关系。export有两种模块导出方式：命名式导出（名称导出）和默认导出（定义式导出），命名式导出每个模块可以多个，默认导出每个模块仅一个。

命名式导出

   //demo.js
   //写法一
   export var str = 'demo';
   export var data = '2';
   export function timePicker() {
     return 'update'
   }
   
   //写法二
   var str= 'demo';
   var data = '2';
   function timePicker() {
     return 'update'
   }
   
   export { str,data,timePicker }

通常情况下，使用export导出的变量名可以直接使用，如果想要修改变量名可以使用as关键字进行修改。

exoprt导出时可以直接修改。

   export {
      str as newStr,
      data as newData,
      timePicker as newTimePicker
   }

import导入时也可以进行修改。

 import {
     str as newStr,
     data as newData,
     timePicker as newTimePicker
 } from 'demo.js'

三、export default

export default命令用于指定模块的默认输出。一个模块只能有一个默认输出，export default命令只能使用一次。所以使用import导入时不加{}，因为唯一对应export default命令。一个文件只能有一个export default。

默认导出

 //匿名函数
 export default () => {}
 //具名函数
 const str = function () {
   console.log('000')
 }
 export default str
 
 //导入   导入默认导出的值时，最大的特点就是不用添加大括号，同时定义的变量名也不用一一对应。
 import str form 'demo'

具名函数导出不能写成以下形式，因为默认导出不支持使用关键字定义变量，但是可以使用function来定义一个函数

 export default let a = () => {}

四、区别

在一个文件中，export、import可以有多个，export default只能有一个。
export导出，用import导入时加{}，export default导出，导入时不需要加{}，因为只对应唯一的export default命令，export default本质是输出一个叫default的变量或方法。
输出单个值用export default，输出多个值用export
export暴露的是一个接口，export default暴露的是一个变量。

export和export default的区别

一、概述

二、export

三、export default

四、区别