防止高阶数组方法抛出错误

Question

有没有办法防止过滤时抛出错误？conversationMember.Name.toLowerCase()当没有对话成员时，下面的函数有时会失败。如果有帮助的话，这也是 Vue 应用程序中的计算属性。如果您需要更多信息，请询问！filteredConversations() {    var self = this;    var filteredConvos = self.conversations;    filteredConvos = filteredConvos.filter(conversation => {        return conversation.MembershipData.some(conversationMember => {            return conversationMember.Name.toLowerCase().includes(                self.conversationSearchTerm.toLowerCase()            );        });    });    return filteredConvos;},

Answer 1

这似乎与数组没有任何关系。

从你的代码中我理解conversationMember.Name应该是 a string（因为你正在调用.toLowerCase()它），这意味着incudes这里不是Array.prototype.includes, but String.prototype.includes，特别是因为它self.conversationSearchTerm似乎也是一个字符串（你也在调用.toLowerCase()它）。

所以，问题是你正在使用includes一些应该是string但不是的东西。简单的修复方法是当它为假时将其默认为空字符串：

return (conversationMember.Name || '').toLowerCase().includes(

  (self.conversationSearchTerm || '').toLowerCase()

);

附带说明一下，您不需要var self = this;. this由于过滤器是一个箭头函数，因此在过滤器内可用。所以你的函数（我猜它是 acomputed但它也可以是 a method）可能如下所示：

filteredConversations() {

  return this.conversations.filter(c => 

    c.MembershipData.some(md => 

      (md.Name || '').toLowerCase().includes(

        (this.conversationSearchTerm || '').toLowerCase()

      )

    )

  );

}

最后一点：如果您中的任何一个conversations没有MembershipData持有数组，这仍然会失败。为了解决这个问题，您可以将其默认为动态空数组：

 ...

   (c.MembershipData || []).some(md => 

 ...

正如预期的那样，任何没有数组的对话都MembershipData将被函数过滤掉（不包含在结果中） - 因为.some(condition)在空数组上调用时将返回 false。