JS那些好用却被“遗忘”的方法

nys013 2026/3/20 JavaScript

# 前言

有些JS新出属性、方法，其实很有用，只是当时新出的时候浏览器兼容性一般，或者也只是大概了解，实际开发时有很多类似的方法可以实现，所以并不会优先想到用这些，久而久之就遗忘了

随着时间的推移，这些有用的属性兼容性也很好了，是Baseline Widely available了，可以很好地在项目应用了，只是之前不常用，一时也不会想起来

本篇就意在整理总结这些好用却被“遗忘”的方法，比较主观，会持续补充总结

# 当前好用的JS方法

# 数组方法

# Array.prototype.flatMap()

顾名思义，就是flat和map方法的结合，它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法（arr.map(...args).flat()），但比分别调用这两个方法稍微更高效一些。

此外该方法还可以在 map()方法过程中添加和删除元素，故map和filter的链式调用，用一个flatMap就可以搞定。想要删除的元素返回空数组如[]，想要添加的元素放在数组里如[1]

# Array.prototype.toSpliced()

Array.prototype.spliced()是直接修改原数组的，若是想不影响原数组，还需要先拷贝一下，而toSpliced()则是 splice() 方法的复制版本，它会返回一个新数组。

同理还有Array.prototype.toReversed()是reversed()的复制版

记得前几年，火狐还不支持会报错，现在是都支持了

# Array.prototype.values()

返回一个新的数组迭代器对象，该对象迭代数组中每个元素的值。

结合后文中的Iterator Helpers相关方法使用

# 对象方法

# Object.entries()

Object.entries() 静态方法返回一个数组，包含给定对象自有的可枚举字符串键属性的键值对。

通常用于与 Map 互转，或者是遍历对象的键值都有用的情况，因为对象遍历的方法有很多，比如for...in、Object.keys()、Object.values()

这些方法都是只用其中的键或者值，虽然获取到键就能获取到值，但是写起来还是Object.entries()更合适

与之相对的，就是Object.fromEntries()，其静态方法将键值对列表转换为一个对象

两者有时也会搭配起来一起用，常见场景就是遍历一个对象，做了些处理，返回一个新的对象

如

过滤对象属性

const data = { a: 1, b: 'hello', c: 3, d: true };
const numbersOnly = Object.fromEntries(
  Object.entries(data).filter(([_, value]) => typeof value === 'number')
);
console.log(numbersOnly); // { a: 1, c: 3 }

交换键值对

const roles = { admin: 'alice', editor: 'bob' };
const swapped = Object.fromEntries(
  Object.entries(roles).map(([key, value]) => [value, key])
);
console.log(swapped); // { alice: 'admin', bob: 'editor' }

# 其他

# AbortController

MDN描述如下：

AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

你可以使用 AbortController() 构造函数创建一个新的 AbortController 对象。使用 AbortSignal 对象可以完成与异步操作的通信。

常见用法为取消fetch请求：手动点击取消、超时取消等等

async function fetchData() {
  const controller = new AbortController();
  const request = fetch(url, {
    // fetch请求传入signal对象
    signal: controller.signal,
  });

  const response = await fetch(request);

  // 取消fetch请求
  controller.abort();
}

不过日常开发都是用的axios多，其有超时和取消请求的api。

所以在日常开发更适合的就是移除监听器了，用一个controller就可以移除所有相应监听器，不用removeEventListener一个个处理了

const controller = new AbortController();
const { signal } = controller;

element.addEventListener('click', handleClick, { signal });
element.addEventListener('scroll', handleScroll, { signal });

// 一次性移除所有监听器
controller.abort();

# 将来好用的JS方法

这些JS方法目前兼容性一般，只是实验性，预计将来兼容性好后会是很有用的方法

# Iterator Helpers

Iterator Helpers 是 JavaScript 新加的特性，提供了一套"惰性求值"（lazy evaluation）的方法，在处理大数据流或无限序列时非常高效

要将普通数组转为Iterator，就可以用到上面提到的Array.prototype.values()

由于每个 helper 都返回一个新的迭代器，可以像数组一样进行链式操作，但计算是延迟的。

// 传统方式：先生成数组，可能占用大量内存
const numbers = [1, 2, 3, 4, 5];
const result = numbers
  .map(x => x * 2)
  .filter(x => x > 5);
// 立即生成 [2,4,6,8,10] 然后过滤，中间数组占用内存

// 使用 Iterator Helpers（惰性）
const iterator = numbers.values();
const transformed = iterator
  .map(x => x * 2)
  .filter(x => x > 5);

// 此时尚未执行任何计算
console.log([...transformed]); // [6,8,10] – 只在展开时计算

基线为Baseline 2025，对兼容性要求不高的项目可以使用了，有要求的等一两年后广泛可用（widely available）便可以在项目中使用了

nys013主页

Choose mode