50个被低估的JS原生特性，让代码瘦身90%

前端开发中，我们常陷入“依赖膨胀”的怪圈——项目引入了越来越多三方库，但解决的问题却依然如初。数组去重、对象处理、日期格式化、性能优化……这些需求十年来从未改变。

本文将分享50个被严重低估的JS/Web原生特性，它们零依赖、可直接落地，覆盖日常开发高频场景，帮你摆脱冗余依赖。

数据处理类

1. Set：快速数组去重

Set天生去重，查找O(1)，比filter+indexOf快3倍

const uid = [...new Set([101, 102, 102, 103])]; // [101, 102, 103]

2. Array.at(-1)：负索引取末尾元素

告别繁琐的arr[arr.length-1]

const last = ['a', 'b', 'c'].at(-1); // 'c'

3. Object.entries + fromEntries：对象过滤转换

比reduce更直观，适合URL参数清洗

const clean = Object.fromEntries(
  Object.entries({ a: 1, b: '', c: 3 }).filter(([, v]) => v)
); // { a: 1, c: 3 }

4. 空值合并运算符(??, ??=)：精准空值处理

只认null/undefined，保留0和空字符串

const count = 0 ?? 10; // 0
cfg.retries ??= 3; // 仅在未定义时赋值

5. structuredClone：深度拷贝（支持循环引用）

替代lodash.cloneDeep，原生支持Map、Set、循环引用

const copy = structuredClone({ a: 1, b: { c: [2] } });

6. Array.from：快速生成范围数组

告别for循环，游戏排行榜、分页序号一行搞定

const range = Array.from({ length: 5 }, (_, i) => i); // [0,1,2,3,4]

国际化与格式化

7. Intl.NumberFormat：原生货币千分位格式化

零依赖，自动加千分位、货币符号

new Intl.NumberFormat('zh-CN', { 
  style: 'currency', currency: 'CNY' 
}).format(1234); // ¥1,234.00

8. Intl.DateTimeFormat：本地化日期显示

替代moment.js，SEO友好，支持多语言

new Intl.DateTimeFormat('zh-CN', { 
  dateStyle: 'long' 
}).format(new Date('2025-12-22')); // "2025年12月22日"

9. Intl.RelativeTimeFormat：相对时间格式化

社交Feed时间戳神器

new Intl.RelativeTimeFormat('zh').format(-3, 'minute'); // "3分钟前"

10. Intl.Segmenter：中文分词

搜索高亮、文本统计场景直接可用

[...new Intl.Segmenter('zh').segment('JavaScript好玩')].map(i => i.segment);
// ['JavaScript', '好玩']

DOM操作与UI

11. element.closest：向上查找祖先元素

层级调整无需改JS，比parentNode循环更健壮

const list = e.target.closest('.list');

12. element.matches：选择器匹配判断

事件委托里判断点击来源

e.target.matches('.del-btn'); // true/false

13. element.toggleAttribute：布尔属性开关

disabled、checked一键切换

btn.toggleAttribute('disabled');

14. scrollIntoView：平滑滚动

无需额外滚动库，保持60帧流畅

document.querySelector('#top').scrollIntoView({ behavior: 'smooth' });

15. element.animate：关键帧动画

Web Animations API原生支持，减少GSAP依赖

el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300 });

16. IntersectionObserver：懒加载与曝光埋点

替代scroll监听，不阻塞主线程

new IntersectionObserver(entries => 
  entries.forEach(e => e.isIntersecting && loadImg(e.target))
).observe(img);

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

比window.resize更细粒度，图表自适应必备

new ResizeObserver(([e]) => chart.resize(e.contentRect.width))
  .observe(chartDom);

网络与性能

18. fetch + AbortController：请求取消

路由切换无竞态问题

const ac = new AbortController();
fetch(url, { signal: ac.signal });
ac.abort(); // 取消请求

19. URL + URLSearchParams：URL解析拼接

自动编码特殊字符，正则表达式退休

const u = new URL(location.href);
u.searchParams.get('name');
u.searchParams.set('page', 2);

20. PerformanceObserver：性能指标采集

无侵入采集LCP等Web Vitals

new PerformanceObserver(list => 
  list.getEntries().forEach(sendMetric)
).observe({ type: 'LCP', buffered: true });

21. requestIdleCallback：空闲时段执行任务

埋点、日志不抢占渲染资源

requestIdleCallback(() => sendBeacon('/log', data));

22. queueMicrotask：微任务调度

比setTimeout 0更精准，适合DOM批量更新

queueMicrotask(() => updateDOM());

浏览器API

23. BroadcastChannel：同源标签页通信

替代localStorage轮询，即时同步

const bc = new BroadcastChannel('auth');
bc.postMessage({ login: true }); // 其他标签页实时接收

24. Page Visibility API：页面可见性控制

切后台自动暂停视频、动画，节省资源

document.addEventListener('visibilitychange', () => 
  document.hidden ? video.pause() : video.play()
);

25. navigator.share：系统分享面板

一键唤起原生分享，无需拼装SDK

navigator.share?.({ title: '好文', url: location.href });

26. navigator.wakeLock：保持屏幕常亮

直播、演示场景必备，结束自动释放

await navigator.wakeLock.request('screen');

27. EyeDropper：屏幕取色器

设计师直呼内行，返回十六进制色值

const { sRGBHex } = await new EyeDropper().open(); // '#ff5722'

28. File System Access API：本地文件读写

WebIDE场景即开即用，体验媲美桌面

const [fh] = await showOpenFilePicker();
const text = await (await fh.getFile()).text();

29. Clipboard API：剪贴板操作

HTTPS下安全简单，替代execCommand

await navigator.clipboard.writeText('邀请码 9527');

30. navigator.storage.estimate：存储空间查询

大型应用、游戏下载前预检查

const { usage, quota } = await navigator.storage.estimate();

31. navigator.onLine：网络状态检测

弱网提示、离线缓存切换

addEventListener('offline', () => toast('网络已断开'));

异步与工具

32. Promise.allSettled：批量请求容错

部分失败不影响其他结果

const res = await Promise.allSettled([fetchA(), fetchB()]);
const ok = res.filter(r => r.status === 'fulfilled');

33. for...of：可中断的遍历

支持break/continue，遍历各种集合

for (const n of nums) { if (n > 10) break; }

34. BigInt：大整数计算

金融、区块链场景必备，超越Number安全范围

9007199254740993n + 1n; // 9007199254740994n

35. globalThis：跨环境全局对象

一套代码跑遍浏览器、Worker、Node.js

const root = globalThis; // 浏览器下为window

调试与监控

36. console.table：表格化输出调试

数组对象一键成表，调试效率翻倍

console.table(await fetch('/api/users').then(r => r.json()));

37. debugger：源码级断点

配合sourcemap精准调试

function debug() { debugger; } // 命中断点

38. ReportingObserver：捕获浏览器警告

监控deprecated API、CSP违规

new ReportingObserver(reports => 
  reports.forEach(r => sendToMonitor(r))
).observe();

39. CSS.supports：特性兼容性检测

渐进增强无需Modernizr

CSS.supports('aspect-ratio', '1'); // true/false

高级特性

40. WebCodecs：硬件级音视频解码

4K 60帧流畅播放，替代FFmpeg.wasm

const decoder = new VideoDecoder({
  output: f => ctx.drawImage(f, 0, 0),
  error: console.error
});
decoder.configure({ codec: 'vp09.00.10.08' });

41. ReadableStream：流式数据处理

大文件分片读取，内存友好

const reader = response.body.getReader(); // 分块读取

42. BackgroundFetch：PWA后台下载

断网续传，不占用主线程

await registration.backgroundFetch.fetch('vid', ['/course.mp4']);

43. CacheStorage：专业级缓存管理

比localStorage更强大，适合离线应用

const cache = await caches.open('v1');
await cache.add('/api/config');

44. Math工具函数

符号判断、取整、斜边计算

Math.sign(-5); // -1
Math.clamp(value, 0, 100); // 限制范围
Math.hypot(3, 4); // 5（斜边长度）

45. Object.keys/values/entries：安全对象遍历

只遍历自身属性，跳过原型链

Object.keys({ a: 1, b: 2 }); // ['a', 'b']
Object.values({ a: 1, b: 2 }); // [1, 2]

46. Object.assign：对象合并与浅拷贝

合并配置、状态克隆，兼容性好

Object.assign({}, { a: 1 }, { b: 2 }); // { a: 1, b: 2 }

47. Intl.PluralRules：智能单复数判断

多语言文案更地道

const rule = new Intl.PluralRules('en').select(1); // 'one'

48. URLSearchParams转对象

地址栏参数一键解析

const params = Object.fromEntries(new URLSearchParams(location.search));

49. 批量配置兜底

安全设置默认值，不覆盖已有配置

config.timeout ??= 5000;
config.retries ??= 3;

50. 现代循环与迭代

灵活遍历各种数据结构

// Map遍历
for (const [key, value] of map) { /* ... */ }
// Set遍历
for (const item of set) { /* ... */ }

结语

这些原生特性大多已得到现代浏览器广泛支持，能显著减少项目依赖，提升性能和可维护性。建议根据实际需求逐步引入，让你的前端代码更加精简高效。

收藏即生产力，2026年用原生让代码瘦成闪电⚡️吧！