JavaScript Map 函数在对象数组中使用通用键答案

【问题标题】：JavaScript Map function to use generic keys within array of objectsJavaScript Map 函数在对象数组中使用通用键
【发布时间】：2021-03-29 22:28:03
【问题描述】：

我有以下对象数组：

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

以下代码用于构造 Material-UI Select - options 这是上面的对象数组：

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

我的问题是，为了不将其与 option.job_id 和 option.job_name 的实际键名联系起来，因为我正在考虑使用不同的数据集键名，但始终遵循此键值对格式 - 是否可以更改 map 函数以使其更通用，以便不必担心键名但仍返回 Select 下拉列表的数据，即：

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

我想我在问是否可以通过 map 函数访问对象键而不需要知道 job_id 和 job_name ？

【问题讨论】：

不清楚你在问什么。您是要更改数组以更改对象键还是要询问其他内容？
我想我在问是否可以通过映射函数访问对象键而无需知道job_id 和job_name。希望这是有道理的？
@NearHuscarl - 正确。
您需要知道处理中某处的特定键名

标签： javascript reactjs material-ui

【解决方案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) 在上游的某个地方，您确定自己正在处理工作，您可以在没有正则表达式的情况下执行上述操作。

依靠通用接口发送到正确的信息

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; }
}

【讨论】：

【解决方案2】：

如果您希望能够使用动态对象键，听起来您需要某种辅助函数，它可以接收数组和相关键并返回您的菜单项

例如

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

【讨论】：

我看到这种方法的缺点是代码库中必须存在一个既知道job_id 又知道<MenuItem> 的位置。它很容易阅读，但它通过增加其表面积和使设计更加严格来解决问题。