JavaScript ES6中export与export default使用指南

JavaScript ES6中export与export default使用指南

1、概述

export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import {foo, bar} from './util/index'引用

存在两种 exports 导出方式：

1. 命名导出export function FunctionName(){...}（每个模块包含任意数量）
2. 默认导出export default expression;（每个模块包含一个）

2、export

一个文件中可以写多个export

在文件a.js中对外导出

export let name1 = '张三'; // 或者使用 var, const
export function FunctionName(){...}
export class ClassName {...}

在文件b.js中导入

import {name1,FunctionName,ClassName} from '../a.js';

注意以下写法会报错：

// 报错
export 1;

// 报错
var m = 1;
export m;

// 报错
function f() {}
export f;

3、export default

一个文件只能在尾部写一个export default

在文件a.js中对外导出

const str = "export default的内容";
function FunctionName(){...}
class ClassName {...}

export default {str,FunctionName,ClassName}

在文件b.js中导入

import name from '../a.js';

// 使用
console.log(name.str)
name.FunctionName();

4、export与export default区别

1.export与export default均可用于导出常量、函数、文件、模块等

2.在一个文件或模块中，export可以有多个，export default只在文件的尾部有一个

3.通过export方式导出，在导入时要加{ }，export default则不需要，并可以起任意名称

5、建议

1. 输出单个值，使用export default
2. 输出多个值，使用export
3. export default与普通的export不要同时使用

6、扩展

如果在首行使用 export default导出的方法不受影响，但是导出的const、let、var的值会变成undefined。

原因是在执行导出的这个文件时是从上往下执行，然而js编译时先编译function后编译逻辑，所以function不受印象，所以建议使用export default时放在文件的尾部。