JavaScript if语句内部返回 [英] Javascript if statement inside return

问题描述

我需要一些帮助.我有一个对象的数组 allGames 作为对象从父级收到的.我需要根据其对象属性( venue，date，price )等来过滤此数组.用户将在复选框，下拉菜单或其他内容中输入过滤器值.我需要这些过滤器一起工作.

I need some help. I have an array allGames of objects received as a prop from the parent. I need to filter this array based on its objects properties (venue, date, price) and so on. The filter values will be entered by the user in either a checkbox, a dropdown or something else. I need these filters to work together.

为此，我使用了两个额外的数组:一个名为 filteredGames 的数组，用于保存要在过滤后显示的游戏，另一个名为 searchTerm 的数组将随着输入的输入而更新

For that I am using two extra arrays: one called filteredGames to hold the games to be displayed after filtering and another one called searchTerm that updates as the inputs are entered.

我设法使用以下代码进行了正确过滤:

I managed to filter properly using the following code:

<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"的回调中收到 Error:"TypeError:game.price为null" ，并且搜索完全无效.

The problem I'm having is that not all of the original objects' properties are filled. For example, a game may have its price column empty. When that happens I get Error in callback for watcher "searchTerm": "TypeError: game.price is null" and the search doesn't work at all.

是否可以在return内部添加 if 语句?类似于 if(game.price){game.price.search(this.searchTerm.price)> = 0} ?

Is there a way to add an if statement inside return? Something like if (game.price) { game.price.search(this.searchTerm.price) >= 0 }?

我找不到使它工作的方法.如果不可能的话，还有其他选择吗?

I couldn't find a way to make it work. If it's not possible is there an alternative?

感谢您的帮助.

推荐答案

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

You can do this, only apply the search if the property is truthy like this:

这叫做

短路评估

 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&&表达式始终计算为 false.

It works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false.

编辑，即使有1个搜索匹配，也使用 || 返回true:

Edit Using || to return true even if 1 search matches:

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 :仅过滤和过滤用户输入的所有值，而忽略其他值:

Edit 2 To filter only and all the values entered by the user and ignore the others:

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 if语句内部返回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！