搞懂ES6的import export

引言

说来惭愧，这两个关键字几乎每天在写，可是本身写的模块export出去的对象，import竟然拿不到，也是没谁了😟。痛定思痛，仍是写篇博客加深一下记忆。

import的方式

import有如下几种使用方式：

import a from './module.js'

import {a} from './module.js'

import deflt, {a} from './module.js'

import * as a from './module.js'

export的几种方式

export const a = 1 //export后面是一个表达式

export function b(){} //export后面是一个函数声明语句

export default {c: 1} //export default

export default 后面不能跟赋值表达式

import到底import了谁

其实就是个连线题。一个模块export的对象有两种，一种是经过export default导出的，另外一种是经过export导出的。经过export default导出的能够用如下方式接收：

import defaultObj from 'module'

经过export导出的对象有如下两种接收方式：

// 导出
export const a = 1;


// 导入时

// 方式一
import * as md from 'module'

// md 拿到了全部用export方式导出的对象，这些对象都做为md的属性

md.a // 1

// 方式2，直接对*解构
import {a} from 'module'

搞两年前端了，这还没搞清楚，有点说不过去了。。

使用 as 重命名

有时候，模块里的变量名和本地的变量名可能会出现命名冲突，这时能够使用 as 关键字起个别名。能够给默认导出的default变量，导出的某一个模块变量，或者给*这个命名空间直接命名

import * as name from "module-name";
import defaultExport, * as name from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";

参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import