本文共 3248 字，大约阅读时间需要 10 分钟。
JavaScript 面试题解析
一、数据类型
在 JavaScript 中，数据类型主要分为基本数据类型和引用数据类型。基本数据类型包括：
- Number：表示数值（包括整数、浮点数和 NaN）
- String：表示文本字符串
- Boolean：表示布尔值（true 或 false）
- Undefined：表示未定义变量
- Null：表示空值
- Symbol：表示独特的符号类型
- BigInt：表示大整数
而 Object 和 Array 是引用数据类型。
判断数据类型的方法：
- 使用
typeof() 来判断基本数据类型 - 使用
instanceof 来判断引用数据类型
二、HTTP 协议
HTTP 是超文本传输协议，用于浏览器和服务器之间的通信。其特点包括：
无状态性：HTTP 不保存客户端和服务器之间的状态 可请求性：服务器可以根据客户端的请求返回响应 可缓存性：客户端可以缓存服务器返回的资源 HTTP 请求与响应
- 请求行：包含请求方法、资源路径和 HTTP 版本
- 请求头部：包含附加信息，如授权认证、内容类型等
- 空行：标识请求头部结束
- 请求数据：请求的主体内容
响应也由四个部分组成：
- 状态行：包含 HTTP 版本、状态码和状态消息
- 消息报头：包含服务器感知的附加信息
- 空行：标识消息报头结束
- 响应正文：服务器返回给客户端的文本信息
常见的 HTTP 方法
- GET：默认方法，用于从服务器获取资源
- POST：用于提交数据（常用于表单提交）
- HEAD：与 GET 类似，但不返回响应正文
- PUT：用于更新资源
- DELETE：用于删除资源
- CONNECT：用于代理服务器连接
- OPTIONS：用于获取可支持的 HTTP 方法
HTTP 状态码
状态码分为五个类别：
- 1xx：信息性状态（表示请求接收成功）
- 2xx：成功状态（表示请求处理成功）
- 3xx：重定向状态（表示进一步操作需要）
- 4xx：客户端错误（请求语法错误或无法实现）
- 5xx：服务器错误（服务器未能处理合法请求）
三、跨域（Cross-Origin）
什么是跨域？
跨域指的是不同域名或不同源的网页之间的通信。由于浏览器的同源策略，跨域通信受到限制。
跨域的原因
同源策略：浏览器限制不同源的内容互动 安全性：防止恶意脚本访问其他域的数据 跨域的实现方法
前端方式： postMessagewindow.namedocument.domainimage.src（获取图片数据，但返回空对象）jsonp（通过script标签获取数据）
后端方式： - CORS：服务器设置响应头
Access-Control-Allow-Origin - 服务器代理：通过代理服务器访问目标资源
JSONP 跨域
利用 script 标签加载远程脚本，通过 src 属性实现跨域数据获取。优点：
- 简便易行
- 支持 GET 请求 缺点：
- 不支持 POST 请求
- 不安全（若目标服务器不可信）
四、瀑布流布局
瀑布流布局是一种等宽不等高的多列布局，其实现原理包括：
计算页面宽度：确定可放置数据块的列数 记录数据块高度：存储各数据块的高度 绝对定位：依次将数据块填充到页面中 动态更新：当浏览器窗口大小改变或滚动时，重新排列数据块
五、HTML5 和 CSS3
HTML5 新特性
语义化标签：如 article、footer、header 等 新表单控件：calendar、date、time 等 ** WebGL**：用于 3D 渲染 ** WebSocket**：用于实时通信 ** Geolocation**：用于定位服务 CSS3 新特性
选择器扩展：如 ::before、::after 等伪类 渐变效果：linear-gradient 和 radial-gradient 盒阴影和圆角：box-shadow 和 border-radius 文字效果：word-wrap 和 text-overflow 转换效果：transform 和 transition
六、盒模型
标准盒模型
- 宽度 = margin-left + padding-left + width + padding-right + margin-right
- 高度 = margin-top + padding-top + height + padding-bottom + margin-bottom
怪异盒模型
- 宽度 = margin-left + padding-left + width + margin-right
- 高度 = margin-top + padding-top + height + margin-bottom
两种盒模型的区别
- 标准盒模型适用于大多数浏览器
- 怪异盒模型在 IE 浏览器中使用较多
七、闭包（Closure）
什么是闭包？
闭包是函数内部能够访问函数外部变量的能力。常见用途：
提供私有功能 2.缓存变量 闭包的优点
闭包的缺点
八、深拷贝与浅拷贝
- 浅拷贝：仅复制引用（内存地址相同）
- 深拷贝：递归复制对象中的所有属性
实现方法：
JSON.stringify 和 JSON.parse jQuery的 extend 方法
九、事件模型
事件捕获与事件冒泡
- 事件捕获：从最不精确的对象（如
document）开始触发 - 事件冒泡：从最精确的对象（如元素）开始触发
如何控制事件
- 使用
addEventListener 的第三个参数：
取消默认事件
- W3C 方法：
event.preventDefault() - IE 方法：
event.returnValue = false
十、this 指向问题
this 在 JavaScript 中的指向：
全局变量：挂载在 window 对象 函数内变量：指向调用者 箭头函数：指向定义位置 call、apply：可指定 this 对象
十一、new 操作符
new 操作符的作用：
创建一个新对象 将新对象的属性和方法添加到 this 上 返回 this
十二、继承
在 JavaScript 中，对象的继承通过 prototype 实现。常见方式：
构造函数继承： function B extends A { constructor() { this.a = 1; super(); }} ES6 类继承： class B extends A { constructor() { super(); this.a = 1; }}
十三、冒泡排序
冒泡排序的原理：
比较相邻两元素 将较大的元素向上冒泡 重复直到数组排序完成
十四、浏览器标签页通信
方法
Storage：localStorage 和 sessionStorage 地址栏参数 Cookie：小型文本文件存储在客户端 区别
sessionStorage：仅在当前窗口/标签页中有效 localStorage：永久存储 cookie：由客户端管理
十五、性能优化
减少 HTTP 请求
- 压缩静态文件：使用 Gzip 或 Brotli
- 合并请求：将多个资源合并为一个请求
减少 DOM 操作
- 事件委托：减少 DOM 操作次数
- 单次 DOM 操作：避免频繁操作
使用框架
- Vue.js：简化状态管理
- React.js：高效的状态管理
十六、apply 和 call 的区别
apply
- 最多接收两个参数：
thisObj 和 argArray - 适用于需要传递多个参数或参数数组的场景
call
- 可接收多个参数：
thisObj 和后续的参数列表 - 适用于需要改变
this 指向并传递多个参数的场景
区别
apply 的参数格式为数组或 arguments 对象call 的参数直接传递
转载地址：http://uuob.baihongyu.com/