JS 中的 import 是什么？

在 JavaScript 世界里，import 是一个非常重要的语法，它就像是一扇门，让我们能够把其他模块中的代码引入到当前模块中使用,它是用于模块导入的关键字。

为什么要使用 import？

随着项目规模的不断扩大，代码变得越来越复杂，如果所有代码都写在一个文件里，那维护起来简直是一场噩梦，而 import 可以让我们把代码拆分成一个个独立的模块，每个模块负责特定的功能，我们可以有一个专门处理数据请求的模块，一个负责页面渲染的模块等等，当我们在其他地方需要用到这些功能时，通过 import 就可以轻松引入，实现代码的复用，提高开发效率，模块之间的相互独立也让代码的结构更加清晰,便于理解和维护。

import 有哪些常见的用法？

导入默认导出（Default Export）

如果一个模块使用了默认导出，那么在导入时就比较灵活，比如有一个 `math.js` 模块,它默认导出一个计算两个数之和的函数：

// math.js
export default function add(a, b) {
    return a + b;
}

在另一个文件中导入它：

import sum from './math.js';
console.log(sum(1, 2)); // 3

这里的 `sum` 是我们自己取的名字，因为是默认导出,所以可以随意命名。

导入具名导出（Named Export）

当模块中有多个具名导出时，我们可以选择性地导入，`utils.js` 模块：

// utils.js
export function multiply(a, b) {
    return a * b;
}
export function divide(a, b) {
    return a / b;
}

在其他文件中导入：

import { multiply } from './utils.js';
console.log(multiply(3, 4)); // 12

如果想一次性导入多个具名导出,可以这样：

import { multiply, divide } from './utils.js';
console.log(multiply(3, 4)); // 12
console.log(divide(10, 2)); // 5

重命名导入

导入的名称可能会和当前模块中的变量名冲突，或者我们想给导入的内容取一个更有意义的名字,这时候就可以使用重命名导入。

import { multiply as times } from './utils.js';
console.log(times(3, 4)); // 12

整体导入（Namespace Import）

当我们不确定模块中有哪些导出，或者想把模块中的所有导出作为一个对象来使用时,可以使用整体导入。

import * as utils from './utils.js';
console.log(utils.multiply(3, 4)); // 12
console.log(utils.divide(10, 2)); // 5

import 在不同环境中的表现

在浏览器环境中

现代浏览器支持 ES6 模块语法，包括 import，但需要注意的是，浏览器默认是延迟加载模块的，也就是说，只有当页面解析到 import 语句时才会去加载对应的模块文件，浏览器对于模块文件的路径要求比较严格，必须是相对路径或者绝对路径（在服务器环境下），在浏览器中使用 import 时，要确保服务器正确配置了 MIME 类型，一般是 `text/javascript`。

在 Node.js 环境中

Node.js 对 ES6 模块的支持是逐步完善的，在较新的版本中，可以使用 `.mjs` 后缀名来标识 ES6 模块文件，然后在其他文件中使用 import 导入，Node.js 还有自己的 `require` 模块系统，和 import 有一些区别，`require` 是同步加载模块，而 import 是异步加载（在浏览器环境中体现更明显，在 Node.js 中也有相应的处理机制），`require` 返回的是模块导出对象的拷贝，而 import 是实时绑定的。

import 的优势和注意事项

优势

除了前面提到的代码复用和结构清晰外，import 还具有更好的静态分析能力，因为在代码编译阶段（或者模块加载阶段），就能确定导入的内容，这对于一些工具（如 Tree - Shaking，它可以去除未使用的代码，减小打包体积）非常重要。

注意事项

import 语句必须写在模块的顶层，不能在条件语句或者函数内部使用（在一些打包工具处理后可能可以模拟类似效果，但这不是标准语法），不同环境对 import 的支持程度可能不同，要根据实际情况进行测试和适配，在处理循环导入（模块 A 导入模块 B，模块 B 又导入模块 A）时，要注意代码的逻辑,避免出现意外的结果。

import 是 JavaScript 中强大的模块导入工具，熟练掌握它的各种用法，能让我们更好地组织和管理代码，提升开发效率和代码质量，无论是前端开发还是后端开发（在 Node.js 中合理使用），import 都扮演着重要的角色,值得我们深入学习和研究。