JavaScript中键名动态的对象数组如何遍历获取目标属性值

问题场景 #

示例数据：

let data = [
    { firstName1: 'a',  id: 1, email1: 'a@gmail.com'},
    { firstName2: 'b',  id: 2,  email2: 'b@gmail.com'}
];

原尝试代码（无法获取目标值）：

data.map(ele => <p>{ ele.firstName}</p>)

期望输出：

a
b

核心问题：数组中每个对象的目标属性键名是动态变化的（如firstName1、firstName2），无法通过固定键名直接取值。

解决方案 #

1. 根据键名前缀匹配（推荐，适用于键名有规律的场景）

如果目标属性键名有统一前缀（比如都以firstName开头），可以通过Object.keys()遍历对象键名，筛选出符合规则的键后取值：

const targetValues = data.map(item => {
  // 找到以firstName开头的属性键
  const targetKey = Object.keys(item).find(key => key.startsWith('firstName'));
  // 存在则返回对应值，否则返回空字符串
  return targetKey ? item[targetKey] : '';
});

console.log(targetValues.join('\n'));
// 输出：
// a
// b

2. 排除已知固定属性（适用于目标属性是唯一未知键的场景）

如果对象中除了目标属性，其他属性是固定已知的（比如id、emailX），可以排除这些已知键，取剩余的属性值：

const targetValues = data.map(item => {
  const targetKey = Object.keys(item).find(key => {
    // 排除id和以email开头的键
    return key !== 'id' && !key.startsWith('email');
  });
  return targetKey ? item[targetKey] : '';
});

3. 遍历对象属性直接匹配（通用但需注意判断逻辑）

如果没有明确的键名规律，也可以直接遍历对象的所有属性，通过自定义判断逻辑找到目标键：

const targetValues = data.map(item => {
  for (const key in item) {
    // 这里可以根据实际需求调整判断条件，比如键名包含'Name'
    if (key.includes('Name')) {
      return item[key];
    }
  }
  return '';
});

原代码问题说明 #

原代码中使用固定键名ele.firstName，但实际目标键名是firstName1、firstName2，两者不匹配导致无法获取值。需要通过动态匹配键名的方式，先找到目标属性的键，再通过item[targetKey]的方式取值（注意不能用.语法，因为.后面必须是固定标识符）。

内容的提问来源于stack exchange，提问作者Asif Kaif