每日一篇——23秋招JS面经(5)

在 JavaScript 中，基本数据类型（Primitive Types）和引用数据类型（Reference Types）在处理和操作时有所不同。当我们对基本数据类型值进行属性访问或方法调用时，JavaScript 会将基本数据类型自动转换为对应的包装对象，这个过程称为装箱（Boxing）。

下面以数字类型（Number）为例，简要说明基本数据类型装箱的过程：

创建包装对象：当我们使用属性或方法来访问数字类型的值时，JavaScript 在后台会创建一个临时的包装对象（Wrapper Object）。对于数字类型，创建的包装对象是 Number 对象。
存储值：创建的包装对象将会存储对应的基本数据类型值。例如，对于数字类型的装箱过程，包装对象中会存储相应的数字值。
访问属性或方法：一旦装箱完成，我们可以通过包装对象来访问属性和方法。这些属性和方法是与包装对象相关联的。例如，通过.toFixed()方法调用来格式化一个数字。
自动拆箱：当我们使用包装对象进行操作后，如果需要将结果赋值给一个变量，JavaScript 会自动进行拆箱（Unboxing）操作，将包装对象转换回基本数据类型的值。

装箱的过程是自动发生的，JavaScript 引擎会在需要时自动执行装箱和拆箱操作，使得开发者能够像操作引用类型一样操作基本类型。而这种装箱和拆箱的过程在后台进行，对于开发者来说是透明的。

需要注意的是，由于装箱过程涉及到对象的创建和数据拷贝，相比于直接操作基本类型，使用包装对象会带来额外的开销。因此，在不必要的情况下，最好直接操作基本类型，而不是通过装箱和拆箱操作。

JavaScript中的最大安全整数是 9007199254740991。它可以使用 Number.MAX_SAFE_INTEGER 常量来表示。这个值是由 JavaScript 中的双精度浮点数表示法决定的，在进行数值运算时不会丢失精度。

超过最大安全整数的数值会导致精度丢失，可能会引发意外的结果。如果需要处理超过最大安全整数范围的大整数，可以使用第三方的大数库或者 BigInt 类型（ES2020 新增）来处理。BigInt 类型可以表示任意精度的整数，但是在进行数值计算时需要特别注意性能和兼容性的问题。

CommonJS（简称CJS）和ES Modules（简称ESM）是两种不同的模块化规范，在 JavaScript 中有一些区别：

语法差异：
- CommonJS：使用 require() 导入模块，使用 module.exports 或 exports 导出模块。
- ESM：使用 import 导入模块，使用 export 导出模块。
动态 vs 静态：
- CommonJS：模块加载是动态的，即在代码运行时根据需要加载模块。require() 是一个函数调用，并且可以接受变量作为参数。
- ESM：模块加载是静态的，即在代码解析阶段就确定了模块的依赖关系。import 是一个声明语句，不能使用变量导入模块。
加载方式：
- CommonJS：模块加载是同步的，即遇到 require() 语句时会阻塞代码执行，直到模块加载完成。适用于服务器端或非浏览器环境。
- ESM：模块加载是异步的，即模块会在需要时进行异步加载，不会阻塞代码执行。适用于浏览器及现代 JavaScript 运行环境。
静态编译：
- CommonJS：模块的依赖关系和导出内容是在运行时确定的，无法在代码静态解析阶段进行优化。
- ESM：模块的依赖关系可以在代码静态解析阶段确定，进行静态编译和优化，提高性能。
浏览器兼容性：
- CommonJS：通常用于服务器端开发和构建工具（如Webpack、Browserify）中。
- ESM：现代浏览器原生支持 ES Modules，可以直接在浏览器环境中使用。

总结来说，CommonJS 适用于服务器端开发，支持同步加载和动态导入模块，而 ESM 适用于浏览器端及现代 JavaScript 运行环境，支持异步加载和静态编译。两者在语法、加载方式和兼容性等方面有一些区别，选择使用的规范应根据具体的开发环境和需求来决定。