如何使用 URLSearchParams 删除空查询参数？

Posted 2023-02-22

【中文标题】如何使用 URLSearchParams 删除空查询参数？

【英文标题】：How to remove empty query params using URLSearchParams?

【发布时间】：2020-11-09 08:18:09

【问题描述】：

我正在使用查询参数，并被介绍给URLSearchParams。我正在用它来形成这种要查询的对象，

const x = 
  a: 'hello World'
  b: 23
  c: ''

let params = new URLSearchParams(x);
console.log(params.toString()) // a=hello+World&b=23&c=

在这里，我不想拥有那个 c=，因为它很难看，而且我的 API 不需要它。

所以，我想要这个结果a=hello+World&b=23（没有空查询字符串） 但是，我在 MDN Web Docs 上找不到任何东西。

我该怎么做？

执行以下操作不起作用，因为它似乎直接改变了影响forEach 的params：

const x = 
  a: 'hello World',
  b: '',
  c: ''
;

let params = new URLSearchParams(x);
params.forEach((value, key) =>  // never reaches `c`
  console.log(key, ' => ', value)
  if (value == '')
    params.delete(key);
);
console.log(params.toString());

【参考方案1】：

您可以遍历键值对并删除具有null 值的键：

const x = 
  a: 'hello World',
  b: '',
  c: ''
;

let params = new URLSearchParams(x);
let keysForDel = [];
params.forEach((value, key) => 
  if (value == '') 
    keysForDel.push(key);
  
);

keysForDel.forEach(key => 
  params.delete(key);
);

console.log(params.toString());

【讨论】：

请注意，这也会删除 0 值

@Matt 将条件更改为 v == '' 就可以了，对吧？？

我按那个改了

@RahulBhobe 还有一个小问题你能帮忙吗？？

确定 - 怎么了？

【参考方案2】：

在 javascript ES5+ 中从查询中删除无用参数的简单方法：

for (let param in query)  /* You can get copy by spreading ...query */
  if (query[param] === undefined /* In case of undefined assignment */
    || query[param] === null 
    || query[param] === ""
  )     
    delete query[param];
  

return new URLSearchParams(query).toString();

【参考方案3】：

我自己做的一个干净的方法如下（使用lodash）：

import omitBy from 'lodash/omitBy';
import isEmpty from 'lodash/isEmpty';

const x = 
  a: 'hello World'
  b: 23
  c: ''


const params = new URLSearchParams(omitBy(x, isEmpty));

// mixing other sets
const params = new URLSearchParams(
  otherParam: 'foo', 
  ...omitBy(x, isEmpty)
);