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 123import 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阮一峰

export default function和export function的区别相关推荐

export、export default、module.export区别
在es6里面定义模块,导出模块时可以使用export.export default 这2者区别: 在同一个文件里面可以有多个export, 一个文件里面只能有1个export default 1 // ...
JS的export , export default,import，export（导出js）和import（引入js）完整用法
A.规范文件名我们确定我们有一个文件是common.js 这个文件在根目录的static文件夹下路径如下 |-根目录/static/common.js export(导出)和import(引入) ...
ES6 模块加载export 、import、export default 、import() 语法与区别，笔记总结
ES6模块加载export .import.export default .import() 语法与区别在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种. ...
export ，export default 和 import 区别以及用法
首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 ...
module.exports与exports，export与export default之间的关系和区别
CommonJS模块规范和ES6模块规范完全是两种不同的概念. CommonJS模块规范: 根据这个规范,每个文件就是一个模块,有自己的作用域.在一个文件里面定义的变量.函数.类,都是私有的,对其他文 ...
export ，export default 和 import 区别以及用法
首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 ...
require 动态加载_require,exports,module.exports和import,export,export default
我们前端在开发过程中经常会遇到导入导出功能, 在导入时,有时候是require,有时候是import 在导出时,有时候是exports,module.exports,有时候是export,export ...
module.exports 和 export default
CommonJS模块规范和ES6模块规范完全是两种不同的概念 CommonJS模块规范 Node应用由模块组成,采用CommonJS模块规范. 根据这个规范,每个文件就是一个模块,有自己的作用域.在一 ...
js模块化：默认导出 export default
前言接 js模块化:require.import和export 研究一下默认导出默认导出形式1:export { xx as default } 默认导出形式2:export default { ...
export、export default、import 的注意和require
export 暴露有两种形式,一个是声明,一个是直接暴露简写的对象,如下 //第一种:直接声明函数或者变量 export let a = 1; export let b = 1; export fun ...