前端初级0面试题目100道

解析：localStorage（持久化存储）、sessionStorage（会话级存储）、Cookie、IndexedDB（大型结构化数据）、Application Cache（已废弃，被 Service Worker 替代）。解析：HTML5 的组件化方案，包括 Custom Elements（自定义标签）、Shadow DOM（隔离样式和结构）、HTML Templates（模板），用于构建可

前端小白一枚~

775人浏览 · 2025-08-20 09:27:22

前端小白一枚~ · 2025-08-20 09:27:22 发布

以下是 HTML、CSS 和 JavaScript 的 100 道面试题及解析，涵盖基础概念、进阶知识和实际应用场景，帮助你全面准备前面试：

HTML 部分（20 题）

DOCTYPE 的作用是什么？
解析：声明文档类型，告诉浏览器该 HTML 文档使用的 HTML 版本规范（如<!DOCTYPE html>表示 HTML5），避免浏览器进入怪异模式（Quirks Mode）。
HTML5 新增了哪些语义化标签？
解析：<header>、<footer>、<nav>、<article>、<section>、<aside>等。语义化标签提升代码可读性和 SEO 友好性，明确标签用途。
src和href的区别？
解析：src用于引入资源（如<img src="...">），会替换标签内容，加载时暂停其他资源解析；href用于建立链接关系（如<link href="...">），不会暂停解析，仅表示关联。
data-*属性的用途？
解析：自定义数据属性，用于存储页面或应用的私有自定义数据，可通过 JS 的element.dataset访问，便于在 HTML 和 JS 间传递数据。
<meta>标签的常见用法？
解析：设置字符编码（<meta charset="UTF-8">）、视口（<meta name="viewport" content="width=device-width">）、SEO 关键词（<meta name="keywords" content="...">）等。
HTML5 的离线存储方式有哪些？
解析：localStorage（持久化存储）、sessionStorage（会话级存储）、Cookie、IndexedDB（大型结构化数据）、Application Cache（已废弃，被 Service Worker 替代）。
canvas和svg的区别？
解析：canvas是像素级绘图，依赖 JS 动态生成，不支持事件监听，适合动画和游戏；svg是矢量图形，基于 XML，支持事件监听，放大不失真，适合图标和图表。
iframe的优缺点？
解析：优点是可以嵌入其他页面，实现模块化；缺点是影响页面加载速度、SEO 不友好、可能引发安全问题（如 XSS）。
label标签的作用？
解析：关联表单元素（通过for属性绑定id），点击label会触发关联元素的事件（如复选框选中），提升用户体验。
HTML5 的表单新增属性有哪些？
解析：required（必填）、placeholder（提示文本）、autocomplete（自动完成）、pattern（验证正则）、type="email/number/etc"（输入类型限制）。
title和alt的区别？
解析：alt是图片加载失败时的替代文本，用于无障碍访问和 SEO；title是鼠标悬停时的提示文本，可用于任何标签。
什么是 HTML 语义化？为什么重要？
解析：语义化是指使用合适的标签表示内容含义（如用<p>表示段落而非<div>）。重要性：提升代码可读性、SEO 优化、无障碍访问（屏幕阅读器依赖语义）。
script标签的defer和async属性区别？
解析：defer和async均异步加载 JS，不阻塞 HTML 解析；defer按顺序执行，等待 DOM 加载完成后执行；async加载完成后立即执行，顺序不确定。
HTML5 的historyAPI 有什么用？
解析：用于操作浏览器历史记录，实现无刷新页面跳转（如pushState()、replaceState()），配合 AJAX 构建 SPA（单页应用）。
link标签的rel="preload"作用？
解析：提前加载关键资源（如 CSS、JS），告诉浏览器该资源优先级高，避免后续加载阻塞，提升性能。
hidden属性和display: none的区别？
解析：hidden是 HTML 属性，浏览器默认样式为display: none，但可被 CSS 覆盖；display: none是 CSS 样式，元素不显示且不占空间，两者都不会触发事件。
什么是 Web Components？
解析：HTML5 的组件化方案，包括 Custom Elements（自定义标签）、Shadow DOM（隔离样式和结构）、HTML Templates（模板），用于构建可复用组件。
picture标签的作用？
解析：用于响应式图片，通过<source>标签根据屏幕尺寸、分辨率等条件加载不同图片（如media属性控制），优化不同设备的显示效果。
HTML 中的注释语法是什么？有什么注意事项？
解析：语法。注意：注释不能嵌套，-->是结束符，中间不能包含-->。
base标签的作用？
解析：指定页面中所有相对 URL 的基准 URL，如<base href="https://example.com/">，则页面中src="image.png"会解析为https://example.com/image.png。

CSS 部分（30 题）

CSS 选择器的优先级规则？
解析：优先级从高到低：
- 内联样式（style属性）→ 1000
- ID 选择器（#id）→ 100
- 类 / 伪类 / 属性选择器（.class、:hover、[attr]）→ 10
- 元素 / 伪元素选择器（div、::before）→ 1
  规则：优先级高的覆盖低的，相同优先级后者覆盖前者，!important最高（不推荐滥用）。
box-sizing的取值及区别？
解析：content-box（默认）：宽高仅包含内容，边框和内边距会增加总尺寸；border-box：宽高包含内容、内边距和边框，总尺寸固定，便于布局。
BFC 是什么？如何触发？
解析：块级格式化上下文（Block Formatting Context），是一个独立的渲染区域，内部元素布局不受外部影响。触发方式：overflow: hidden、float: left/right、position: absolute/fixed、display: flex/grid等。
float的副作用及清除方法？
解析：副作用：父元素高度塌陷、后续元素环绕。清除方法：
- 父元素添加overflow: hidden（触发 BFC）
- 父元素末尾加空标签并设置clear: both
- 使用伪元素：.parent::after { content: ''; display: block; clear: both; }
Flex 布局的常用属性？
解析：容器属性：flex-direction（方向）、justify-content（水平对齐）、align-items（垂直对齐）、flex-wrap（换行）、align-content（多行对齐）。
项目属性：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基准尺寸）、order（排序）、align-self（单独对齐）。
CSS 定位方式有哪些？区别是什么？
解析：
- static（默认）：正常文档流，无定位。
- relative：相对自身原位置偏移，不脱离文档流。
- absolute：相对最近的非static祖先定位，脱离文档流。
- fixed：相对视口定位，脱离文档流，滚动时位置不变。
- sticky：滚动到阈值时固定（如导航栏），结合relative和fixed。
margin塌陷（重叠）的情况及解决方法？
解析：相邻块级元素的上下margin会取最大值（而非相加）。解决：
- 父元素触发 BFC（如overflow: hidden）
- 用padding或border分隔
- 子元素设置float或position: absolute（脱离文档流）
CSS 动画和过渡的区别？
解析：transition（过渡）：需要触发条件（如hover），只能定义开始和结束状态，适合简单动画。
animation（动画）：无需触发条件，可定义多帧（@keyframes），控制循环、方向等，适合复杂动画。
rem、em、px、vw/vh的区别？
解析：
- px：固定像素，不随设备缩放。
- em：相对父元素字体大小（如父元素font-size: 16px，1em=16px）。
- rem：相对根元素（html）字体大小，便于响应式布局。
- vw/vh：相对视口宽度 / 高度（1vw = 视口宽的 1%），适合全屏布局。
如何实现元素水平垂直居中？
解析：
- Flex 布局：parent { display: flex; justify-content: center; align-items: center; }
- 定位 +transform：child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
- Grid 布局：parent { display: grid; place-items: center; }
display: none和visibility: hidden的区别？
解析：display: none：元素不显示，不占空间，不触发事件；visibility: hidden：元素隐藏，仍占空间，子元素可通过visibility: visible显示。
CSS 模块化的解决方案？
解析：避免样式冲突的方法：
- CSS-in-JS（如 Styled Components）
- CSS Modules（类名哈希化）
- BEM 命名规范（Block-Element-Modifier，如header__title--active）
- 命名空间（如my-component-title）
z-index的生效条件？
解析：仅对定位元素（position为relative/absolute/fixed/sticky）生效，且父元素的z-index会限制子元素（子元素无法超出父元素堆叠上下文）。
什么是 CSS 预处理器？常用的有哪些？
解析：扩展 CSS 功能的工具，支持变量、嵌套、混合（mixin）等。常用：Sass（.scss/.sass）、Less、Stylus。
响应式布局的实现方式？
解析：
- 媒体查询（@media）：根据屏幕尺寸应用不同样式。
- 弹性布局（Flex）和网格布局（Grid）。
- 相对单位（rem、vw）。
- 图片响应式（max-width: 100%、picture标签）。
line-height的取值方式及作用？
解析：控制行高，取值：
- 数值（如1.5）：相对于字体大小的倍数。
- 百分比（如150%）：相对于父元素字体大小。
- 长度（如24px）：固定值。
  作用：垂直居中单行文本（line-height等于父元素高度）。
CSS 性能优化方法？
解析：
- 减少选择器复杂度（避免嵌套过深）。
- 合并 CSS 文件，减少请求。
- 使用contain属性隔离渲染区域。
- 避免@import（阻塞渲染），改用<link>。
- 压缩 CSS（如使用 PostCSS）。
transform的常用属性？
解析：translate(x,y)（平移）、scale(x,y)（缩放）、rotate(deg)（旋转）、skew(x,y)（倾斜）、matrix()（矩阵变换）。transform不会触发重排，性能优于top/left。
box-shadow的语法及作用？
解析：box-shadow: h-offset v-offset blur spread color inset，用于给元素添加阴影，inset表示内阴影。不影响元素布局（无尺寸变化）。
opacity和rgba()的区别？
解析：opacity作用于整个元素（包括内容），值 0-1，子元素会继承透明度；rgba()仅影响颜色的透明度，子元素不受影响（如background: rgba(0,0,0,0.5)）。
Grid 布局和 Flex 布局的区别？
解析：Flex 是一维布局（单行或单列），适合组件内部排列；Grid 是二维布局（行和列），适合整体页面布局，更强大灵活。
@keyframes的作用？
解析：定义 CSS 动画的关键帧，指定动画在不同阶段的样式，配合animation属性使用，如：

css
```
@keyframes move {
  0% { left: 0; }
  100% { left: 100px; }
}
.box { animation: move 2s; }
```
pointer-events的作用？
解析：控制元素是否响应鼠标事件，pointer-events: none表示元素不响应鼠标（点击、hover 等），事件会穿透到下层元素。
CSS 变量（自定义属性）的用法？
解析：用--var-name: value定义，var(--var-name)使用，可继承，支持 JS 修改，便于主题切换：

css
```
:root { --primary: blue; }
.box { color: var(--primary); }
```
overflow的取值及作用？
解析：控制内容溢出时的处理方式：visible（默认，溢出可见）、hidden（隐藏溢出）、scroll（显示滚动条）、auto（必要时显示滚动条）。
white-space的作用？
解析：控制文本空白和换行：normal（合并空白，自动换行）、nowrap（不换行）、pre（保留空白和换行，类似<pre>）、pre-wrap（保留空白，自动换行）。
content-visibility的作用？
解析：CSS 性能属性，content-visibility: auto会自动隐藏不可见区域的内容渲染，提升滚动性能（尤其长列表）。

如何实现文字超出部分显示省略号？
解析：单行：

css

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行（需指定高度）：

css

.text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

filter属性的常用值？
解析：用于图片滤镜效果，如blur(5px)（模糊）、grayscale(100%)（灰度）、brightness(1.5)（亮度）、opacity(0.5)（透明度）等。
CSS 中的层叠上下文是什么？
解析：元素在 Z 轴上的堆叠顺序环境，创建层叠上下文的元素：z-index不为auto的定位元素、opacity < 1、transform非none等。同一上下文内按z-index排序，不同上下文按父元素顺序。

JavaScript 部分（50 题）

==和===的区别？
解析：==会进行类型转换后比较（如0 == false为true）；===严格比较，类型和值都必须相同（如0 === false为false）。建议优先使用===。
JavaScript 的数据类型有哪些？
解析：基本类型（7 种）：String、Number、Boolean、Null、Undefined、Symbol（ES6，唯一值）、BigInt（大整数）。
引用类型：Object（包括Array、Function、Date等）。
原型和原型链的理解？
解析：每个对象都有__proto__（隐式原型），指向其构造函数的prototype（显式原型）。当访问对象属性时，若自身没有，会沿原型链向上查找，直至null，这是 JS 继承的基础。
this的指向规则？
解析：
- 普通函数：指向调用者（谁调用指向谁，全局调用指向window/global，严格模式下为undefined）。
- 箭头函数：无this，继承外层作用域的this。
- 对象方法：指向该对象。
- 构造函数（new）：指向新创建的实例。
- call/apply/bind：手动指定this。
闭包的概念及应用场景？
解析：函数嵌套中，内层函数引用外层函数的变量，导致外层函数的作用域不被释放。
应用：私有变量（如计数器）、模块化、防抖节流、柯里化。
注意：过度使用可能导致内存泄漏。

防抖和节流的区别及实现？
解析：

防抖（Debounce）：触发后延迟 n 秒执行，若 n 秒内再次触发则重新计时（如搜索输入联想）。

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

节流（Throttle）：n 秒内只执行一次（如滚动加载）。

function throttle(fn, interval) {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

原型继承和 Class 继承的区别？
解析：ES5 原型继承通过Object.create()、修改prototype实现；ES6 的class是语法糖，本质还是原型继承，但更接近传统面向对象语法（extends、super）。
let、const和var的区别？
解析：
- 作用域：let/const是块级作用域（{}内），var是函数级作用域。
- 提升：var会提升变量声明（值为undefined），let/const存在暂时性死区（未声明前使用报错）。
- 重复声明：var允许重复声明，let/const不允许。
- const：声明常量，必须初始化，不能重新赋值（但对象属性可修改）。
箭头函数和普通函数的区别？
解析：
- 无this绑定，继承外层this。
- 不能作为构造函数（不能用new）。
- 无arguments对象（可用剩余参数...args）。
- 不能使用yield（不能作为生成器函数）。
- 语法更简洁（单表达式可省略{}和return）。
深拷贝和浅拷贝的区别及实现？
解析：浅拷贝只复制对象引用（如Object.assign()、扩展运算符...），修改拷贝后对象会影响原对象；深拷贝复制整个对象（包括嵌套对象），两者独立。
深拷贝实现：

js
```
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;
}
```
注意：JSON.parse(JSON.stringify(obj))有局限性（不支持函数、Symbol等）。
事件冒泡和事件捕获的区别？
解析：事件冒泡（Bubbling）：事件从触发元素向上传播到父元素；事件捕获（Capturing）：事件从父元素向下传播到触发元素。addEventListener的第三个参数useCapture为true时启用捕获（默认false为冒泡）。
如何阻止事件冒泡和默认行为？
解析：
- 阻止冒泡：event.stopPropagation()（IE 低版本用event.cancelBubble = true）。
- 阻止默认行为：event.preventDefault()（IE 低版本用event.returnValue = false），如阻止表单提交、链接跳转。
Promise的三种状态及用法？
解析：状态：pending（进行中）、fulfilled（成功）、rejected（失败），状态一旦改变不可逆转。
用法：处理异步操作，避免回调地狱。

js
```
new Promise((resolve, reject) => {
  asyncOperation((err, result) => {
    if (err) reject(err);
    else resolve(result);
  });
}).then(res => console.log(res)).catch(err => console.error(err));
```
async/await的作用及使用场景？
解析：async标记函数返回Promise，await暂停执行，等待Promise完成，语法更接近同步代码，用于简化Promise链式调用。
场景：处理多个依赖的异步操作（如先获取 A 数据，再用 A 获取 B 数据）。
setTimeout和setInterval的区别？
解析：setTimeout延迟 n 毫秒后执行一次；setInterval每隔 n 毫秒执行一次。两者都返回定时器 ID，可通过clearTimeout/clearInterval取消。
注意：setInterval可能因前一次执行未完成导致间隔不准，可改用setTimeout递归调用。
JavaScript 的执行机制（事件循环）？
解析：JS 是单线程，通过事件循环（Event Loop）处理异步任务：
- 同步任务进入主线程执行栈。
- 异步任务（如setTimeout、AJAX）放入任务队列（宏任务 / 微任务）。
- 主线程空闲时，先执行所有微任务（如Promise.then），再取一个宏任务（如setTimeout回调）进入主线程，重复循环。
宏任务和微任务的区别？
解析：
- 宏任务（Macrotask）：setTimeout、setInterval、DOM事件、AJAX、script整体代码。
- 微任务（Microtask）：Promise.then/catch/finally、async/await、process.nextTick（Node.js）。
  执行顺序：同步代码 → 微任务队列清空 → 宏任务队列取一个执行 → 重复。
数组的常用方法？
解析：
- 改变原数组：push()、pop()、shift()、unshift()、splice()、sort()、reverse()。
- 不改变原数组：map()、filter()、reduce()、forEach()、slice()、concat()、includes()。
- 其他：find()、findIndex()、every()、some()、join()。
map和forEach的区别？
解析：map返回新数组（每个元素为回调返回值），可链式调用；forEach无返回值（undefined），仅用于遍历。map适合转换数据，forEach适合执行操作。
null和undefined的区别？
解析：undefined表示未定义（如未初始化的变量、函数无返回值）；null表示空值（主动赋值，如let a = null）。两者==为true，===为false。

函数柯里化的概念及实现？
解析：将多参数函数转为单参数函数的链式调用，如f(a,b,c) → f(a)(b)(c)。
实现：

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return (...nextArgs) => curried.apply(this, [...args, ...nextArgs]);
  };
}
// 用法：const add = curry((a,b,c) => a+b+c); add(1)(2)(3) → 6

Object.prototype.toString.call()的作用？
解析：判断数据类型，返回"[object 类型]"，比typeof更准确（如typeof null为"object"，但toString.call(null)为"[object Null]"）。
模块化的几种方案及区别？
解析：
- CommonJS（Node.js）：require导入，module.exports导出，运行时加载，同步执行。
- AMD（RequireJS）：异步加载模块，适合浏览器，用define定义，require加载。
- ES6 Module：import/export，编译时加载，静态分析，支持树摇（Tree-shaking）。

localStorage、sessionStorage和Cookie的区别？
解析：

特性	localStorage	sessionStorage	Cookie
生命周期	永久（手动删）	会话结束（关闭标签）	可设置过期时间
存储大小	约 5MB	约 5MB	约 4KB
通信	同域页面共享	仅当前标签页	同域页面共享，随请求发送
用途	长期存储	临时数据	身份认证（如 token）

for...in和for...of的区别？
解析：for...in遍历对象的可枚举属性（包括原型链），适合对象；for...of遍历可迭代对象（数组、字符串、Map等）的 value，适合数组，不能直接遍历对象（需配合Object.keys()）。
Array.prototype.reduce的用法？
解析：对数组元素累计处理，返回最终结果。参数：回调函数（累计值、当前值、索引、数组）、初始值。
用途：求和、求积、数组转对象、扁平数组等。

js
```
const sum = [1,2,3].reduce((acc, cur) => acc + cur, 0); // 6
```
Proxy和Object.defineProperty的区别？
解析：均用于数据劫持（如 Vue 响应式）。
- Proxy：代理整个对象，可监听更多操作（如delete、in），返回新对象，不修改原对象，支持数组索引和length变化。
- Object.defineProperty：劫持对象属性，需遍历属性，无法监听新增属性和数组变化（需重写数组方法）。
什么是 IIFE？作用是什么？
解析：立即执行函数表达式（Immediately Invoked Function Expression），定义后立即执行，用于创建独立作用域，避免污染全局变量：

js
```
(function() {
  const a = 1; // 局部变量，不影响全局
})();
```
Array.isArray()和typeof判断数组的区别？
解析：typeof arr返回"object"，无法区分数组和对象；Array.isArray(arr)专门判断是否为数组，更准确（如Array.isArray([]) → true，Array.isArray({}) → false）。
String和String对象的区别？
解析：基本类型String（如const str = "abc"）和对象new String("abc")。typeof前者为"string"，后者为"object"。基本类型会自动装箱为对象以调用方法（如str.length）。
JSON.stringify的注意事项？
解析：将对象转为 JSON 字符串，注意：
- 忽略undefined、function、Symbol。
- 循环引用会报错。
- Date对象会转为 ISO 字符串。
- RegExp、Map、Set会转为空对象。
事件委托（事件代理）的原理及优势？
解析：将子元素的事件监听委托给父元素，利用事件冒泡触发。
优势：减少事件监听器数量（优化性能），动态新增的子元素无需重新绑定事件。
示例：

js
```
ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') { // 判断目标元素
    console.log('点击了li');
  }
});
```
Number()和parseInt()的区别？
解析：Number()转换整个值为数字（如Number("12a") → NaN）；parseInt()从开头解析数字，遇到非数字停止（如parseInt("12a") → 12），可指定基数（如parseInt("11", 2) → 3）。
Symbol的作用？
解析：ES6 新增基本类型，用于创建唯一值，避免属性名冲突。用途：
- 作为对象的唯一键（const key = Symbol(); obj[key] = 1）。
- 定义常量（确保唯一）。
- 模拟私有属性（无法通过for...in遍历）。
BigInt的用途？
解析：处理超出Number最大安全整数（2^53 - 1）的大整数，用n后缀表示（如9007199254740993n），可通过BigInt()转换，不能与Number直接运算。
Array.flat()和Array.flatMap()的作用？
解析：flat(depth)将数组扁平化，depth为深度（默认 1，Infinity表示无限）；flatMap()先执行map，再对结果flat(1)，如：

js
```
[1, [2, 3]].flat() → [1, 2, 3]
[1, 2].flatMap(x => [x, x*2]) → [1, 2, 2, 4]
```
Object.keys()、Object.values()、Object.entries()的区别？
解析：keys()返回对象自身可枚举属性的键数组；values()返回值数组；entries()返回[键, 值]数组，便于遍历：

js
```
const obj = { a: 1, b: 2 };
Object.keys(obj) → ['a', 'b']
Object.values(obj) → [1, 2]
Object.entries(obj) → [['a',1], ['b',2]]
```
什么是函数式编程？JS 中如何体现？
解析：强调函数为一等公民，避免副作用，使用纯函数（输入相同则输出相同）。JS 中体现：map、filter、reduce等数组方法，箭头函数，闭包，柯里化等。
try...catch...finally的执行顺序？
解析：try执行代码，若出错进入catch，否则跳过catch，finally无论是否出错都会执行（常用于释放资源）。若try/catch有return，finally仍会执行，且可能覆盖返回值。
with语句的作用及问题？
解析：简化对象属性访问（with(obj) { a = 1; }等价于obj.a = 1）。问题：降低代码可读性，可能引发歧义（如变量名与对象属性冲突），严格模式下禁用，不推荐使用。
Array.from()的作用？
解析：将类数组对象（如arguments、DOM 集合）或可迭代对象（如Set、Map）转为真正的数组，便于使用数组方法：

js
```
const arr = Array.from(document.querySelectorAll('div')); // DOM集合转数组
```
Object.assign()的用法及注意事项？
解析：合并对象，将源对象的可枚举属性复制到目标对象，返回目标对象。注意：浅拷贝，同名属性会覆盖，不能复制继承的属性和Symbol属性（除非显式指定）。
Map和Object的区别？
解析：
- 键类型：Map的键可以是任意类型（包括对象），Object的键只能是字符串或Symbol。
- 迭代：Map可直接迭代，Object需通过Object.keys()等。
- 大小：Map有size属性，Object需手动计算。
- 顺序：Map保留插入顺序，Object在 ES6 前不保证。
Set的作用及常用方法？
解析：存储唯一值的集合（无重复元素）。方法：add()、delete()、has()、clear()，size属性获取长度。用途：数组去重（[...new Set(arr)]）。
Promise.all()、Promise.race()、Promise.allSettled()的区别？
解析：
- all()：等待所有Promise成功，返回结果数组；若有一个失败则立即失败。
- race()：第一个完成的Promise（无论成功或失败）的结果。
- allSettled()：等待所有Promise完成（无论成功失败），返回每个Promise的状态和结果。
Array.includes()和indexOf()的区别？
解析：均用于判断数组是否包含某元素。includes()返回布尔值，可检测NaN（[NaN].includes(NaN) → true）；indexOf()返回索引（-1 表示不存在），无法检测NaN（[NaN].indexOf(NaN) → -1）。
什么是内存泄漏？常见原因？
解析：不再使用的内存未被释放，导致性能下降。常见原因：
- 意外的全局变量（如未声明的变量）。
- 闭包引用未释放的变量。
- 定时器未清除。
- DOM 元素移除后仍有引用。
Function.prototype.bind()的作用？
解析：创建一个新函数，绑定this值和部分参数（柯里化），原函数不变。与call/apply的区别：bind返回函数，需手动调用；call/apply立即执行。
ES6的Module和CommonJS的循环加载处理方式？
解析：
- CommonJS：加载时执行，遇到循环加载返回已执行的部分（未执行的为undefined）。
- ES6 Module：编译时静态分析，依赖关系确定后加载，循环加载时返回引用（未完全初始化的模块）。

如何判断一个对象是否为空？
解析：

function isEmpty(obj) {
  return Object.keys(obj).length === 0 && obj.constructor === Object;
}
// 或使用Object.getOwnPropertyNames()（包括不可枚举属性）

以上题目涵盖了前端面试中 HTML、CSS、JavaScript 的核心知识点，建议结合实际代码练习加深理解，灵活运用到项目中

武汉城市开发者社区

为武汉地区的开发者提供学习、交流和合作的平台。社区聚集了众多技术爱好者和专业人士，涵盖了多个领域，包括人工智能、大数据、云计算、区块链等。社区定期举办技术分享、培训和活动，为开发者提供更多的学习和交流机会。

更多推荐

Playwright MCP 与 Claude 的完美协作：打造网页操作智能体

通过将Claude强大的认知能力与Playwright MCP精准的浏览器操控能力相结合，我们成功地打造了一个能够理解意图、执行复杂操作并适应动态Web环境的智能体。它不再是简单的聊天机器人，而是一个真正能够行动的数字助手。现在，你已经掌握了搭建这个“无所不能”的网页操作智能体的钥匙。从简单的信息查询到复杂的多步骤业务流程自动化，唯一的限制就是你的想象力。快去配置你的环境，向Claude下达第一个