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

HTML 部分（20 题）

  1. DOCTYPE 的作用是什么？
    解析：声明文档类型，告诉浏览器该 HTML 文档使用的 HTML 版本规范（如<!DOCTYPE html>表示 HTML5），避免浏览器进入怪异模式（Quirks Mode）。

  2. HTML5 新增了哪些语义化标签？
    解析：<header>、<footer>、<nav>、<article>、<section>、<aside>等。语义化标签提升代码可读性和 SEO 友好性，明确标签用途。

  3. src和href的区别？
    解析：src用于引入资源（如<img src="...">），会替换标签内容，加载时暂停其他资源解析；href用于建立链接关系（如<link href="...">），不会暂停解析，仅表示关联。

  4. data-*属性的用途？
    解析：自定义数据属性，用于存储页面或应用的私有自定义数据，可通过 JS 的element.dataset访问，便于在 HTML 和 JS 间传递数据。

  5. <meta>标签的常见用法？
    解析：设置字符编码（<meta charset="UTF-8">）、视口（<meta name="viewport" content="width=device-width">）、SEO 关键词（<meta name="keywords" content="...">）等。

  6. HTML5 的离线存储方式有哪些？
    解析：localStorage（持久化存储）、sessionStorage（会话级存储）、Cookie、IndexedDB（大型结构化数据）、Application Cache（已废弃，被 Service Worker 替代）。

  7. canvas和svg的区别？
    解析：canvas是像素级绘图，依赖 JS 动态生成，不支持事件监听，适合动画和游戏；svg是矢量图形，基于 XML，支持事件监听，放大不失真，适合图标和图表。

  8. iframe的优缺点？
    解析：优点是可以嵌入其他页面，实现模块化；缺点是影响页面加载速度、SEO 不友好、可能引发安全问题（如 XSS）。

  9. label标签的作用？
    解析：关联表单元素（通过for属性绑定id），点击label会触发关联元素的事件（如复选框选中），提升用户体验。

  10. HTML5 的表单新增属性有哪些？
    解析：required（必填）、placeholder（提示文本）、autocomplete（自动完成）、pattern（验证正则）、type="email/number/etc"（输入类型限制）。

  11. title和alt的区别？
    解析：alt是图片加载失败时的替代文本，用于无障碍访问和 SEO；title是鼠标悬停时的提示文本，可用于任何标签。

  12. 什么是 HTML 语义化？为什么重要？
    解析：语义化是指使用合适的标签表示内容含义（如用<p>表示段落而非<div>）。重要性：提升代码可读性、SEO 优化、无障碍访问（屏幕阅读器依赖语义）。

  13. script标签的defer和async属性区别？
    解析：defer和async均异步加载 JS，不阻塞 HTML 解析；defer按顺序执行，等待 DOM 加载完成后执行；async加载完成后立即执行，顺序不确定。

  14. HTML5 的historyAPI 有什么用？
    解析：用于操作浏览器历史记录，实现无刷新页面跳转（如pushState()、replaceState()），配合 AJAX 构建 SPA（单页应用）。

  15. link标签的rel="preload"作用？
    解析：提前加载关键资源（如 CSS、JS），告诉浏览器该资源优先级高，避免后续加载阻塞，提升性能。

  16. hidden属性和display: none的区别？
    解析：hidden是 HTML 属性，浏览器默认样式为display: none，但可被 CSS 覆盖；display: none是 CSS 样式，元素不显示且不占空间，两者都不会触发事件。

  17. 什么是 Web Components？
    解析：HTML5 的组件化方案，包括 Custom Elements（自定义标签）、Shadow DOM（隔离样式和结构）、HTML Templates（模板），用于构建可复用组件。

  18. picture标签的作用？
    解析：用于响应式图片，通过<source>标签根据屏幕尺寸、分辨率等条件加载不同图片（如media属性控制），优化不同设备的显示效果。

  19. HTML 中的注释语法是什么？有什么注意事项？
    解析：语法<!-- 注释内容 -->。注意：注释不能嵌套，-->是结束符，中间不能包含-->。

  20. base标签的作用？
    解析：指定页面中所有相对 URL 的基准 URL，如<base href="https://example.com/">，则页面中src="image.png"会解析为https://example.com/image.png。

CSS 部分（30 题）

  1. CSS 选择器的优先级规则？
    解析：优先级从高到低：

    • 内联样式（style属性）→ 1000
    • ID 选择器（#id）→ 100
    • 类 / 伪类 / 属性选择器（.class、:hover、[attr]）→ 10
    • 元素 / 伪元素选择器（div、::before）→ 1
      规则：优先级高的覆盖低的，相同优先级后者覆盖前者，!important最高（不推荐滥用）。

  2. box-sizing的取值及区别？
    解析：content-box（默认）：宽高仅包含内容，边框和内边距会增加总尺寸；border-box：宽高包含内容、内边距和边框，总尺寸固定，便于布局。

  3. BFC 是什么？如何触发？
    解析：块级格式化上下文（Block Formatting Context），是一个独立的渲染区域，内部元素布局不受外部影响。触发方式：overflow: hidden、float: left/right、position: absolute/fixed、display: flex/grid等。

  4. float的副作用及清除方法？
    解析：副作用：父元素高度塌陷、后续元素环绕。清除方法：

    • 父元素添加overflow: hidden（触发 BFC）
    • 父元素末尾加空标签并设置clear: both
    • 使用伪元素：.parent::after { content: ''; display: block; clear: both; }

  5. Flex 布局的常用属性？
    解析：容器属性：flex-direction（方向）、justify-content（水平对齐）、align-items（垂直对齐）、flex-wrap（换行）、align-content（多行对齐）。
    项目属性：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基准尺寸）、order（排序）、align-self（单独对齐）。

  6. CSS 定位方式有哪些？区别是什么？
    解析：

    • static（默认）：正常文档流，无定位。
    • relative：相对自身原位置偏移，不脱离文档流。
    • absolute：相对最近的非static祖先定位，脱离文档流。
    • fixed：相对视口定位，脱离文档流，滚动时位置不变。
    • sticky：滚动到阈值时固定（如导航栏），结合relative和fixed。

  7. margin塌陷（重叠）的情况及解决方法？
    解析：相邻块级元素的上下margin会取最大值（而非相加）。解决：

    • 父元素触发 BFC（如overflow: hidden）
    • 用padding或border分隔
    • 子元素设置float或position: absolute（脱离文档流）

  8. CSS 动画和过渡的区别？
    解析：transition（过渡）：需要触发条件（如hover），只能定义开始和结束状态，适合简单动画。
    animation（动画）：无需触发条件，可定义多帧（@keyframes），控制循环、方向等，适合复杂动画。

  9. rem、em、px、vw/vh的区别？
    解析：

    • px：固定像素，不随设备缩放。
    • em：相对父元素字体大小（如父元素font-size: 16px，1em=16px）。
    • rem：相对根元素（html）字体大小，便于响应式布局。
    • vw/vh：相对视口宽度 / 高度（1vw = 视口宽的 1%），适合全屏布局。

  10. 如何实现元素水平垂直居中？
    解析：

    • 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; }

  11. display: none和visibility: hidden的区别？
    解析：display: none：元素不显示，不占空间，不触发事件；visibility: hidden：元素隐藏，仍占空间，子元素可通过visibility: visible显示。

  12. CSS 模块化的解决方案？
    解析：避免样式冲突的方法：

    • CSS-in-JS（如 Styled Components）
    • CSS Modules（类名哈希化）
    • BEM 命名规范（Block-Element-Modifier，如header__title--active）
    • 命名空间（如my-component-title）

  13. z-index的生效条件？
    解析：仅对定位元素（position为relative/absolute/fixed/sticky）生效，且父元素的z-index会限制子元素（子元素无法超出父元素堆叠上下文）。

  14. 什么是 CSS 预处理器？常用的有哪些？
    解析：扩展 CSS 功能的工具，支持变量、嵌套、混合（mixin）等。常用：Sass（.scss/.sass）、Less、Stylus。

  15. 响应式布局的实现方式？
    解析：

    • 媒体查询（@media）：根据屏幕尺寸应用不同样式。
    • 弹性布局（Flex）和网格布局（Grid）。
    • 相对单位（rem、vw）。
    • 图片响应式（max-width: 100%、picture标签）。

  16. line-height的取值方式及作用？
    解析：控制行高，取值：

    • 数值（如1.5）：相对于字体大小的倍数。
    • 百分比（如150%）：相对于父元素字体大小。
    • 长度（如24px）：固定值。
      作用：垂直居中单行文本（line-height等于父元素高度）。

  17. CSS 性能优化方法？
    解析：

    • 减少选择器复杂度（避免嵌套过深）。
    • 合并 CSS 文件，减少请求。
    • 使用contain属性隔离渲染区域。
    • 避免@import（阻塞渲染），改用<link>。
    • 压缩 CSS（如使用 PostCSS）。

  18. transform的常用属性？
    解析：translate(x,y)（平移）、scale(x,y)（缩放）、rotate(deg)（旋转）、skew(x,y)（倾斜）、matrix()（矩阵变换）。transform不会触发重排，性能优于top/left。

  19. box-shadow的语法及作用？
    解析：box-shadow: h-offset v-offset blur spread color inset，用于给元素添加阴影，inset表示内阴影。不影响元素布局（无尺寸变化）。

  20. opacity和rgba()的区别？
    解析：opacity作用于整个元素（包括内容），值 0-1，子元素会继承透明度；rgba()仅影响颜色的透明度，子元素不受影响（如background: rgba(0,0,0,0.5)）。

  21. Grid 布局和 Flex 布局的区别？
    解析：Flex 是一维布局（单行或单列），适合组件内部排列；Grid 是二维布局（行和列），适合整体页面布局，更强大灵活。

  22. @keyframes的作用？
    解析：定义 CSS 动画的关键帧，指定动画在不同阶段的样式，配合animation属性使用，如：

    css

    @keyframes move {
  0% { left: 0; }
  100% { left: 100px; }
}
.box { animation: move 2s; }

  23. pointer-events的作用？
    解析：控制元素是否响应鼠标事件，pointer-events: none表示元素不响应鼠标（点击、hover 等），事件会穿透到下层元素。

  24. CSS 变量（自定义属性）的用法？
    解析：用--var-name: value定义，var(--var-name)使用，可继承，支持 JS 修改，便于主题切换：

    css

    :root { --primary: blue; }
.box { color: var(--primary); }

  25. overflow的取值及作用？
    解析：控制内容溢出时的处理方式：visible（默认，溢出可见）、hidden（隐藏溢出）、scroll（显示滚动条）、auto（必要时显示滚动条）。

  26. white-space的作用？
    解析：控制文本空白和换行：normal（合并空白，自动换行）、nowrap（不换行）、pre（保留空白和换行，类似<pre>）、pre-wrap（保留空白，自动换行）。

  27. content-visibility的作用？
    解析：CSS 性能属性，content-visibility: auto会自动隐藏不可见区域的内容渲染，提升滚动性能（尤其长列表）。

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

    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;
}

  29. filter属性的常用值？
    解析：用于图片滤镜效果，如blur(5px)（模糊）、grayscale(100%)（灰度）、brightness(1.5)（亮度）、opacity(0.5)（透明度）等。

  30. CSS 中的层叠上下文是什么？
    解析：元素在 Z 轴上的堆叠顺序环境，创建层叠上下文的元素：z-index不为auto的定位元素、opacity < 1、transform非none等。同一上下文内按z-index排序，不同上下文按父元素顺序。

JavaScript 部分（50 题）

  1. ==和===的区别？
    解析：==会进行类型转换后比较（如0 == false为true）；===严格比较，类型和值都必须相同（如0 === false为false）。建议优先使用===。

  2. JavaScript 的数据类型有哪些？
    解析：基本类型（7 种）：String、Number、Boolean、Null、Undefined、Symbol（ES6，唯一值）、BigInt（大整数）。
    引用类型：Object（包括Array、Function、Date等）。

  3. 原型和原型链的理解？
    解析：每个对象都有__proto__（隐式原型），指向其构造函数的prototype（显式原型）。当访问对象属性时，若自身没有，会沿原型链向上查找，直至null，这是 JS 继承的基础。

  4. this的指向规则？
    解析：

    • 普通函数：指向调用者（谁调用指向谁，全局调用指向window/global，严格模式下为undefined）。
    • 箭头函数：无this，继承外层作用域的this。
    • 对象方法：指向该对象。
    • 构造函数（new）：指向新创建的实例。
    • call/apply/bind：手动指定this。

  5. 闭包的概念及应用场景？
    解析：函数嵌套中，内层函数引用外层函数的变量，导致外层函数的作用域不被释放。
    应用：私有变量（如计数器）、模块化、防抖节流、柯里化。
    注意：过度使用可能导致内存泄漏。

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

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

      js

      function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
    • 节流（Throttle）：n 秒内只执行一次（如滚动加载）。

      js

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

  7. 原型继承和 Class 继承的区别？
    解析：ES5 原型继承通过Object.create()、修改prototype实现；ES6 的class是语法糖，本质还是原型继承，但更接近传统面向对象语法（extends、super）。

  8. let、const和var的区别？
    解析：

    • 作用域：let/const是块级作用域（{}内），var是函数级作用域。
    • 提升：var会提升变量声明（值为undefined），let/const存在暂时性死区（未声明前使用报错）。
    • 重复声明：var允许重复声明，let/const不允许。
    • const：声明常量，必须初始化，不能重新赋值（但对象属性可修改）。

  9. 箭头函数和普通函数的区别？
    解析：

    • 无this绑定，继承外层this。
    • 不能作为构造函数（不能用new）。
    • 无arguments对象（可用剩余参数...args）。
    • 不能使用yield（不能作为生成器函数）。
    • 语法更简洁（单表达式可省略{}和return）。

  10. 深拷贝和浅拷贝的区别及实现？
    解析：浅拷贝只复制对象引用（如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等）。

  11. 事件冒泡和事件捕获的区别？
    解析：事件冒泡（Bubbling）：事件从触发元素向上传播到父元素；事件捕获（Capturing）：事件从父元素向下传播到触发元素。addEventListener的第三个参数useCapture为true时启用捕获（默认false为冒泡）。

  12. 如何阻止事件冒泡和默认行为？
    解析：

    • 阻止冒泡：event.stopPropagation()（IE 低版本用event.cancelBubble = true）。
    • 阻止默认行为：event.preventDefault()（IE 低版本用event.returnValue = false），如阻止表单提交、链接跳转。

  13. 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));

  14. async/await的作用及使用场景？
    解析：async标记函数返回Promise，await暂停执行，等待Promise完成，语法更接近同步代码，用于简化Promise链式调用。
    场景：处理多个依赖的异步操作（如先获取 A 数据，再用 A 获取 B 数据）。

  15. setTimeout和setInterval的区别？
    解析：setTimeout延迟 n 毫秒后执行一次；setInterval每隔 n 毫秒执行一次。两者都返回定时器 ID，可通过clearTimeout/clearInterval取消。
    注意：setInterval可能因前一次执行未完成导致间隔不准，可改用setTimeout递归调用。

  16. JavaScript 的执行机制（事件循环）？
    解析：JS 是单线程，通过事件循环（Event Loop）处理异步任务：

    • 同步任务进入主线程执行栈。
    • 异步任务（如setTimeout、AJAX）放入任务队列（宏任务 / 微任务）。
    • 主线程空闲时，先执行所有微任务（如Promise.then），再取一个宏任务（如setTimeout回调）进入主线程，重复循环。

  17. 宏任务和微任务的区别？
    解析：

    • 宏任务（Macrotask）：setTimeout、setInterval、DOM事件、AJAX、script整体代码。
    • 微任务（Microtask）：Promise.then/catch/finally、async/await、process.nextTick（Node.js）。
      执行顺序：同步代码 → 微任务队列清空 → 宏任务队列取一个执行 → 重复。

  18. 数组的常用方法？
    解析：

    • 改变原数组：push()、pop()、shift()、unshift()、splice()、sort()、reverse()。
    • 不改变原数组：map()、filter()、reduce()、forEach()、slice()、concat()、includes()。
    • 其他：find()、findIndex()、every()、some()、join()。

  19. map和forEach的区别？
    解析：map返回新数组（每个元素为回调返回值），可链式调用；forEach无返回值（undefined），仅用于遍历。map适合转换数据，forEach适合执行操作。

  20. null和undefined的区别？
    解析：undefined表示未定义（如未初始化的变量、函数无返回值）；null表示空值（主动赋值，如let a = null）。两者==为true，===为false。

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

    js

    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

  22. Object.prototype.toString.call()的作用？
    解析：判断数据类型，返回"[object 类型]"，比typeof更准确（如typeof null为"object"，但toString.call(null)为"[object Null]"）。

  23. 模块化的几种方案及区别？
    解析：

    • CommonJS（Node.js）：require导入，module.exports导出，运行时加载，同步执行。
    • AMD（RequireJS）：异步加载模块，适合浏览器，用define定义，require加载。
    • ES6 Module：import/export，编译时加载，静态分析，支持树摇（Tree-shaking）。

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

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

  25. for...in和for...of的区别？
    解析：for...in遍历对象的可枚举属性（包括原型链），适合对象；for...of遍历可迭代对象（数组、字符串、Map等）的 value，适合数组，不能直接遍历对象（需配合Object.keys()）。

  26. Array.prototype.reduce的用法？
    解析：对数组元素累计处理，返回最终结果。参数：回调函数（累计值、当前值、索引、数组）、初始值。
    用途：求和、求积、数组转对象、扁平数组等。

    js

    const sum = [1,2,3].reduce((acc, cur) => acc + cur, 0); // 6

  27. Proxy和Object.defineProperty的区别？
    解析：均用于数据劫持（如 Vue 响应式）。

    • Proxy：代理整个对象，可监听更多操作（如delete、in），返回新对象，不修改原对象，支持数组索引和length变化。
    • Object.defineProperty：劫持对象属性，需遍历属性，无法监听新增属性和数组变化（需重写数组方法）。

  28. 什么是 IIFE？作用是什么？
    解析：立即执行函数表达式（Immediately Invoked Function Expression），定义后立即执行，用于创建独立作用域，避免污染全局变量：

    js

    (function() {
  const a = 1; // 局部变量，不影响全局
})();

  29. Array.isArray()和typeof判断数组的区别？
    解析：typeof arr返回"object"，无法区分数组和对象；Array.isArray(arr)专门判断是否为数组，更准确（如Array.isArray([]) → true，Array.isArray({}) → false）。

  30. String和String对象的区别？
    解析：基本类型String（如const str = "abc"）和对象new String("abc")。typeof前者为"string"，后者为"object"。基本类型会自动装箱为对象以调用方法（如str.length）。

  31. JSON.stringify的注意事项？
    解析：将对象转为 JSON 字符串，注意：

    • 忽略undefined、function、Symbol。
    • 循环引用会报错。
    • Date对象会转为 ISO 字符串。
    • RegExp、Map、Set会转为空对象。

  32. 事件委托（事件代理）的原理及优势？
    解析：将子元素的事件监听委托给父元素，利用事件冒泡触发。
    优势：减少事件监听器数量（优化性能），动态新增的子元素无需重新绑定事件。
    示例：

    js

    ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') { // 判断目标元素
    console.log('点击了li');
  }
});

  33. Number()和parseInt()的区别？
    解析：Number()转换整个值为数字（如Number("12a") → NaN）；parseInt()从开头解析数字，遇到非数字停止（如parseInt("12a") → 12），可指定基数（如parseInt("11", 2) → 3）。

  34. Symbol的作用？
    解析：ES6 新增基本类型，用于创建唯一值，避免属性名冲突。用途：

    • 作为对象的唯一键（const key = Symbol(); obj[key] = 1）。
    • 定义常量（确保唯一）。
    • 模拟私有属性（无法通过for...in遍历）。

  35. BigInt的用途？
    解析：处理超出Number最大安全整数（2^53 - 1）的大整数，用n后缀表示（如9007199254740993n），可通过BigInt()转换，不能与Number直接运算。

  36. 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]

  37. 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]]

  38. 什么是函数式编程？JS 中如何体现？
    解析：强调函数为一等公民，避免副作用，使用纯函数（输入相同则输出相同）。JS 中体现：map、filter、reduce等数组方法，箭头函数，闭包，柯里化等。

  39. try...catch...finally的执行顺序？
    解析：try执行代码，若出错进入catch，否则跳过catch，finally无论是否出错都会执行（常用于释放资源）。若try/catch有return，finally仍会执行，且可能覆盖返回值。

  40. with语句的作用及问题？
    解析：简化对象属性访问（with(obj) { a = 1; }等价于obj.a = 1）。问题：降低代码可读性，可能引发歧义（如变量名与对象属性冲突），严格模式下禁用，不推荐使用。

  41. Array.from()的作用？
    解析：将类数组对象（如arguments、DOM 集合）或可迭代对象（如Set、Map）转为真正的数组，便于使用数组方法：

    js

    const arr = Array.from(document.querySelectorAll('div')); // DOM集合转数组

  42. Object.assign()的用法及注意事项？
    解析：合并对象，将源对象的可枚举属性复制到目标对象，返回目标对象。注意：浅拷贝，同名属性会覆盖，不能复制继承的属性和Symbol属性（除非显式指定）。

  43. Map和Object的区别？
    解析：

    • 键类型：Map的键可以是任意类型（包括对象），Object的键只能是字符串或Symbol。
    • 迭代：Map可直接迭代，Object需通过Object.keys()等。
    • 大小：Map有size属性，Object需手动计算。
    • 顺序：Map保留插入顺序，Object在 ES6 前不保证。

  44. Set的作用及常用方法？
    解析：存储唯一值的集合（无重复元素）。方法：add()、delete()、has()、clear()，size属性获取长度。用途：数组去重（[...new Set(arr)]）。

  45. Promise.all()、Promise.race()、Promise.allSettled()的区别？
    解析：

    • all()：等待所有Promise成功，返回结果数组；若有一个失败则立即失败。
    • race()：第一个完成的Promise（无论成功或失败）的结果。
    • allSettled()：等待所有Promise完成（无论成功失败），返回每个Promise的状态和结果。

  46. Array.includes()和indexOf()的区别？
    解析：均用于判断数组是否包含某元素。includes()返回布尔值，可检测NaN（[NaN].includes(NaN) → true）；indexOf()返回索引（-1 表示不存在），无法检测NaN（[NaN].indexOf(NaN) → -1）。

  47. 什么是内存泄漏？常见原因？
    解析：不再使用的内存未被释放，导致性能下降。常见原因：

    • 意外的全局变量（如未声明的变量）。
    • 闭包引用未释放的变量。
    • 定时器未清除。
    • DOM 元素移除后仍有引用。

  48. Function.prototype.bind()的作用？
    解析：创建一个新函数，绑定this值和部分参数（柯里化），原函数不变。与call/apply的区别：bind返回函数，需手动调用；call/apply立即执行。

  49. ES6的Module和CommonJS的循环加载处理方式？
    解析：

    • CommonJS：加载时执行，遇到循环加载返回已执行的部分（未执行的为undefined）。
    • ES6 Module：编译时静态分析，依赖关系确定后加载，循环加载时返回引用（未完全初始化的模块）。

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

    js

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

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

# 前端 # javascript # 面试
Logo
武汉城市开发者社区

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

更多推荐

cover

Claude Code Agent Teams：让多个AI替你协作打工 配置指南+使用心法

avatar 武汉城市开发者社区

亮数据“数据集”产品的特点及优势，使用购买过程。

新手用户注册就送25刀试用金:亮数据官方号:

avatar 武汉城市开发者社区
cover

2026 HarmonyOS创新赛·极客赛道线下赋能会武汉站圆满落幕，激发全场景创新浪潮

avatar 武汉城市开发者社区