7个高频实用JS API + 4大Observer神器，搞定前端80%场景在前端开发中，原生 JS API 是提升效率、

在前端开发中，原生 JS API 是提升效率、优化性能的核心利器。很多开发者习惯依赖第三方库，却忽略了原生 API 早已足够强大——既能减少依赖体积，又能避免库封装带来的冗余。本文整合了日常开发中高频使用的基础 API，以及能大幅优化体验的 Observer 系列神器，覆盖数据处理、DOM 操作、异步处理、性能监控等核心场景，助力大家写出更简洁、高效、优雅的代码。

一、基础实用 API：覆盖日常开发核心场景

这类 API 无需额外配置，开箱即用，是前端开发的“基本功”，替代手写逻辑能显著提升代码可读性和维护性。

1. 数据处理 API：告别手写循环

数据处理是前端高频需求，数组、字符串、对象的原生 API 能替代大部分手写循环，让代码更简洁。

数组高阶 API

// 过滤：筛选符合条件的元素
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2,4]

// 映射：转换数组元素
const doubled = numbers.map(num => num * 2); // [2,4,6,8,10]

// 聚合：求和、统计、扁平化等复杂计算
const sum = numbers.reduce((acc, cur) => acc + cur, 0); // 15
// 进阶：对象数组按属性分组
const users = [{name: '张三', age: 20}, {name: '李四', age: 20}, {name: '王五', age: 22}];
const groupedByAge = users.reduce((acc, cur) => {
  acc[cur.age] = acc[cur.age] || [];
  acc[cur.age].push(cur);
  return acc;
}, {});

// 查找：匹配第一个符合条件的元素/索引
const found = numbers.find(num => num > 3); // 4
const foundIndex = numbers.findIndex(num => num > 3); // 3

// 条件判断：是否存在/全部符合条件
const hasEven = numbers.some(num => num % 2 === 0); // true
const allPositive = numbers.every(num => num > 0); // true

字符串处理 API

const str = "Hello JavaScript World";

// 包含判断：替代indexOf !== -1
console.log(str.includes("Java")); // true

// 首尾判断：适用于路径、后缀校验
console.log(str.startsWith("Hello")); // true
console.log(str.endsWith("World")); // true

// 去空格：精准控制前后空格
const dirtyStr = "  前端开发  ";
console.log(dirtyStr.trim()); // "前端开发"
console.log(dirtyStr.trimStart()); // "前端开发  "

// 全局替换：ES2021+ 特性，替代正则/g
const replaceStr = "a,b,a,c,a";
console.log(replaceStr.replaceAll("a", "x")); // "x,b,x,c,x"

对象处理 API

const user = { name: "张三", age: 20, gender: "男" };

// 遍历属性：获取键、值、键值对数组
console.log(Object.keys(user)); // ["name", "age", "gender"]
console.log(Object.values(user)); // ["张三", 20, "男"]
console.log(Object.entries(user)); // [["name","张三"], ["age",20], ["gender","男"]]

// 对象合并：浅拷贝，适用于配置合并
const defaultConfig = { size: "middle", disabled: false };
const customConfig = { size: "large" };
const finalConfig = Object.assign({}, defaultConfig, customConfig); // {size: "large", disabled: false}

// 对象冻结：防止属性被修改，适用于常量对象
const frozenObj = Object.freeze({ type: "admin" });
frozenObj.type = "user"; // 无效果（严格模式下报错）

2. DOM 操作 API：高效操作页面元素

替代传统的 getElementById、getElementsByClassName，API 更统一，操作更灵活。

// 元素选择：querySelectorAll 返回NodeList，支持forEach遍历
const box = document.querySelector(".box"); // 匹配第一个.box
const lis = document.querySelectorAll("ul li");

// 内容操作：textContent优先（避免XSS），innerHTML谨慎使用
box.textContent = "原生API真好用";
box.innerHTML = "<span class='highlight'>原生API真好用</span>";

// 属性操作：自定义属性也能轻松处理
box.setAttribute("data-id", 1001);
console.log(box.getAttribute("data-id")); // 1001
console.log(box.dataset.id); // 1001（dataset简化自定义属性操作）

// 样式操作：classList比直接操作style更优雅
box.classList.add("active"); // 添加类
box.classList.remove("active"); // 移除类
box.classList.toggle("active"); // 切换类（有则删，无则加）
box.classList.contains("active"); // 判断是否有该类

// 动态创建元素：适用于列表渲染、组件插入
const newItem = document.createElement("div");
newItem.className = "item";
newItem.textContent = "动态创建的元素";
document.body.appendChild(newItem); // 插入到body末尾

3. 异步处理 API：解决回调地狱

Promise + async/await 已成为前端异步编程的主流，配合 fetch API 可轻松处理网络请求。

// Promise：封装异步逻辑
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { code: 200, result: "请求成功" };
      data.code === 200 ? resolve(data) : reject("请求失败");
    }, 1000);
  });
};

// async/await：同步化写法，更易读
const handleData = async () => {
  try {
    const res = await fetchData();
    console.log(res.result); // 请求成功
  } catch (err) {
    console.error(err);
  }
};
handleData();

// fetch API：替代XMLHttpRequest，发起网络请求
fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(res => res.json()) // 解析JSON响应
  .then(data => console.log(data))
  .catch(err => console.error("请求异常：", err));

4. 本地存储 API：轻量数据持久化

适用于存储用户偏好、临时数据，无需后端数据库支持。

// localStorage：永久存储，除非手动删除
localStorage.setItem("username", "张三");
console.log(localStorage.getItem("username")); // 张三
localStorage.removeItem("username"); // 删除单个键
// localStorage.clear(); // 清空所有存储

// sessionStorage：会话级存储，关闭页面失效
sessionStorage.setItem("token", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9");
console.log(sessionStorage.getItem("token")); // 读取token

二、Observer 系列 API：前端性能与体验优化神器

Observer 是浏览器提供的高级 API，用于监听 DOM 变化、元素可见性、尺寸变化等，异步执行不阻塞主线程，性能远超传统监听方案，是现代前端优化的核心工具。

1. MutationObserver：监听 DOM 变化

精准监听 DOM 节点的增删改、属性变化、文本内容变化，适用于动态 DOM 监控场景。

// 目标节点
const targetNode = document.querySelector("#app");

// 监听配置
const config = {
  attributes: true, // 监听属性变化
  childList: true, // 监听子节点增删
  subtree: true, // 监听所有后代节点
  attributeOldValue: true // 记录属性旧值
};

// 变化回调
const callback = (mutationsList) => {
  mutationsList.forEach(mutation => {
    switch (mutation.type) {
      case "childList":
        console.log("子节点变化：", mutation.addedNodes, mutation.removedNodes);
        break;
      case "attributes":
        console.log(`属性${mutation.attributeName}变化：旧值=${mutation.oldValue}，新值=${mutation.target.getAttribute(mutation.attributeName)}`);
        break;
    }
  });
};

// 创建并启动观察者
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

// 停止监听（必要时调用，避免内存泄漏）
// observer.disconnect();

应用场景：富文本编辑器内容监控、第三方组件 DOM 变化感知、DOM 操作埋点统计。

2. IntersectionObserver：监听元素可见性

替代传统 scroll 事件 + getBoundingClientRect()，性能拉满，是懒加载、滚动曝光的最优解。

// 回调函数
const callback = (entries) => {
  entries.forEach(entry => {
    // isIntersecting：元素是否进入视口
    if (entry.isIntersecting) {
      console.log(`${entry.target.id} 进入视口`);
      // 图片懒加载示例
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target); // 只监听一次
    } else {
      console.log(`${entry.target.id} 离开视口`);
    }
  });
};

// 配置选项：root为视口，rootMargin提前触发，threshold可见比例
const options = {
  root: null,
  rootMargin: "100px 0px", // 提前100px触发监听
  threshold: 0.3 // 元素30%可见时触发
};

// 创建观察者并监听元素
const observer = new IntersectionObserver(callback, options);
document.querySelectorAll(".lazy-img").forEach(img => observer.observe(img));

应用场景：图片/视频懒加载、滚动曝光埋点、无限滚动列表、吸顶/吸底组件。

3. ResizeObserver：监听元素尺寸变化

精准监听单个元素的宽高变化，替代全局 resize 事件，适配响应式组件更高效。

const box = document.querySelector("#resize-box");

// 创建观察者
const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const { width, height } = entry.contentRect;
    console.log(`元素尺寸变化：宽=${width}px，高=${height}px`);
    // 响应式适配：根据宽度调整字体
    box.style.fontSize = `${width / 20}px`;
  });
});

// 启动监听
resizeObserver.observe(box);

// 停止监听
// resizeObserver.unobserve(box);

应用场景：响应式组件适配、图表尺寸自适应、容器布局动态调整。

4. PerformanceObserver：监听性能数据

用于监控浏览器性能指标，是前端性能优化、埋点分析的重要工具。

// 监听长任务（阻塞主线程超过50ms的任务）
const perfObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(`长任务耗时：${entry.duration.toFixed(2)}ms`);
    console.log(`长任务开始时间：${entry.startTime.toFixed(2)}ms`);
  });
});

// 监听指定性能指标
perfObserver.observe({ entryTypes: ["longtask"] });

// 其他常用指标：navigation（导航性能）、resource（资源加载）、paint（绘制性能）
perfObserver.observe({ entryTypes: ["navigation", "resource"] });

应用场景：前端性能监控、长任务排查、页面加载速度分析、资源加载性能统计。

三、避坑指南与最佳实践

避免内存泄漏：所有 Observer API 使用后，需在组件卸载、页面销毁时调用 disconnect() 或 unobserve()，防止监听实例残留。
API 兼容性：基础 API 兼容性良好，Observer 系列 API 需注意 IE 不支持（可通过 polyfill 兼容旧浏览器）。
性能优化：数组高阶 API 避免嵌套使用（可能导致性能下降），IntersectionObserver 避免同时监听过多元素。
安全问题：innerHTML 可能导致 XSS 攻击，优先使用 textContent；fetch 请求需处理跨域问题。

四、总结

本文整理的基础 API 覆盖了前端开发的核心场景，能替代大部分手写逻辑和第三方库依赖；Observer 系列 API 则专注于性能优化和体验提升，是现代前端开发的必备技能。

熟练掌握这些原生 API，不仅能提升开发效率，还能让代码更简洁、性能更优。建议在项目中主动尝试替换第三方库，深入理解 API 底层原理，逐步构建自己的技术体系。

最后，收藏本文，在开发中遇到对应场景时直接查阅，高效解决问题～欢迎在评论区分享你常用的原生 JS API！