Vue.js 中对象数组查询匹配的实现

vue.js

2024-03-12 18:26:41

使用 Vue.js 在对象数组中查找匹配的查询

作为一名经验丰富的程序员，我经常遇到需要在对象数组中查找匹配查询的场景。在本文中，我将分享一种使用 Vue.js 优雅而有效地解决此问题的方法。

问题陈述

我们有一个包含人员数据的 JSON 对象数组，包括姓名、移动电话号码、爱好和性别。当用户输入查询时，我们希望系统返回匹配的记录。

解决方案

1. 过滤函数

核心逻辑是过滤函数，用于遍历对象数组并检查每个属性是否包含查询字符串。我们可以使用 Vue.js 的 computed 属性来定义此函数。

computed: {
  getUserInput() {
    return this.people.filter((person) => {
      // 检查每个属性是否包含查询字符串
      return (
        person.name.includes(this.query) ||
        person.gender.includes(this.query) ||
        person.mobileNumber.some((number) => number.includes(this.query)) ||
        person.hobbies.some((hobby) => hobby.includes(this.query))
      );
    });
  }
}

2. 简化过滤逻辑

为了简化过滤逻辑，我们可以使用 some 方法和 keys 数组来检查所有属性。

const keys = ['name', 'gender', 'mobileNumber', 'hobbies'];

return this.people.filter((person) => {
  return keys.some((key) => person[key].includes(this.query));
});

改进

1. 箭头函数

我们可以使用 ES6 箭头函数进一步简化代码。

const keys = ['name', 'gender', 'mobileNumber', 'hobbies'];

return this.people.filter((person) => keys.some((key) => person[key].includes(this.query)));

2. 方法定义

将 getUserInput 定义为方法而不是 getter 可以提高性能。

methods: {
  getUserInput() {
    const keys = ['name', 'gender', 'mobileNumber', 'hobbies'];

    return this.people.filter((person) => keys.some((key) => person[key].includes(this.query)));
  }
}