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

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，不仅能让我们的代码更简洁健壮，更能让我们从繁琐的造轮子中解放出来，专注于业务逻辑的实现，提高开发效率。