javascript中，export和import的常见用法

今天聊一下，javascript语法里，export和import的使用方法

先提前说明一下，export是导出用的，import是导入用的。导出和导入的东西，可以是变量，也可以是函数。

在本篇文章中，我们有两个js文件：一个是1.js，负责导出；另外一个js文件是2.js，负责导入。

1、default 的导出

default在中文里面有“默认”、“缺省”的意思。

简单来说，就是不需要具体的名字。

所以，我们在导出的时候，可以直接export后面接一个变量，或者函数。

导入的时候，不需要保持变量名的一致，随意命名即可。

//1.js
const k = 1;
export default 1;

//2.js
import haha1 from './1.js'
console.log(haha1);

//1.js
const k = 1;
export default k;

//2.js
import haha1 from './1.js'
console.log(haha1);

//1.js
export default function hanshu(params) {
    console.log(123);
};

//2.js
import haha1 from './1.js'
haha1();

//1.js
export default function(params) {
    console.log(123);
};

//2.js
import haha1 from './1.js'
haha1();

//1.js
const k = 1;

function haha() {
    console.log('print haha');
}

export default { k, haha, num: '123' };

//2.js
import haha1 from './1.js'

haha1.haha();
console.log(haha1.num);
console.log(haha1.k);

//1.js
const k = 1;

function haha() {
    console.log('print haha');
}

export default { k, haha, num: '123' };

//2.js
import haha0 from './1.js'

console.log(haha0);

以上这几个写法都是OK的。简单来记：

使用default导出时，导出的内容是一个对象就可以了；

导入的时候，任意命名一个变量，把导出的对象“接住”就可以了。

但是，一定要注意：export default 在同一个js文件中，只能使用一次。

2、不带default的导出

没有default的修饰，在导入导出的时候，就需要保持变量名一致了。

//1.js
export const j = 2;

//2.js
import { j } from './1.js'

console.log(j);

//1.js
export function haha1() {
    console.log('haha1 func');
};

//2.js
import { haha1 } from './1.js'

haha1();

//1.js
const k = 1;

function haha1() {
    console.log('print haha');
}
export { k, haha1 };

//2.js
import { k, haha1 } from './1.js'

haha1();

//1.js
const k = 1;

function haha1() {
    console.log('print haha');
}
export { k, haha1 };

//2.js
import { k } from './1.js'

console.log(k);

以上这几个写法都是OK的。

请注意：2.js 在导入的时候，一定要加花括号。

由于不是默认导出，所以，变量名要跟import的变量名保持一致。

3、最后总结

js的语法非常灵活，使用export和import进行的操作，还有很多其它的写法。篇幅有限，不可能一一穷尽。

如果文章中列出的这些写法都可以理解的话，那么，对于export和import的使用，基本就没有什么问题了。