javascript - JavaScript Map 函数在对象数组中使用通用键
问题描述
我有以下对象数组:
[
{
"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的实际键名,因为我正在查看使用具有不同键名的不同数据集,但始终遵循此键值对格式 - 映射函数可以是更改为使其更通用,无需担心键名,但仍返回 Select 下拉列表的数据,即:
{options.map(option => {
return (
<MenuItem key={option.generic_id} value={option.generic_id}>
{option.generic_name}
</MenuItem>
)
})}
我想我在问是否可以通过 map 函数访问对象键而不需要知道job_id
and job_name
?
解决方案
如果你不能让上游的键更通用,你可以做两件事之一
- 在键击中调用站点上的组件之前对其进行规范化
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; }
}
推荐阅读
- python - 多输出神经网络(KERAS)的验证数据?
- javafx - 目标的 Hitboxes (Breakout)
- ios - 如何将具有透明背景的图像保存到照片库,Swift?
- javascript - 如何将父回调设置为子状态
- wpf - grid.Focus、TextBox和Delete键交互?
- gmail-api - 回复邮件后如何编程删除用户标签?
- html - PoweShell 脚本单击 HTML 按钮和填写表单
- python - “payment_amount”列中/tickets/new/空值的Django-IntegrityError违反了非空约束
- c# - Lambda 函数在列表 C# 中查找最流行的单词
- ruby-on-rails - 使用外部 API 和性能