11、 map、forEach 和 for 的区别

map方法

map 方法用于对数组中的每个元素进行操作，并返回一个新的数组，该数组包含原数组中每个元素操作后的结果。它不会改变原数组，而是返回一个新的数组。

forEach方法

forEach 方法用于对数组中的每个元素执行一个函数，但不会返回任何值。它会遍历数组中的每个元素，并对其执行提供的函数。与 map 方法不同，forEach 方法不会创建新的数组，而是直接在原数组上进行操作。

for 循环

for 循环是一种通用的迭代结构，它可以用于迭代任何可迭代对象（如数组、字符串等）。它通过指定迭代的起始索引、结束索引和迭代步骤来遍历可迭代对象中的每个元素。

三者的性能比较：for > forEach > map

for：for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。
forEach：对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 for 循环。
map：map 最慢的原因是因为 map 会返回一个新的数组，数组的创建和赋值会导致分配内存空间，因此会带来较大的性能开销。

for循环是js提出时就有的循环方法。forEach和Map是ES5提出的，挂载在可迭代对象原型上的方法。

12、ES6模块化和CommonJS的区别

1. 语法差异：

• ES6 模块化： 使用 import 和 export 语法。

// 导入 import { myFunction } from "./myModule"; // 导出 export const pi = 3.14; export function square(x) { return x * x; }

• CommonJS： 使用 require 和 module.exports 语法。

// 导入 const myModule = require("./myModule"); // 导出 exports.pi = 3.14; exports.square = function(x) { return x * x; };

2. 加载时机：
3. ES6 模块化： 在编译阶段静态分析，加载时可以进行优化。
4. CommonJS： 在运行时加载，是同步加载模块的方式。
5. 模块值的拷贝：
6. ES6 模块化： 模块值是动态映射关系，只读视图，通过实时的映射关系来获取值。
7. CommonJS： 是值的拷贝，一旦加载，被加载模块的值变化不会影响导入模块。
8. 导出方式：
9. ES6 模块化： 导出的是值的引用，修改导入值会影响到导出值。
10. CommonJS： 导出的是值的拷贝，修改导入值不会影响到导出值。
11. 适用场景：
12. ES6 模块化： 主要用于浏览器端和现代前端开发，支持异步加载。
13. CommonJS： 主要用于服务器端，是同步加载模块的一种较为简单的方式。
14. ES6 模块化的静态特性：
15. ES6 模块化在编译时可以静态分析模块之间的依赖关系，这使得一些工具（如 tree shaking）能够更好地优化代码，去除未使用的部分。

总的来说，ES6 模块化在语法上更加优雅，支持静态分析，异步加载等特性，适用于现代前端开发；而 CommonJS 更适用于服务器端的模块化开发。

13、 深浅拷贝的区别

浅拷贝复制对象的引用，深拷贝创建一个新对象并递归复制所有嵌套的对象

浅拷贝：

• 浅拷贝仅复制对象或数组的第一层结构，对于嵌套的对象或数组，仅复制引用而不是实际的对象或数组。
• 常见的浅拷贝方法有 Object.assign()、扩展运算符（...）、Array.slice() 等。

const originalArray = [1, 2, { a: 3 }]; const shallowCopy = [...originalArray]; originalArray[0] = 100; originalArray[2].a = 99; console.log(originalArray); // [100, 2, { a: 99 }] console.log(shallowCopy); // [1, 2, { a: 99 }]

上面代码中，说明shallowCopy仅复制originalArray数组的第一层结构，其他深层次结构则复制的是引用，对shallowCopy中数据进行修改时，shallowCopy 数组中除第一层结构以外的数据，都会被修改（通俗的说，就是除开第一层结构是自己的，其他层都是别人的，别人想改就改）。

深拷贝：

• 深拷贝会递归地复制对象或数组及其所有嵌套的对象或数组，生成一份完全独立的副本。
• 深拷贝能够解决浅拷贝中引用传递的问题，确保复制的对象和原对象互不影响。
• 常见的深拷贝方法有使用递归、JSON.parse(JSON.stringify())、第三方库如 lodash 的 _.cloneDeep() 等。

const originalArray = [1, 2, { a: 3 }]; const deepCopy = JSON.parse(JSON.stringify(originalArray)); originalArray[2].a = 99; console.log(deepCopy); // [1, 2, { a: 3 }]

深拷贝开辟了一个新的空间，将数据复制进去，进行处理操作时，与原数据互不影响。

浅拷贝实现方式：

• Object.assign()
• 扩展运算符（...）
• Array.slice()

深拷贝实现方式：

• 递归实现（递归实现深拷贝可能会因为循环引用而陷入死循环）
• JSON.parse(JSON.stringify())（不能复制函数、正则表达式等特殊对象）
• 第三方库，如 lodash

14、 var、let、const的区别

var、let 和 const 是 JavaScript 中用来声明变量的关键字，它们的区别如下：

1. 作用域：

• var：函数作用域，在函数内部声明的 var 变量可以在整个函数内部使用。
• let：块级作用域，在代码块（花括号）内部声明的 let 变量只能在该代码块内部使用。
• const：块级作用域，与 let 类似，但声明的变量的值不能被修改。

2. 变量提升：

• var：存在变量提升，即在声明变量之前就可以使用该变量，但是值为 undefined。
• let 和 const：不存在变量提升，必须先声明再使用，否则会抛出 ReferenceError 异常。

3. 可修改性：

• var 和 let：声明的变量的值可以被修改。
• const：声明的变量的值不能被修改，必须在声明时或在构造函数中进行初始化。

4. 暂时性死区（Temporal Dead Zone，TDZ）：

• let 和 const：在它们所声明的块级作用域内，存在暂时性死区。在 TDZ 中，不能访问该变量，也不能修改该变量的值。

5. 全局对象属性：

• 使用 var 声明的变量，会成为全局对象的属性，前提是没有在函数内部或块级作用域中声明该变量。
• 使用 let 声明的变量不会成为全局对象的属性。
• 使用 const 声明的变量不会成为全局对象的属性，但如果声明同时进行初始化，会在全局对象上创建一个只读属性。

15、 介绍下 BFC 及其应用

BFC(Blcok formatting context) 直译为“块级格式化上下文”。他是一个独立的渲染区域，只有块级元素参与，它规定了内部块级元素的布局，并且与这个区域外部毫不相关，外部元素也不会影响这个渲染区域的元素。

简单说：BFC 就是页面上的一个隔离的独立渲染区域，区域里边的子元素不会影响到外面的元素。外边的元素也不会影响到区域里面的子元素。

以下是一些常见的创建 BFC 的方法：

1. 浮动元素：将一个元素设置为浮动（float: left 或 float: right）会创建一个 BFC。
2. 绝对定位元素：将一个元素设置为绝对定位（position: absolute）会创建一个 BFC。
3. 固定定位元素：将一个元素设置为固定定位（position: fixed）会创建一个 BFC。
4. 具有 overflow 属性的元素：将一个元素的 overflow 属性设置为非 visible 的值（例如 overflow: hidden、overflow: auto 或 overflow: scroll）会创建一个 BFC。
5. 具有 display 属性为 inline-block、table-cell、table-caption 或 flex 的元素：这些元素会自动创建一个 BFC。
6. 根元素（html 元素）：根元素始终是一个 BFC。

BFC 可以解决那些问题

1. 避免垂直方向的margin合并。问题：垂直方向上的，两个元素margin相遇，两元素间的距离并不等于两个margin之和。而是等于最大的margin。小的margin会被大的margin吞并。
2. 清除浮动元素的影响。问题：如果父元素包含一个浮动元素，那么其他元素可能会受到浮动元素的影响，导致布局混乱。但是给父元素变成BFC，浮动元素对其他元素的布局不再产生影响。
3. 防止高度塌陷。问题：父元素不写高度时，子元素浮动后，导致父元素会发生高度塌陷（造成父元素高度为0）。但是将父元素变成BFC，就不会造成高度塌陷，最简单的方法是，给父元素设置overflow: hidden属性。
4. 垂直布局。问题：父元素包含多个子元素，并且这些子元素的高度不同，那么在没有创建 BFC 的情况下，这些子元素可能会在垂直方向上重叠。但是将父元素变成BFC，子元素在垂直方向上就能正确排列。

作者：听我一言
链接：https://juejin.cn/post/7307894647656955943
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。