在 ES6 中，我们可以使用 import 和 export 关键字来实现模块化的开发。模块化的开发能够提高代码的可维护性和可重用性，让代码更加易于扩展和维护。在本文中，我们将详细介绍如何在 ES6 中正确使用 import 和 export 关键字，并提供相关示例代码和指导意义。
1. export 基础用法
在 ES6 中，我们可以使用 export 关键字来导出一个变量、函数或者类，例如：
-- -------------------- ---- -------
-- ------
------ ----- ---- - --------
-- ------
------ -------- ---------- -
------------------- ---------
-
-- -----
------ ----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- -- ---- -- ----------------
-
-我们可以使用 import 关键字来引入这些导出的变量、函数或者类，例如：
-- -------------------- ---- ------- -- ------ ------ - ---- - ---- ----------- -- ------ ------ - -------- - ---- ----------- -- ----- ------ - ------ - ---- ----------- -- ------------- ------------------ -- ------- ----------- -- ------- ------- ----- ------ - --- -------------- ------------------ -- ------- -- ---- -- -----
2. export default
除了导出一个变量、函数或者类外，我们还可以使用 export default 关键字来导出一个默认的变量、函数或者类。例如：
-- -------------------- ---- -------
-- ---------
------ ------- ------- --------
-- ---------
------ ------- -------- ---------- -
------------------- ---------
-
-- --------
------ ------- ----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- -- ---- -- ----------------
-
-我们可以使用 import 关键字来引入默认导出的变量、函数或者类，例如：
-- -------------------- ---- ------- -- --------- ------ ------- ---- ----------- -- --------- ------ -------- ---- ----------- -- -------- ------ ------ ---- ----------- -- --------------- --------------------- -- ------- ------- ----------- -- ------- ------- ----- ------ - --- -------------- ------------------ -- ------- -- ---- -- -----
需要注意的是，每个模块只能有一个默认导出，因此我们不能同时使用 export default 和 export 导出多个变量、函数或者类。
3. export 和 export default 的区别
export 和 export default 的区别在于，export 导出的变量、函数或者类需要使用 {} 来引入，而 export default 导出的变量、函数或者类可以使用任意的名称来引入。例如：
-- -------------------- ---- ------- -- ------ ------ ----- ---- - -------- -- --------- ------ ------- ---------- - ------------------- --------- - -- ------- ------ - ---- - ---- ----------- -- --------- ------ -------- ---- ----------- -- ---------- ------------------ -- ------- ----------- -- ------- -------
需要注意的是，export 和 export default 的使用场景不同。当我们需要导出多个变量、函数或者类时，应该使用 export；当我们需要导出一个默认的变量、函数或者类时，应该使用 export default。
4. export 和 import 的其他用法
除了上述的基础用法外，export 和 import 还有其他的用法，例如：
4.1. 重命名导出和导入的变量
我们可以使用 as 关键字来重命名导出和导入的变量，例如：
// 导出一个变量，并重命名为 myName
export { name as myName } from './module';
// 导入一个变量，并重命名为 yourName
import { myName as yourName } from './module';
// 使用导入的变量
console.log(yourName); // 'Alice'4.2. 导出和引入所有变量
我们可以使用 * 来导出和引入一个模块中的所有变量，例如：
-- -------------------- ---- ------- -- ------ ------ - ---- ----------- -- ------------ ------ ------ - -- ------ ---- ----------- -- ------- ------------------------- -- ------- ------------------ -- ------- ------- ----- ------ - --- --------------------- ------------------ -- ------- -- ---- -- -----
结论
在 ES6 中，我们可以使用 import 和 export 关键字来实现模块化的开发。模块化的开发能够提高代码的可维护性和可重用性，让代码更加易于扩展和维护。本文详细介绍了 export 和 import 的基础用法，以及其他的用法，并提供了相关示例代码和指导意义。希望本文能够帮助读者更好地理解和使用 import 和 export 关键字。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673afd7639d6d08e88b0faf1