JavaScript Map function 在對象數組中使用通用鍵

Question

我有以下對象數組：

[
    {
        "job_id": 1,
        "job_name": "Engineer"
    },
    {
        "job_id": 2,
        "job_name": "Scientist"
    },
    {
        "job_id": 3,
        "job_name": "Teacher"
    }
]

其中以下代碼用於構造 Material-UI Select - 這里的選項是上面的對象數組：

{options.map(option => {
          return (
            <MenuItem key={option.job_id} value={option.job_id}>
              {option.job_name}
            </MenuItem>
          )
})}

我的問題是，為了不將其綁定到option.job_id和option.job_name的實際鍵名，因為我正在查看使用具有不同鍵名的不同數據集，但始終遵循此鍵值對格式 - map function 可以更改為使其更通用，無需擔心鍵名，但仍返回 Select 下拉列表的數據，即：

{options.map(option => {
              return (
                <MenuItem key={option.generic_id} value={option.generic_id}>
                  {option.generic_name}
                </MenuItem>
              )
    })}

我想我在問是否可以通過 map function 訪問 object 密鑰而不需要知道job_id和job_name ？

Answer 1

如果你不能讓上游的鍵更通用，你可以做兩件事之一

1. 在鍵擊中調用站點上的組件之前對其進行規范化

import { pipe, mapKeys } from 'utils';

const normaliseOption = mapKeys(key =>
      key.match(/_id$/) ? 'id'
    : key.match(/_name$/) ? 'name'
    : key
);

options.map(pipe(normaliseOption, option =>
    <MenuItem key={option.id} value={option.id}>
        {option.name}
    </MenuItem>
));

// utils
export const pipe = (...fns) => fns.reduce(
    (f, g) => x => g(f(x))
);

export const mapKeys = f => pipe(
    Object.entries,
    x => x.map(([k, v]) => [f(k), v]),
    Object.fromEntries
);

1.bis) 在上游的某個地方，您確定自己正在處理工作，您可以在沒有正則表達式的情況下執行上述操作。

2. 依靠一個通用接口來調度正確的信息

options.map(option =>
    <MenuItem key={option.getId()} value={option.getId()}>
        {option.getName()}
    </MenuItem>
);

// somewhere you know you are dealing with jobs
import JobOption from './JobOption';
const options = jobs.map(JobOption.of);

export default class JobOption {
    constructor({job_id, job_name}) {
        this.id = job_id;
        this.name = job_name;
    }
    static of (descriptor) { return new JobOption(descriptor); }
    getId () { return this.id; }
    getName () { return this.name; }
}

Answer 2

如果您希望能夠使用動態 object 鍵，聽起來您需要某種幫助器 function 可以接收數組和相關鍵並返回您的菜單項

例如

const menuBuilder = (options, keyProp, labelProp) => options.map(option => (
  <MenuItem key={option[keyProp]} value={option[keyProp]}>
    {option[labelProp]}
  </MenuItem>
))