在 ES6 中，模块化编程已经成为了前端开发中必不可少的一部分。通过模块化的方式进行代码的组织和管理，可以减少代码的冗余度，提高代码的可维护性和可扩展性。在模块化编程中，import 和 export 是两个重要的概念，用于模块之间的数据交互和代码复用。本文将详细介绍 import 和 export 的用法，以及注意事项和示例代码。
1. import 与 export 的基本用法
在模块中，通过 export 将模块内部的变量、函数或类等暴露给外部使用，通过 import 将其它模块导出的变量、函数或类等引入到当前模块中使用。下面是一个简单的示例代码：
-- -------------------- ---- ------- -- -- ---- ------ ----- ---- - ------- ------ -------- ---------- - ------------------- ----------- - -- -- ---- ------ - ----- -------- - ---- --------- ------------------ -- ------ ----------- -- ------ -----
我们在模块 a.js 中使用 export 将 name 和 sayHello 两个变量导出，然后在模块 b.js 中使用 import 引入 a.js 模块导出的变量和函数，并在 b.js 中使用。可以看出，import 和 export 是非常简单易用的，同时也遵循了 ES6 中的一个原则：工具单一性（Single Responsibility Principle）。
除了导出单个变量、函数或类，还可以通过 export 导出多个变量、函数或类：
export {name, sayHello};也可以通过 default 关键字，导出模块的默认输出：
// 模块 a.js const name = 'Kobe'; export default name; // 模块 b.js import name from './a.js'; // 导入模块的默认输出 console.log(name); // 'Kobe'
在模块 a.js 中使用 export default 导出模块的默认输出，在模块 b.js 中使用 import <name> from '<path>'; 的方式导入模块 a.js 的默认输出。
还可以将多个变量、函数或类通过默认输出的方式导出：
-- -------------------- ---- -------
------ ------- -
----- -------
---------- -
------------------- ----------------
-
--
-- ------
------ ----- ---- ---------
----------------- -- ------ -----2. import 和 export 的注意事项
在使用 import 和 export 是需要注意一些细节问题：
import和export只能在模块的最外层作用域使用，不能在函数、循环、判断等作用域中使用。import语句会进行变量提升（Hoisting），即可以将import语句放到代码的任意位置，JavaScript 引擎都会将其提前到当前作用域的顶部执行。import引入的模块只会在第一次被执行，后续多个import引入模块时，不会重新执行模块中的代码，而是直接使用缓存中的代码。import和export的名称必须与被导出的模块名称保持一致，否则会导致代码执行错误。
3. import 和 export 的高级用法
除了基础用法外，import 和 export 还可以实现一些高级用法，例如：
1. 动态 import
动态 import() 是 ES10 中新增的语法，可以在运行时异步地引入其它模块。由于动态 import() 是异步执行的，因此可以解决部分性能问题和代码不必要的加载问题。
// 动态引入模块
async function sayHi() {
const {default: myModule} = await import('./myModule.js');
myModule.sayHi();
}上面的代码中，import() 返回一个 Promise 对象，需要用 async 和 await 进行异步操作。通过 default 属性获取被引入模块的默认输出。
2. export 在导出时进行变量解构
export 不仅可以导出单个变量、函数或类，还可以将多个变量、函数或类解构后一次性进行导出：
// 模块 a.js
const name = 'Kobe';
const age = 42;
export {name, age};
// 模块 b.js
import {name, age} from './a.js';
console.log(name, age); // Kobe 423. import 在导入时进行变量解构
与 export 类似，import 也可以通过解构的方式导入模块中的内容：
// 模块 a.js
const name = 'Kobe';
export {name};
// 模块 b.js
const {name} = await import('./a.js');
console.log(name); // Kobe上面的代码中，在 import 的时候使用解构的方式将模块中的内容导入到了当前作用域中。
4. 总结
在 ES6 中，import 和 export 是模块化编程中不可或缺的一部分。通过 import 和 export 可以非常方便地组织、管理和重用代码。本文详细介绍了 import 和 export 的基本用法、注意事项和高级用法，并提供了简单易懂的示例代码，希望对初学者和中高级开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc61cef6b2d6eab32225b6