逍遥阁

ES6之export和import

关键词: export import

ES6之export和import

###export

1.定义变量时就导出的语法

```
export var 变量名 = 值;
```

2.定义函数时就导出的语法

```
export function multiply(x, y){
    return x * y;
};
```

3.如果不是定义时导出，export一般必须加`{}`，`export default`的情况除外

```
export {
    变量1,
    变量2 as 别名,
    函数名1,
    函数名2 as 别名
};
```

4.下面是错误的一些写法

```
export 100;
export 变量;
export 函数名;
```

5.export default

假设模块test导出了一个函数，匿名函数或者非匿名函数都可以

```
export default function(){
    console.log('default');
}

/*或者*/

function a(){
    console.log('a');
}
export default a;
```

这个时候可以为该函数指定任意名字

```
import f from './test';
f();
```

使用export default时对应的import语句不需要使用大括号

不使用export default时对应的import语句需要使用大括号

export default命令只能使用一次

export default命令后面不能跟变量声明语句

export default本质上就是输出一个叫做default的变量或方法，系统允许你为它取任意名字，所以

`export { 函数名 as default };`等同于`export default 函数名;`

`import { default as 别名 } from 'test';`等同于`import 别名 from 'test';`

###import

1.提升的特性

import命令是编译阶段执行的，在代码运行之前，具有提升效果，会提升到整个模块的头部首先执行

2.不能使用表达式和变量

由于import是静态执行，所以不能使用表达式和变量

下面的写法都是错误的

```
import { 'a' + 'b' } from 'test';

/*或者*/

let module = 'test';
import { ab } from module;

/*或者*/

if(x === 1){
    import { a } from 'm1';
}
else{
    import { b } from 'm2';
}
```

3.执行特性

import语句会执行所加载的模块

```
import 'test';
```

上面的代码仅仅执行test模块，而不导入任何值，如果执行同样的模块多次，只会执行一次

4.从文件导入模块的写法

```
import { 变量1, 变量2 } from './test';
import { 变量 as 别名 } from './test';
import { 变量 } from './test';
```

需要注意的是只需写模块的文件名，不需要写拓展名

大括号里面的变量名必须与被导入模块`test.js`对外export的名称相同

import后面的`{}`一般不能省掉，除非是`export default`的情况

5.模块的整体加载

```
import * as temp from './test';
```

假设模块test导出了变量a和函数b，则可以像下面这样使用

```
console.log(temp.a);
temp.b();
```

需要注意的是不能修改`temp`这个对象

6.一些正确的写法

```
export default 100;
export default 变量;
export default class {}
export { a as b } from 'test';/*接口改名*/
export * from 'test';/*整体输出，会忽略test模块的default方法*/
export { default } from 'test';/*默认接口的写法*/
export { a as default } from 'test';/*具名接口改为默认接口的写法*/
export { default as a } from 'test';/*默认接口改名为具名接口*/
export const A = 1;
export const A = {name:"test"};/*这个常量是一个对象*/
export const A = [1,2];/*这个常量是一个对象*/
import { stat, exists, readFile } from 'fs';
```

7.一些错误的写法

```
export 100;
export default var test = 100;
```

8.同时输入默认方法和其他变量

```
import 变量, { 变量 } from 'test';
```

9.export与import的复合写法

```
export { a, b } from 'test';

/*等同于*/

import { a, b } from 'test';
export { a, b };
```

10.import和export的共同点

import和export命令只能在模块的顶层，不能在代码块之中，比如在if代码块之中或在函数之中

admin
2017-02-20 17:42:20
javascript

文章分类

文章标签

文章归档

友情链接

ES6之export和import