export default function和export function的区别

1.一个模块中export default只能有一个，export可以有多个

// demo01.js
export const num1 = 1;
export const num2 = 12;
export const num3 = 123;

const address = '北京市';
export default address;

// demo02.js
import { num1,num2,num3 } from './demo01.js';
console.log(num1,num2,num3) // 1 12 123

import add from './demo01.js';
console.log(add); // '北京市'

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字，正因为可以取任何名字，所以在一个文件中只可以使用一个default。

看个例子，你就明白了
例子1：

// demo01.js
export default function () {
  return 'good'
}

// demo02.js
// 系统是允许修改名字的，我们把他的名字改成add
import add from './demo01.js';
console.log(add()); // 'good'

例子2：
下面我们用export default导出2个变量，浏览器会报错Uncaught SyntaxError: Identifier '.default' has already been declared

// demo01.js
const tell = '10110';
export default tell;

const address = '北京市';
export default address;

// demo02.js
import info from './demo01.js';
console.log(info); 

2.export default不可以声明变量导出，export 可以

export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

export default a = 1
export default const a = 1
export const b = 1

export default a的含义是将变量a的值赋给变量default。所以，第二种写法会报错
同样地，因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后。

export default 12

3.用export default时，import引入不加{}，export时，需要加{}

// 第一组
export default function fn1() {}; // 输出
import fn1 from 'file1'; // 输入

// 第二组
export function fn2() {}; // 输出
import {fn2} from 'file2'; // 输入

上面代码的两组写法

• 第一组是使用export default时，对应的import语句不需要使用大括号；
• 第二组是不使用export default时，对应的import语句需要使用大括号。

参考文章：

ES6阮一峰