Javascript 过滤结果集时如何避免多个if/else

我有一个页面有左右两个部分。右侧部分根据用户在左侧选择的过滤器显示结果。每次用户选择左边的过滤器并按下按钮时，我都会向服务器查询以获得结果

我注意到我的if/else子句看起来很糟糕，每次我添加一个新的过滤器时，我都要做很多工作。有没有办法避免这种情况

目前我有以下过滤器：

foo、bar、fromdate、todate、profile

我的if/else如下所示：

var query = "?"
if (self.foo === '' && self.bar === '' && self.fromdate === '' && self.todate === '' && self.profile === '')
   query = "";
else if (self.foo.length > 2 && self.bar === '' && self.fromdate === '' && self.todate === '' && self.profile === '')
   query += "foo=" + self.foo;
else if (self.foo.length > 2 && self.bar.length > 2 && self.fromdate === '' && self.todate === '' && self.profile === '')
   query += "foo=" + self.foo + "&bar=" + self.bar;

// ...

xhr.open('GET', apiURL+query)
self.loading = true
xhr.onload = function () {
    self.requests = JSON.parse(xhr.responseText)
    //do stuff
    self.loading = false;
}

问题 有没有办法让if/else更容易理解和管理？

我会用某种方式来做

var query = '?';
query += self.foo.length > 2 ? '&foo=' + self.foo : '';
query += self.bar.length > 2 ? '&bar=' + self.bar : '';
query += self.fromdate ? '&fromdate=' + self.fromdate : '';
query += self.todate ? '&todate=' + self.todate : '';
query += self.profile ? '&profile=' + self.profile : '';

和对象

var self = {
  foo: "hello",
  bar: "w",
  profile: "me"
}

您将以

？&foo=hello&profile=me

的形式获得查询结果。开头的

？&

组合不会影响请求，因此您不需要删除前导的

&

，

我会以某种方式执行此操作

var query = '?';
query += self.foo.length > 2 ? '&foo=' + self.foo : '';
query += self.bar.length > 2 ? '&bar=' + self.bar : '';
query += self.fromdate ? '&fromdate=' + self.fromdate : '';
query += self.todate ? '&todate=' + self.todate : '';
query += self.profile ? '&profile=' + self.profile : '';

和对象

var self = {
  foo: "hello",
  bar: "w",
  profile: "me"
}

您将以

？&foo=hello&profile=me

的形式获得查询结果。开头的

？&

组合不会影响请求，因此您不需要删除前面的

&

我的建议

    var queryParams = [
       'foo',
       'bar',
       'profile',
       etc...
    ]
    var query = '';
    queryParams 
       .forEach(key => query = self[key].length > 2 ? 
           query + `&${key}=${self[key]}` : query );
    query = query.length ? '?' + query : query;

当您想添加密钥时，只需更新queryParams数组，无需触及逻辑。

我的建议

    var queryParams = [
       'foo',
       'bar',
       'profile',
       etc...
    ]
    var query = '';
    queryParams 
       .forEach(key => query = self[key].length > 2 ? 
           query + `&${key}=${self[key]}` : query );
    query = query.length ? '?' + query : query;

---

当您想添加密钥时，只需更新queryParams数组，无需触及逻辑。

也许这个示例会启发您。我希望它是一个简单、声明性和灵活的解决方案——无论在html模板中绑定多少输入到params模型，js代码都保持不变

newvue({
el:“#应用程序”，
数据：{
参数：{}
},
计算：{
查询（）{
变量查询=[]
for（此.params中的param）
if（this.params[param].length>2）
query.push（param+'='+this.params[param]）
查询长度
？query='？'+query.toString（）.replace（/，/g，，&'））
：查询=“”
返回查询
}
},
方法：{
提交（）{
console.log（'my.url'+this.query）
}
}
})

提交

也许这个例子会启发你。我希望它是一个简单、声明性和灵活的解决方案——无论在html模板中绑定多少输入到params模型，js代码都保持不变

newvue({
el:“#应用程序”，
数据：{
参数：{}
},
计算：{
查询（）{
变量查询=[]
for（此.params中的param）
if（this.params[param].length>2）
query.push（param+'='+this.params[param]）
查询长度
？query='？'+query.toString（）.replace（/，/g，，&'））
：查询=“”
返回查询
}
},
方法：{
提交（）{
console.log（'my.url'+this.query）
}
}
})

提交

使用Switch语句（Case）很容易阅读。使用Switch语句（Case）很容易阅读。