正文

es6 import 与 export

IP云
IP云V管理员/3 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、export 命令

export 命令用于规定模块的对外接口。

一个模块就是一个独立的文件。该文件内部所有的变量，外部无法获取。要想外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。

语法： 

 1 export { name1, name2, …, nameN };

 2 export { variable1 as name1, variable2 as name2, …, nameN };

 3 export let name1, name2, …, nameN; // also var

 4 export let name1 = …, name2 = …, …, nameN; // also var, const

 5

 6 export default expression;

 7 export default function (…) { … } // also class, function*

 8 export default function name1(…) { … } // also class, function*

 9 export { name1 as default, … };

10

11 export * from …;

12 export { name1, name2, …, nameN } from …;

13 export { import1 as name1, import2 as name2, …, nameN } from …;

nameN ---> 导出的标识符（用来被其它脚本的 import 导入） 

//aa.js

export var firstName = "Muhan"

export var lastName = "Wu"

export var year = 2017

在 aa.js 文件中，保存了用户信息，es6 将其视为一个模块，用 export 命令对外输出 3 个变量。我们还可以用另外一种写法来实现 

//aa.js

var firstName = "Muhan"

var lastName = "Wu"

var year = 2017

export {firstName, lastName, year}

这种写法在 export 命令后面使用大括号指定所要输出的一组变量，应该被优先考虑，因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量

export 命令除了输出变量，还可以输出函数或类（Class）

在 my-module.js 模块里，我们可以这样导出 

// my-module.js

export function cube(x) {

  return x*x*x

}

const foo = Math.PI + Math.SQRT2

export {foo}

在其它脚本，我们可以这样导入： 

import {cube, foo} from './my-module.js'

console.log( cube(3) ) // 27

console.log( foo )  // 4.555806215962888

通常情况下，export 输出的变量就是本来的名字，但是可以使用 as 关键字来重命名 

// my-module.js

function aa () {

  console.log('My name is Kobe Bryant')

}

function bb () {

  console.log('I am one of the best players in NBA history')

}

export {

  aa as personName,

  bb as selfIntro,

  bb as selfEvaluation

上面代码使用 as 关键字，重命名了函数 aa 和 bb 的对外接口。重命名后，bb 可以用不同的名字输出两次 

import {personName, selfIntro, selfEvaluation} from './my-module'

personName()  // My name is Kobe Bryant

selfIntro()   // I am one of the best players in NBA history

selfEvaluation()   // I am one of the best players in NBA history

注意：

（1）、export 命令规定的对外接口，必须与模块内部的变量建立一一对应的关系 

// 报错，SyntaxError

export 1

// 报错，SyntaxError

var m = 1

export m

/* ================================= */

// 正确写法一

export var m = 1

// 正确写法二

var m = 1

export {m}

// 正确写法三

var m = 1

export {m as num}
// 报错

function myFun () {

  // ...

}

export myFun

// 正确写法一

export function myFun () {

  // ...

}

// 正确写法二

function myFun () {

  // ...

}

export {myFun}

（2）、export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错（同样适用于 import 命令） 

function foo() {

  export default 'bar' // SyntaxError

}

foo()

// Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level

2、import 命令

import 用于从一个已经导出的外部模块或另一个脚本中导入函数，对象或原始类型

使用 export 命令定义了模块的对外接口以后，其它 js 文件就可以通过 import 命令加载这个模块

语法： 

1 import defaultMember from "module-name";

2 import * as name from "module-name";

3 import { member } from "module-name";

4 import { member as alias } from "module-name";

5 import { member1 , member2 } from "module-name";

6 import { member1 , member2 as alias2 , [...] } from "module-name";

7 import defaultMember, { member [ , [...] ] } from "module-name";

8 import defaultMember, * as name from "module-name";

9 import "module-name";

defaultMember

将引用从模块默认导出的名称

module-name

要导入的模块的名称

name

是将引用导出成员的名称，指向导入模块的对象的名称

member，memberN

指定独立成员，将要导入的导出成员的名称

alias，aliasN

将引用命名导入的名称 

// my-module.js

var firstName = "Muhan",

    lastName = "Wu",

    year = 2017;

export {firstName, lastName, year}

// 引用模块

import {firstName, lastName, year} from './my-module'

console.log('My name is '+firstName+lastName+ ', I am '+year+' years old!')   // My name is MuhanWu, I am 2017 years old!

同 export 命令一样，如果想为输入的变量重新取一个名字，import 命令要使用 as 关键字，将输入的变量重命名 

// my-module.js

var aa = "Kobe Bryant"

export {aa}

---------------------------------------------------------------

import {aa as name} from './my-module'

console.log('My name is '+ name)   // My name is Kobe Bryant

注意：

（1）、import 命令具有提升效果，会提升到整个模块的头部，首先执行 

// my-module.js

var aa = "Kobe Bryant"

export {aa}

------------------------------------------------------

console.log('My name is '+ aa)   // My name is Kobe Bryant

import {aa } from './my-module'

上面的代码没有报错，因为 import 的执行早于 aa的调用

（2）、由于 import 是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构 

// 报错

import { 'f' + 'oo' } from 'my_module';

// 报错

let module = 'my_module';

import { foo } from module;

// 报错

if (x === 1) {

  import { foo } from 'module1';

} else {

  import { foo } from 'module2';

}

（3）、如果多次重复执行同一句 import 语句，那么只会执行一次，不会执行多次 

import { foo } from 'my_module';

import { bar } from 'my_module';

// 等同于

import { foo, bar } from 'my_module';

3、export default 命令

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出 

// my-module.js    默认输出是一个函数

export default function () {

  console.log('export default')

}

------------------------------------------------------------

// 其他模块加载该模块时，import命令可以为该匿名函数指定任意名字

import aaa from './my-module'

aaa()   // export default

上面的 import 命令，可以用任意名称指向 my-module.js 输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时 import 命令后面，不适用大括号

export default 命令用在非匿名函数前，也是可以的 

// my-module.js    默认输出是一个函数

export default function myFun () {

  console.log('Hello World!')

}

// 或者写成

function myFun () {

  console.log('Hello World!')

}

export default myFun

----------------------------------------------------------------

import myFun from './my-module'

myFun()   // Hello World!

上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。

下面比较一下默认输出和正常输出 

// 第一组

export default function crc32() { // 输出

  // ...

}

import crc32 from 'crc32'; // 输入

// 第二组

export function crc32() { // 输出

  // ...

};

import {crc32} from 'crc32'; // 输入

上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号

一个模块只能有一个默认输出，所以 export default 命令只能使用一次，正因为如此，import 命令后面才可以不用加大括号。本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。 

// modules.js

function add(x, y) {

  return x * y;

}

export {add as default};

// 等同于

// export default add;

// app.js

import { default as xxx } from 'modules';

// 等同于

// import xxx from 'modules';

下面代码中，export default a的含义是将变量a的值赋给变量default。所以，最后一种写法会报错。 

// 正确

export var a = 1;

// 正确

var a = 1;

export default a;

// 错误

export default var a = 1;

同样地，因为export default本质是将该命令后面的值，赋给default变量以后再默认，所以直接将一个值写在export default之后 

// 正确

export default 42;  // 指定对外接口为 default

// 报错

export 42;  // 没有指定对外的接口

注意：import 和 export 目前无法直接在浏览器中实现，而是需要通过转换器，如：Traceur Compiler、Babel、RollUp或 Webpack

相关阅读

目录[+]