返回内部的Javascript if语句

Question

我需要一些帮助。我有一个数组allGames 作为来自父级的道具接收的对象。我需要根据它的对象属性（venue, date, price）等过滤这个数组。过滤器值将由用户在复选框、下拉列表或其他内容中输入。我需要这些过滤器一起工作。

为此，我使用了两个额外的数组：一个名为 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 列可能为空。发生这种情况时，我会收到 Error in callback for watcher "searchTerm": "TypeError: game.price is null" 并且搜索根本不起作用。

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

我找不到让它工作的方法。如果不可能，是否有替代方案？

感谢您的帮助。

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

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