[经验攻略] JavaScript高频考点精讲：ES6+、异步编程与2026面试核心复盘

在准备前端面试时，掌握从基础到进阶的核心知识点至关重要。本文将系统性梳理JavaScript的关键概念与高频考点，帮助你在复习时有的放矢。

一、动画实现与对象操作

1. 实现持续动画效果
使用 JavaScript 的 setInterval 或 requestAnimationFrame 可以创建平滑的动画。下面是一个元素水平往复移动的例子：

var e = document.getElementById('e');
var flag = true;
var left = 0;
setInterval(() => {
  left == 0 ? flag = true : left == 100 ? flag = false : '';
  flag ? e.style.left = `${left++}px` : e.style.left = `${left--}px`;
}, 1000 / 60);

使用CSS实现动画则更加高效流畅：

#e {
  animation: mymove 5s infinite;
}
@keyframes mymove {
  from { top: 0px; }
  to { top: 200px; }
}

2. 函数封装与异步回调
封装一个返回 Promise 的延时函数，便于在异步流程中使用：

function sleep(time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}
// 使用
sleep(1000).then(() => console.log('1秒后执行'));

3. 判断两个对象相等
一个简单的方法是将其序列化为字符串后比较，但需要注意此方法对函数、undefined等特殊值的处理：

JSON.stringify(obj1) === JSON.stringify(obj2);

二、核心概念与性能优化

4. 浏览器缓存机制

• 强缓存：由 Expires（绝对时间）和 Cache-Control: max-age（相对时间）控制，期间浏览器直接使用本地缓存，不发请求。
• 协商缓存：当强缓存失效，浏览器携带 If-Modified-Since（对应 Last-Modified）或 If-None-Match（对应 ETag）发起请求，服务器验证资源是否变更。深入理解浏览器网络与HTTP协议对性能优化至关重要。

5. WebSocket
相比HTTP轮询，WebSocket提供了真正的全双工通信，协议标识符为 ws（加密为 wss），更适合实时聊天、在线游戏等场景。

6. 深拷贝与浅拷贝

• 浅拷贝：仅复制对象的第一层属性，常用 Object.assign() 或展开运算符 ...。
• 深拷贝：递归复制所有嵌套属性。JSON.parse(JSON.stringify(object)) 是常用方法，但无法处理函数、undefined、循环引用等。

7. 防抖与节流
两者都是控制函数执行频率的优化手段。

• 防抖：在事件被触发n秒后再执行回调，若在n秒内被再次触发，则重新计时。适用于搜索框联想。
• 节流：规定在单位时间内，只能触发一次函数执行。适用于滚动加载、窗口缩放。

8. 事件循环与异步机制
JavaScript 是单线程语言，通过事件循环机制处理异步任务。它维护一个调用栈、一个微任务队列和一个宏任务队列。事件循环会优先清空所有微任务（如 Promise.then, MutationObserver），然后再执行一个宏任务（如 setTimeout, setInterval, I/O），如此循环。

三、JavaScript 全局对象与函数

全局对象提供了语言的基础功能：

• 全局变量：Infinity（正无穷大）、NaN（非数字）、undefined。
• 常用全局函数：
  • encodeURI() / decodeURI()：编码/解码整个URI。
  • parseInt() / parseFloat()：将字符串解析为整数或浮点数。
  • isNaN()：判断一个值是否为 NaN。
  • eval()：执行字符串代码（存在安全风险，慎用）。

四、异步编程演进

从“回调地狱”到现代异步编程，方案不断演进。

1. Promise：ES6引入，代表一个异步操作的最终完成或失败，及其结果值。它有三种状态：pending、fulfilled、rejected，并支持链式调用 .then().catch()，极大地改善了异步代码的可读性。理解并能够手写一个符合规范的 Promise 是面试中的加分项。
2. Async/Await：ES2017引入，基于 Promise 的语法糖。用同步的书写方式处理异步逻辑，代码更加清晰简洁。

   async function fetchData() {
     try {
       const response = await fetch('api/url');
       const data = await response.json();
       console.log(data);
     } catch (error) {
       console.error('Fetch failed:', error);
     }
   }

五、模块化与工程化

• CommonJS：Node.js环境的标准，使用 require() 导入，module.exports 导出。
• ES6 Modules：现代浏览器和构建工具支持的标准，使用 import 和 export 语法，支持静态分析和 Tree Shaking，是当前前端工程化开发的首选。

六、进阶与实战考点

• 内存泄漏：常见原因包括意外的全局变量、未清除的定时器/事件监听器、闭包以及游离的DOM引用。
• 设计模式：在前端框架中广泛运用，如观察者模式（数据响应式原理）、单例模式（全局状态管理）、工厂模式（组件创建）等。
• 性能优化：
  • 减少重绘与回流（如使用 transform 替代 top/left 做动画）。
  • 代码分割与懒加载。
  • 使用 Web Workers 处理密集型计算，避免阻塞主线程。
• 安全性：重点防范XSS（跨站脚本攻击）和CSRF（跨站请求伪造）。应对措施包括对用户输入进行转义、使用 HttpOnly Cookie、实施CSP策略以及验证CSRF Token。
• 新的技术方向：了解服务端渲染、微前端架构、PWA等概念及其适用场景，能体现你的技术视野。