JavaScript对象数组如何筛选recipient属性值以00开头的所有匹配对象

现有代码说明 #

你当前的对象数组结构如下：

const data = [
  {
    id: 1,
    recipient: "001",
    assessment: "Apta",
    score: "2",
    ovarian: "E1",
  },
  {
    id: 2,
    recipient: "ABC2",
    assessment: "Apta",
    score: "2,5",
    ovarian: "E1",
  },
  {
    id: 3,
    recipient: "003",
    assessment: "Refugo",
    score: "3",
    ovarian: "E1",
  },
  {
    id: 4,
    recipient: "004",
    assessment: "Apta",
    score: "4",
    ovarian: "E2",
  },
];

你当前的精确匹配代码存在两个可优化点：

• 没有接收filter方法返回的匹配结果数组
• 在filter回调中逐次调用setSearch，如果有多个匹配结果会被覆盖
  原代码：

const searchAnimal = value => {
  setInput(value);

  JSON.parse(records).filter(item => {
    if (item.recipient === value) {
      setSearch([item]);
    }
  });
};

实现逻辑 #

可以用正则实现需求，也可以用更简洁的字符串原生方法实现：

方案1：使用startsWith字符串方法（更直观，无需正则知识） #

字符串内置的startsWith方法可以直接判断字符串是否以指定字符开头，性能和可读性更好：

const searchAnimal = (prefix = '00') => {
  setInput(prefix);
  // 先解析数据源
  const recordList = JSON.parse(records);
  // 过滤所有recipient以指定前缀开头的对象
  const matchedList = recordList.filter(item => item.recipient.startsWith(prefix));
  // 一次性更新搜索结果
  setSearch(matchedList);
};

直接调用searchAnimal('00')即可拿到所有recipient以00开头的结果，也可以灵活传入其他前缀做通用查询。

方案2：使用正则表达式实现 #

正则的^符号表示匹配字符串开头，搭配test方法即可判断是否符合规则，适合后续需要扩展复杂匹配规则的场景：

const searchAnimal = (prefix = '00') => {
  setInput(prefix);
  const recordList = JSON.parse(records);
  // 动态生成正则，^表示字符串开头
  const reg = new RegExp(`^${prefix}`);
  const matchedList = recordList.filter(item => reg.test(item.recipient));
  setSearch(matchedList);
};

两种方案执行后，返回的结果都会包含id为1、3、4的三个符合要求的对象。

内容的提问来源于stack exchange，提问作者João Lucas