如何根据字符串类型名高效查找对象数组中的对应项-js教程-PHP中文网

本文介绍在 javascript/typescript 中，当面对嵌套结构的数组（如每个元素为单属性对象）时，如何正确通过字符串键（如 'mot'、'tax'）查找目标对象，并推荐更健壮、可维护的数据结构与查询方式。

本文介绍在 javascript/typescript 中，当面对嵌套结构的数组（如每个元素为单属性对象）时，如何正确通过字符串键（如 'mot'、'tax'）查找目标对象，并推荐更健壮、可维护的数据结构与查询方式。

原始数据结构存在设计缺陷：reminderButtonLabels 是一个对象数组，但每个对象仅包含一个动态命名的顶层键（如 { MOT: { ... } }），导致无法直接通过 reminderType 字符串安全访问——因为 reminderButtonLabels.indexOf[reminder.reminderType] 语法本身错误（indexOf 是方法而非属性，且不接受字符串索引），且数组索引与业务语义（如 'MOT'）无直接映射关系。

✅ 推荐重构方案：扁平化 + 显式类型字段
将数组元素统一为具有明确 type 字段的标准对象，大幅提升可读性与可操作性：

export const reminderButtonLabels = [
  {
    label: 'Book garage',
    url: 'xxx',
    type: 'MOT',
  },
  {
    label: 'Tax vehicle',
    url: 'xxx',
    type: 'Tax',
  },
  {
    label: 'Book garage',
    url: 'xxx',
    type: 'Service',
  },
  {
    label: 'Get quote',
    url: 'xxx',
    type: 'Insurance',
  },
];

随后即可使用标准数组方法精准查找：

const ReminderRow: FunctionComponent = ({ reminder }) => {
  // ✅ 正确用法：find() 返回匹配的第一个对象，类型安全
  const buttonConfig = reminderButtonLabels.find(
    (item) => item.type === reminder.reminderType
  );

  console.log('reminder data', buttonConfig);

  // 可安全解构或提供默认值
  const { label = 'N/A', url = '#' } = buttonConfig || {};

  return (
    <button onclick="{()"> window.location.href = url}>
      {label}
    </button>
  );
};

⚠️ 注意事项：

避免使用 indexOf 配合字符串访问——arr.indexOf[key] 是无效语法；indexOf() 用于查找元素值的索引，不支持键名查找；

若必须保留原始嵌套结构（不推荐），可用 find + Object.keys() 动态提取键名判断，但性能与可读性均较差：

const item = reminderButtonLabels.find(obj => 
  Object.keys(obj).some(key => key === reminder.reminderType)
);
const config = item ? item[reminder.reminderType] : null;