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的区别
- 语法差异：
- 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; };- 加载时机：
- ES6 模块化： 在编译阶段静态分析，加载时可以进行优化。
- CommonJS： 在运行时加载，是同步加载模块的方式。
- 模块值的拷贝：
- ES6 模块化： 模块值是动态映射关系，只读视图，通过实时的映射关系来获取值。
- CommonJS： 是值的拷贝，一旦加载，被加载模块的值变化不会影响导入模块。
- 导出方式：
- ES6 模块化： 导出的是值的引用，修改导入值会影响到导出值。
- CommonJS： 导出的是值的拷贝，修改导入值不会影响到导出值。
- 适用场景：
- ES6 模块化： 主要用于浏览器端和现代前端开发，支持异步加载。
- CommonJS： 主要用于服务器端，是同步加载模块的一种较为简单的方式。
- ES6 模块化的静态特性：
- 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 中用来声明变量的关键字，它们的区别如下：
- 作用域：
- var：函数作用域，在函数内部声明的 var 变量可以在整个函数内部使用。
- let：块级作用域，在代码块（花括号）内部声明的 let 变量只能在该代码块内部使用。
- const：块级作用域，与 let 类似，但声明的变量的值不能被修改。
- 变量提升：
- var：存在变量提升，即在声明变量之前就可以使用该变量，但是值为 undefined。
- let 和 const：不存在变量提升，必须先声明再使用，否则会抛出 ReferenceError 异常。
- 可修改性：
- var 和 let：声明的变量的值可以被修改。
- const：声明的变量的值不能被修改，必须在声明时或在构造函数中进行初始化。
- 暂时性死区（Temporal Dead Zone，TDZ）：
- let 和 const：在它们所声明的块级作用域内，存在暂时性死区。在 TDZ 中，不能访问该变量，也不能修改该变量的值。
- 全局对象属性：
- 使用 var 声明的变量，会成为全局对象的属性，前提是没有在函数内部或块级作用域中声明该变量。
- 使用 let 声明的变量不会成为全局对象的属性。
- 使用 const 声明的变量不会成为全局对象的属性，但如果声明同时进行初始化，会在全局对象上创建一个只读属性。
15、 介绍下 BFC 及其应用
BFC(Blcok formatting context) 直译为“块级格式化上下文”。他是一个独立的渲染区域，只有块级元素参与，它规定了内部块级元素的布局，并且与这个区域外部毫不相关，外部元素也不会影响这个渲染区域的元素。
简单说：BFC 就是页面上的一个隔离的独立渲染区域，区域里边的子元素不会影响到外面的元素。外边的元素也不会影响到区域里面的子元素。
以下是一些常见的创建 BFC 的方法：
- 浮动元素：将一个元素设置为浮动（float: left 或 float: right）会创建一个 BFC。
- 绝对定位元素：将一个元素设置为绝对定位（position: absolute）会创建一个 BFC。
- 固定定位元素：将一个元素设置为固定定位（position: fixed）会创建一个 BFC。
- 具有 overflow 属性的元素：将一个元素的 overflow 属性设置为非 visible 的值（例如 overflow: hidden、overflow: auto 或 overflow: scroll）会创建一个 BFC。
- 具有 display 属性为 inline-block、table-cell、table-caption 或 flex 的元素：这些元素会自动创建一个 BFC。
- 根元素（html 元素）：根元素始终是一个 BFC。
BFC 可以解决那些问题
- 避免垂直方向的margin合并。问题：垂直方向上的，两个元素margin相遇，两元素间的距离并不等于两个margin之和。而是等于最大的margin。小的margin会被大的margin吞并。
- 清除浮动元素的影响。问题：如果父元素包含一个浮动元素，那么其他元素可能会受到浮动元素的影响，导致布局混乱。但是给父元素变成BFC，浮动元素对其他元素的布局不再产生影响。
- 防止高度塌陷。问题：父元素不写高度时，子元素浮动后，导致父元素会发生高度塌陷（造成父元素高度为0）。但是将父元素变成BFC，就不会造成高度塌陷，最简单的方法是，给父元素设置overflow: hidden属性。
- 垂直布局。问题：父元素包含多个子元素，并且这些子元素的高度不同，那么在没有创建 BFC 的情况下，这些子元素可能会在垂直方向上重叠。但是将父元素变成BFC，子元素在垂直方向上就能正确排列。
作者：听我一言
链接：https://juejin.cn/post/7307894647656955943
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。