Javascript if 语句返回

Question

我需要一些帮助。我有一个从父级作为 prop 接收的对象数组 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
            )
          })
        }
      }
    }
}

我遇到的问题是并非所有原始对象的属性都被填充。例如，游戏的 price 列可能为空。发生这种情况时，我会收到观察者“searchTerm”回调中的错误:“TypeError:game.price is null”并且搜索根本不起作用。

有没有办法在 return 中添加 if 语句？类似于 if (game.price) { game.price.search(this.searchTerm.price) >= 0 }？

我找不到让它发挥作用的方法。如果不可能的话还有其他选择吗？

感谢任何帮助。

Answer 1

您可以执行此操作，仅在属性为 true 时才应用搜索，如下所示:

这就是所谓的

Short-circuit evaluation

 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)
    );

它之所以有效，是因为在 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)
      );