2026年后跳槽,前端常问的高频面试题

1、map、forEach 和 for 的区别

map 方法

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

forEach 方法

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

for 循环

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

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

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

2、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. 模块值的拷贝：

4. 导出方式：

5. 适用场景：

6. ES6 模块化的静态特性：

ES6 模块化在编译时可以静态分析模块之间的依赖关系，这使得一些工具（如 tree shaking）能够更好地优化代码，去除未使用的部分。

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

3、深浅拷贝的区别

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

浅拷贝：

浅拷贝仅复制对象或数组的第一层结构，对于嵌套的对象或数组，仅复制引用而不是实际的对象或数组。

常见的浅拷贝方法有 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 }]

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

浅拷贝实现方式：

const shallowCopy = Object.assign({}, originalObject);

const shallowCopy = [...originalArray];

const shallowCopy = originalArray.slice();

深拷贝实现方式：

function deepClone(obj) {
    if (obj = null || typeof obj ! 'object') {
        return obj;
    }
    const clone = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            clone[key] = deepClone(obj[key]);
        }
    }
    return clone;
}

const deepCopy = JSON.parse(JSON.stringify(originalObject));

const deepCopy = _.cloneDeep(originalObject);

4、var、let、const 的区别

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

1. 作用域：

2. 变量提升：

3. 可修改性：

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

5. 全局对象属性：

5、介绍下 BFC 及其应用

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

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

创建 BFC 的方法：

BFC 可以解决的问题：

6、什么是作用域链？

作用域链的本质，就是底层变量查找机制。

过程：当在 JS 中使用一个变量的时候，首先 JS 引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域。

作用：保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，可以访问到外层环境的变量和函数。

7、浏览器的垃圾回收机制

（1）内存的生命周期

JS 环境中分配的内存，一般有如下生命周期：

全局变量一般不会回收，一般局部变量的的值，不用了，会被自动回收掉。

（2）垃圾回收的概念

垃圾回收：JavaScript 代码运行时，需要分配内存空间来储存变量和值。当变量不在参与运行时，就需要系统收回被占用的内存空间，这就是垃圾回收。

回收机制：

（3）垃圾回收的方式

1. 引用计数法

2. 标记清除法

（4）如何减少垃圾回收

虽然浏览器可以进行垃圾自动回收，但是当代码比较复杂时，垃圾回收所带来的代价比较大，所以应该尽量减少垃圾回收。

（5）内存泄漏是什么

是指由于疏忽或错误造成程序未能释放已经不再使用的内存。

（6）哪些情况会导致内存泄漏

以下四种情况会造成内存的泄漏：

8、什么是函数式编程

主要的编程范式有三种：命令式编程，声明式编程和函数式编程。

函数式编程强调程序执行的结果而非执行的过程，倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算，而非设计一个复杂的执行过程。

优点

缺点

9、事件循环 Event Loop

事件循环指的是 JS 代码所在运行环境（浏览器、nodejs）编译器的一种解析执行规则。

（1）JS 的执行机制（同步任务、异步任务）

单线程是为了避免 UI 操作混乱，所有和 UI 操作相关的开发语言都应该是单线程。

JS 是一门单线程语言，单线程就意味着，所有的任务需要排队，前一个任务结束，才会执行下一个任务。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。为了解决这个问题，JS 中出现了同步和异步。

（2）宏任务与微任务的概念与区别

（3）事件循环 Event Loop 执行机制

（4）常见的宏任务与微任务分别有哪些

常见的宏任务有：

常见的微任务有：

10、浏览器缓存机制

缓存行为

缓存位置

缓存过程

强缓存

强缓存表示在缓存期间不需要发送请求。

强缓存通过设置两种 HTTP Header 来实现，分别是 Expires 和 Cache-Control。

注意：
如果 Cache-Control 属性值为 no-store，表示不进行任何缓存；属性值为 no-cache，表示强制使用协商缓存。

协商缓存

如果是首次请求或者 Cache-Control 的属性设置为 no-cache 时，又或者如果缓存过期了，都会向服务器发送请求，并且请求头中携带 If-Modified-Since 和 If-None-Match 来判断是否命中协商缓存，如果命中，则返回 304 状态码并且更新浏览器缓存有效期。