返回中的Javascript if语句

我需要一些帮助。我有一个数组

allGames

，是作为道具从父对象接收的对象。我需要根据其对象属性（

地点、日期、价格

）等筛选此阵列。用户将通过复选框、下拉列表或其他方式输入筛选值。我需要这些过滤器一起工作

为此，我使用了两个额外的数组：一个名为

filteredGames

的数组用于保存过滤后显示的游戏，另一个名为

searchTerm

的数组在输入时更新

我使用以下代码成功地进行了正确筛选：

<input type="text" name="date" v-model="searchTerm.date">
<input type="text" name="venue" v-model="searchTerm.venue">
<input type="text" name="price" v-model="searchTerm.price">

export defaults {
    props: {
      allGames: {
        type: Array,
        required: true
      }
    },
    data: function () {
      return {
        filteredGames: [],
        searchTerm: {
          venue: '',
          date: '',
          price: ''
        }
      }
    },
    watch: {
      searchTerm: {
        handler: function (val) {
          this.filterGames()
          this.$emit('input', val)
        },
        deep: true
      }
    },
    methods: {
      filterGames: function () {
        if (this.filteredGames.length === 0) { this.filteredGames = this.allGames }
        if (this.searchTerm.venue) { this.searchTerm.venue = this.searchTerm.venue.toLowerCase() }
        if (this.searchTerm && this.filteredGames) {
          this.filteredGames = this.allGames.filter(game => {
            return (
              game.venue.toLowerCase().search(this.searchTerm.venue) >= 0 &&
              game.date.search(this.searchTerm.date) >= 0 &&
              game.price.search(this.searchTerm.price) >= 0
            )
          })
        }
      }
    }
}

导出默认值{
道具：{
所有游戏：{
类型：数组，
必填项：true
}
},
数据：函数（）{
返回{
filteredGames:[]，
搜索词：{
地点：''，
日期：''，
价格：''
}
}
},
观察：{
搜索词：{
处理程序：函数（val）{
这是filterGames（）
此.$emit（'input'，val）
},
深：是的
}
},
方法：{
filterGames:函数（）{
如果（this.filteredGames.length==0）{this.filteredGames=this.allGames}
if（this.searchTerm.venue）{this.searchTerm.venue=this.searchTerm.venue.toLowerCase（）}
if（this.searchTerm&&this.filteredGames）{
this.filteredGames=this.allGames.filter（游戏=>{
返回(
game.venture.toLowerCase（）.search（this.searchTerm.venture）>=0&&
game.date.search（this.searchTerm.date）>=0&&
game.price.search（this.searchTerm.price）>=0
)
})
}
}
}
}

我遇到的问题是，并不是所有原始对象的属性都被填充。例如，游戏的

price

列可能为空。当这种情况发生时，我在watcher“searchTerm”的回调中得到

错误：“TypeError:game.price为空”

并且搜索根本不起作用

有没有办法在return中添加

if

语句？类似于

if（game.price）{game.price.search（this.searchTerm.price）>=0}

我找不到办法让它工作。如果不可能，还有其他选择吗

---

非常感谢您的帮助。

您可以这样做，只有当属性是真实的时才应用搜索：

这叫做

短路评估

这是因为在JavaScript中，

true&&expression

总是计算为

expression

，而

false&&expression

总是计算为

false。

编辑使用

|

返回true，即使1个搜索匹配：

return (
          (game.venue && game.venue.toLowerCase().search(this.searchTerm.venue) >= 0) ||
          (game.date && game.date.search(this.searchTerm.date) >= 0) ||
          (game.price && game.price.search(this.searchTerm.price) >= 0)
        );

编辑2仅过滤用户输入的所有值，忽略其他值：

return (
        (!game.venue || game.venue.toLowerCase().search(this.searchTerm.venue) >= 0) &&
        (!game.date || game.date.search(this.searchTerm.date) >= 0) &&
        (!game.price || game.price.toString().search(this.searchTerm.price) >= 0)
      );

---

您可以执行此操作，但仅当属性是真实的时才应用搜索，如下所示：

这叫做

短路评估

这是因为在JavaScript中，

true&&expression

总是计算为

expression

，而

false&&expression

总是计算为

false。

编辑使用

|

返回true，即使1个搜索匹配：

return (
          (game.venue && game.venue.toLowerCase().search(this.searchTerm.venue) >= 0) ||
          (game.date && game.date.search(this.searchTerm.date) >= 0) ||
          (game.price && game.price.search(this.searchTerm.price) >= 0)
        );

编辑2仅过滤用户输入的所有值，忽略其他值：

return (
        (!game.venue || game.venue.toLowerCase().search(this.searchTerm.venue) >= 0) &&
        (!game.date || game.date.search(this.searchTerm.date) >= 0) &&
        (!game.price || game.price.toString().search(this.searchTerm.price) >= 0)
      );

---

只在

if

语句中返回，其他分支呢？如果始终使用返回值，则这可能是问题。只有当用户对搜索词进行了更改并且已定义了

filteredGames

数组时，该问题才应返回。否则它不应该返回任何东西。我认为这是正确的。我遗漏了什么吗？您只在

if

语句中返回，其他分支呢？如果始终使用返回值，则这可能是问题。只有当用户对搜索词进行了更改并且已定义了

filteredGames

数组时，该问题才应返回。否则它不应该返回任何东西。我认为这是正确的。我错过什么了吗？对。谢谢，成功了。现在我有另一个问题。不确定是否与此相关。我在watcher“searchTerm”的回调中遇到了

错误：“TypeError:game.price.search不是一个函数”

并且搜索函数不再工作。搜索函数中是否有任何类型的变量限制？@pharaohlxvi如果price是一个整数，你可以做这个游戏。price.toString（）.search（this.searchTerm.price）完美！谢谢但它仍然没有给我我所期望的。当用户向

场馆添加内容时

会显示具有该值的游戏，这非常完美。问题是，它不会显示在其他字段（例如，

价格

）中没有值的游戏，即使它有预定的

场馆

。不确定是否清晰。我想要的是，过滤器不考虑用户留下的空文件。您的问题还不清楚，您应该使用| |运算符而不是&&以便即使它在任何树条件中找到匹配项，它也会返回trueRight。谢谢，成功了。现在我有另一个问题。不确定是否与此相关。我在watcher“searchTerm”的回调中遇到了

错误：“TypeError:game.price.search不是一个函数”

并且搜索函数不再工作。搜索函数中是否有任何类型的变量限制？@pharaohlxvi如果price是一个整数，你可以做这个游戏。price.toString（）.search（this.searchTerm.price）完美！谢谢但它仍然没有给我我所期望的。当用户向

场馆添加内容时

会显示具有该值的游戏，这非常完美。问题是它不会显示其他字段中没有值的游戏（例如