工作日常--es6学习总结

最新推荐文章于 2022-04-01 19:52:37 发布

原创最新推荐文章于 2022-04-01 19:52:37 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#es6 #工作

js学习专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了ES6中模块化的实现方式，包括如何通过不同写法导出和导入变量及函数，并展示了各种实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`export`规定模块对外的接口

输出变量

写法1

~
export const name = 'fredZhao';
export const age = 23;
export const number = 233;
~

写法2

~
const name = 'fredZhao';
const age = 23;
const number = 233;
export {name,age,number}
~
将该模块的三个参数暴露给外部调用

输出函数

写法1

~
export function(x,y){
rturn x * y;
}
~

写法2

~~~
function fun1(){
return 2;
}

function fun2(){
return 2;
}
export {
fun1 as number1,
fun2 as number2，
funN as number3
}

// 使用as关键字给导出的函数重新命名。在重新命名下，同一个函数可以被输出两次
~~~

写法3

~
// 输出变量
// -- 1
var num = 1;
export {num};
// --2
export var foo = bar
setTimeout(()=> foo = 'num',2000);
~
~~ES6中输出的变量，需要与模块内部有关联，在两秒后foo会变成num~~

==需要注意的是，该方法不能出现在块级作用域中==

`import`加载`export`暴露在外的模块

导入模块

写法1

import {name,age,number} form './profile';
// 可以给导入的模块重新命名
import {name as userName} from './profile';

导入另一个文件暴露给外部的模块

写法2

~
import * as circle from './circle';
// 导入circle文件的所有模块
// 调用方法
circle.fun1;
circle.fun2;
~