1227 面试题解析：数组去重、响应式和 requestIdleCallback/requestAnimationFrame

见解分享

2023-10-18 19:14:08

引言

技术面试中，掌握热门面试题至关重要。本文旨在解析 1227 面试题，涵盖数组去重、响应式和 requestIdleCallback/requestAnimationFrame。通过深刻理解这些概念，求职者将获得显著优势。

数组去重

数组去重是指从数组中移除重复元素，留下独一无二的元素。JavaScript 中常见的去重方法包括：

Set: 将数组转换为 Set，然后转换为新数组。
Filter: 使用 filter() 方法，保留不重复的元素。
Reduce: 使用 reduce() 方法，将数组元素归并为一个新数组，同时剔除重复项。

响应式设计

响应式设计是创建可适应不同设备和屏幕尺寸的网站或应用程序。关键技术包括：

媒体查询: 使用 CSS 媒体查询响应不同的屏幕尺寸。
弹性布局: 使用 flexbox 或 grid 布局实现弹性响应。
自适应图片: 使用图片响应技术，根据屏幕尺寸调整图片大小。

requestIdleCallback 和 requestAnimationFrame

requestIdleCallback 和 requestAnimationFrame 是用于在浏览器空闲时间执行任务的 API。

requestIdleCallback: 在帧开始时执行任务，优先级低于用户交互。
requestAnimationFrame: 在帧结束前执行任务，优先级高于 requestIdleCallback。

示例代码

// 数组去重
const uniqueArray = [...new Set(array)];

// 响应式设计
const mediaQuery = window.matchMedia("(max-width: 768px)");

// requestIdleCallback
window.requestIdleCallback(() => {
  // 空闲时执行的任务
});

// requestAnimationFrame
window.requestAnimationFrame(() => {
  // 帧结束前执行的任务
});