ES6-Module

前端女孩

于 2022-11-14 10:01:36 发布

阅读量78

点赞数

分类专栏： webpack 文章标签： es6 javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45002586/article/details/127842134

版权

webpack 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了JavaScript的模块导入导出机制，包括常规导入导出和默认导入导出。讲解了如何通过`export`和`import`关键字进行模块间的数据交换，并演示了如何重命名导入的变量。同时强调了一个模块只能有一次默认导出，以及导入和导出名称的灵活性。

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

1、常规导出

（1)分开导入导出

	export xxx;
	import {xxx} from "path";

（2)一次性导入导出

	export {xxx, yyy, zzz};
	import {xxx, yyy, zzz} from "path";

如果想修改接收变量名，可以通过 xxx as newName方式，变量名被修改后，原有变量名自动失效。
a.js

	let name = "lnj";
	export {name};
	let age = 33;
	export {age};

index.js

	import {name} from "./a.js";
	
	import {name, age} from "./a.js";

修改变量名：

	import {name as str} from "./a.js";

2、默认导入导出

	export default xxx;
	import xxx from "path";

注意点:
一个模块只能使用一次默认导出, 多次无效。
默认导出时, 导入的名称可以和导出的名称不一致。

	let name = "lnj";
	let age = 33;
	function say() {
	    console.log("hi");
	}
	export {name, age, say};
	
	class Person {
	    constructor(){
	        this.name = "zs";
	        this.age = 18;
	    }
	}
	export default Person;

index.js

	// 两种方式混合使用
	import Person,{name, age, say} from "./c.js";