如何使查询字符串总是 return 一个数组？

Question

我正在使用查询字符串 (https://www.npmjs.com/package/qs) 来解析 URL 中的参数，如下所示：

http://www.website.com/?filter="bags"&filter="shirts"

但是，如果我没有过滤器或只有一个过滤器，它将 return 字符串或未定义：

http://www.website.com/?filter="bags" // returns 'bags'
http://www.website.com/ // returns undefined

原因是我需要将此结果提供给使用数组的函数/方法。

我想到的一个解决方案是根据 returns:

创建条件

if (typeof query == 'string') {
    query = [query];
} else if (query == undefined) {
    query = [];
}

但这似乎不是最优的。想知道结果是否可以一直是数组。

Answer 1

这样做，if条件检查查询是否未定义。

if (query) {
   query = [query];
} else {
   query = [];
}

Answer 2

我认为你无能为力。不过，您可以使用三元运算符来减少一些代码。如果 query 没有任何内容，以下将 return 一个空数组：

if(!Array.isArray(query))
  query = !!query ? [query] : [];

Answer 3

你可以这样做：

var filter = [];

if(query) {
  filter.push(query);
}

这样，过滤器将始终是一个数组并包含查询过滤器（如果提供）。这种模式并不少见。

Answer 4

我认为你可以做到：

query = !!query ? Array.isArray(query) ? query : [query] : [];

或：

if(!!query) {
  if(!Array.isArray(query)) {
    query = [query];
  }
} else {
  query = [];
}

Answer 5

The reason being I need to feed this result into functions / methods that use an array.

我认为更好的解决方案是不检查查询是 array 还是 undefined，您可以将 function/method 的默认参数添加为数组

例子

function yourFunction(query = []){
    return query;
}

Answer 6

我会初始化一个空查询。假设，你的查询存储在状态中，那么：

const { query } = this.state || { query: [] }

或者，简单地用状态中的空数组初始化查询：

state = {
  query: [] // rather than ''
}

现在，您应该只在处理程序中有值时才设置查询状态：

const query = e.target.value // or whatever the source you get the query from
if(query) {
  this.setState({query: [query]})
}

Answer 7

除了许多现有答案之外的另一个选项，您可以始终将其包装起来，然后过滤掉 undefineds:

let str = 'str';
console.log( [str].filter(v=>v!==undefined) )   // [ 'str' ]

let undf;
console.log( [undf].filter(v=>v!==undefined) )  // [ ]

// Example: filter out undefined
query = [query].filter(v=>v!==undefined)

// Example: passing in a Boolean constructor, since non-empty strings are truthy
query = [query].filter(Boolean)

如何使查询字符串总是 return 一个数组？

How to make query string always return an array?

javascript

query-string

reactjs