请描述Module Import/Export语法在ES6中是如何工作的。

在ES6中，Module Import/Export语法提供了一种更强大、更灵活的方式来组织和管理JavaScript代码。这种模块系统是基于静态的import和export声明，有助于实现更好的封装和复用。以下是关于ES6中Module Import/Export语法如何工作的详细描述：

文末有我帮助400多位同学成功领取到前端offer的场景题哦

一、基本用法

1. 导出（export）

   1. ES6模块支持两种导出方式：命名导出（named export）和默认导出（default export）。
   2. 命名导出：使用export关键字来导出特定的函数、类、变量等。例如：

      • // lib.js
        export const sqrt = Math.sqrt;
        export function square(x) {
          return x * x;
        }
        export function add(x, y) {
          return x + y;
        }
        

   3. 默认导出：每个模块只能有一个默认导出，它可以是任何类型的值（函数、类、对象等）。例如：

      • // myModule.js
        const myFunction = () => { /* ... */ };
        export default myFunction;
        

2. 导入（import）

   1. 导入模块时，可以使用花括号{}来指定要导入的命名导出，或者使用默认导入的方式。
   2. 命名导入：与导出时的命名一一对应。例如：

      • // main.js
        import { square, add } from 'lib';
        console.log(square(10)); // 100
        console.log(add(2, 4)); // 6
        

   3. 默认导入：使用import关键字后跟模块名和要导入的默认导出名（通常省略，直接使用import moduleName from 'module'）。例如：

      • // main.js
        import myFunction from 'myModule';
        myFunction(); // 调用从myModule导入的函数
        

二、扩展用法

1. 重命名导入和导出：使用as关键字可以在导入或导出时为标识符指定一个别名。

   1. 导入时重命名：import { square as sq } from 'lib';
   2. 导出时重命名：export { square as sq };

2. 导出整个模块：使用* as可以将整个模块的内容导入到一个变量中。

   1. 例如：import * as lib from 'lib';

3. 导入默认导出和命名导出：可以在同一个import语句中同时导入默认导出和命名导出。

   1. 例如：import myFunction, { square, add } from 'myModule';（但请注意，这要求myModule同时有一个默认导出和这些命名导出）

三、注意事项

• ES6的import和export只可以在模块的最外层作用域使用，不能在条件语句或函数作用域中使用。
• ES6模块只支持静态导入和导出，即编译时就能确定导入和导出的内容。
• ES6模块加载是静态的或编译时的，这意味着在代码执行之前就已经完成了模块的加载和解析。

总的来说，ES6的Module Import/Export语法为JavaScript提供了更强大、更灵活的模块系统，使得代码的组织和管理更加清晰和高效。
堪称2024最强的前端面试场景题，让421人成功拿到offer