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"
现在,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 丢失)
现在,我们有了原生的、强大的深拷贝工具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: { '水果': [...], '电器': [...] }
ES2024 引入了Object.groupBy(),让分组操作变得语义化且极其简单。

Object.groupBy()将一个意图直接翻译成了一行代码,可读性远超复杂的reduce实现。
拥抱原生 API,不仅能让我们的代码更简洁健壮,更能让我们从繁琐的造轮子中解放出来,专注于业务逻辑的实现,提高开发效率。
