JavaScript之export和import的简单使用

cloudOnSkyline

已于 2022-07-21 11:14:42 修改

阅读量2.3k

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2022-07-07 15:49:23 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125660224

版权

61 篇文章 0 订阅

订阅专栏

本文主要介绍JavaScript中export和import的使用，从而实现不同js文件之间的数据共享。

1.新建文件夹，在该目录下创建3个文件，如图所示

2.在1.js文件中定义一些数据，包括变量a和函数b,变量a的值为189，b函数的功能是实现任意数的累加和。定义完成后，通过export将a和b共享出去。

var a = 189;
var b = function(...value) {
    var sum = 0;
    for (let i of value) {
        sum += i;
    }
    return sum;
}
export { a, b }

3.在2.js文件中利用import获取a和b，即可使用

import { a, b } from './1.js';
console.log(a);
console.log(b(10, 20, 30, 40));

4.在2.html文件中引入2.js文件，type类型需改为“module”,最后通过浏览器执行（需要通过Web服务器打开）

 <script type="module" src="./2.js"></script>

执行结果如图：

注意点：

（1）通过as可修改变量名

（2）通过default可传递默认值，此时在接受时变量名可随便取

（3）传过去的数据具有只读属性，不可更改。但可修改引用数据类型中的数据

关注