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