ES6引入了原生的模块化机制,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输 出的变量。 ES6使用export和import来导出和导入模块。ES6的模块自动开启严格模式。

export 导出模块

a.js

//导出数摒
export let myName = "Tom";
export let myAge = 20;

//导出函数
export function sum(num1, num2) {
return num1 + num2;


//导出类
export class Myclass {
constructor(length, width) {
this.length = length;
this.width = width;



//未导出,私有模快,无法从模抉外部访问
function sub(num1, num2) {
return num1 - num2;


//不必总是导出声明,可以导出引用
function mul(num1, num2) {
return num1 * num2;

export { mul }

import 导入模块

b.js

import { sum, mul, myAge} from "./a.js";
console.log(sum(1, myAge)); //21
console.log(mul(1, 2)); //2

重命名 as

a.js

function sum(num1, num2) {
return num1 + num2;

//as XX: 指定函数在模块外的名称
export {sum as add};


b.js

//导入时,须使用新名称add
import {add} from "./a.js";
a.js

function sum(num1, num2) {
return num1 + num2;

export {sum};

b.js

//as XX: 导入时重命名
import {sum as add } from "./a.js";
console.log(add(1, 2)); // 3

默认值default

//default关健字表示默认导出,每个模块只能设置一个默认的导出值

a.js

export default function(num1, num2) {
return num1 + num2;


//或者
function sum(num1, num2) {
return num1 + num2;


export default sum;



b.js

//导入默认值,注意这里没有使用大括号
import sum from "./a.js";
console.log(sum(1, 2)); // 3

import导入均为只读

import { a } from "./xx.js"
a = {};//error
import { a } from "./xx.js"
a.foe = "hello"; //a = { foo:'hello'}
//对象不能重新赋值(地址引用),但可以增删其中的属性。