一行代码替代复杂逻辑!JavaScript 隐藏 API 让效率翻倍

JavaScript 和现代浏览器已经为我们内置了许多强大而优雅的“隐藏”API,它们能用一行代码就替代我们曾经需要数十行才能完成的复杂逻辑,让代码的可读性和开发效率实现质的飞跃。

URL查询参数解析

过去,要从一个URL中获取查询参数(如 id),我们通常需要使用正则表达式或一连串的 split 方法,代码冗长且容易出错。

复制
// 以前的方式 function getQueryParam(url, param) { const search = url.split(?)[1]; if (!search) { return null; } const params = search.split(&); for (let i = 0; i < params.length; i++) { const pair = params[i].split(=); if (pair[0] === param) { return decodeURIComponent(pair[1]); } } return null; } const url = https://example.com/page?id=123&category=tech; const id = getQueryParam(url, id); // "123"1.2.3.4.5.6.7.8.9.10.11.12.13.14.

现在,URLSearchParams 对象让这一切变得无比简单:

内置的 URLSearchParams 不仅代码更短,而且在处理URL编码、多个同名参数等边缘情况时更加健壮可靠。

对象深拷贝

深拷贝是面试和工作中的常见痛点,最广为人知但有缺陷的方法是 JSON.parse(JSON.stringify(obj)),它无法处理 Date 对象、undefined、等特殊类型。

复制
const original = { birth: new Date(1990-01-01), id: undefined, }; // 以前的方式 const copy = JSON.parse(JSON.stringify(original)); // 问题暴露 console.log(copy.birth); // "1990-01-01T00:00:00.000Z" (变成了字符串) console.log(copy.id); // undefined (undefined 丢失)1.2.3.4.5.6.7.8.9.10.

现在,我们有了原生的、强大的深拷贝工具 structuredClone:

structuredClone 是官方推荐的深拷贝方式,支持绝大多数数据类型(除函数、DOM节点等),彻底解决了 JSON 方法的弊端。

数组分组

将一个扁平的数组按照某个属性进行分组,是数据处理中非常常见的需求。

复制
const products = [ { name: 苹果, category: 水果 }, { name: 电视, category: 电器 } ]; // 以前的方式 const grouped = products.reduce((acc, product) => { const key = product.category; if (!acc[key]) { acc[key] = []; } acc[key].push(product); return acc; }, {}); // grouped: { 水果: [...], 电器: [...] }1.2.3.4.5.6.7.8.9.10.11.12.13.

ES2023 引入了 Object.groupBy(),让分组操作变得语义化且极其简单。

Object.groupBy() 将一个意图直接翻译成了一行代码,可读性远超复杂的 reduce 实现。

拥抱原生 API,不仅能让我们的代码更简洁健壮,更能让我们从繁琐的造轮子中解放出来,专注于业务逻辑的实现,提高开发效率。

THE END