Unlock JavaScript’s Hidden APIs: URLSearchParams, structuredClone & Object.groupBy

JavaScript and modern browsers have built-in powerful and elegant hidden APIs that can replace complex logic previously requiring dozens of lines with a single line, dramatically improving code readability and development efficiency.

URL Query Parameter Parsing

In the past, extracting a query parameter such as id from a URL required regular expressions or a chain of split calls, resulting in verbose and error‑prone code.

// 以前的方式
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"

Now the URLSearchParams object makes this trivial:

The built‑in URLSearchParams not only shortens code but also handles URL encoding, multiple same‑name parameters, and other edge cases more robustly.

Object Deep Clone

Deep cloning is a common pain point in interviews and work; the widely known but flawed method JSON.parse(JSON.stringify(obj)) cannot handle Date objects, undefined, and other special types.

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" (turned into string)
console.log(copy.id);    // undefined (lost)

Now we have the native, powerful deep‑clone tool structuredClone:

structuredClone

is the officially recommended deep‑clone method, supporting almost all data types (except functions, DOM nodes, etc.) and fully resolves the drawbacks of the JSON approach.

Array Grouping

Grouping a flat array by a property is a frequent data‑processing need.

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

ES2023 introduced Object.groupBy(), making grouping semantic and extremely simple.

Object.groupBy()

translates the intent into a single line of code, offering readability far beyond the complex reduce implementation.

Embracing native APIs not only makes our code cleaner and more robust but also frees us from reinventing wheels, allowing us to focus on business logic and improve development efficiency.