JavaScript：如何将数组中匹配对象转为指定结构的单个对象

你写的代码用map遍历数组后返回了带undefined元素的数组，这是因为map会为数组每一项生成结果，没匹配到条件的项默认返回undefined。现在需要改成仅返回符合条件的单个目标对象，同时得到最优实现方式。

推荐方法：用find定位+结构转换 #

find方法会直接返回数组中第一个符合条件的元素，找不到则返回undefined，完全适配“找单个对象”的场景，搭配结构转换就能得到预期结果：

const name = 'test1'
const payload = [
    {
        "manSegChildId": "5497",
        "manSegChildDesc": "test4"
    },
    {
        "manSegChildId": "5314",
        "manSegChildDesc": "test1"
    },
    {
        "manSegChildId": "5159",
        "manSegChildDesc": "test5"
    }
]

// 先找到匹配的原始对象
const matchedItem = payload.find(item => item.manSegChildDesc === name);
// 转换为目标结构，同时把id转成数字（匹配预期输出的类型）
const result = matchedItem ? {
    id: Number(matchedItem.manSegChildId),
    label: matchedItem.manSegChildDesc,
    disabled: true
} : undefined;

console.log(result);

执行后输出：

{
   "id": 5314,
   "label" : "test1",
   "disabled": true
 }

补充：更简洁的写法（可读性稍弱） #

如果想少写一行，可以把转换逻辑和find结合，用可选链避免找不到时报错：

const name = 'test1'
const payload = [/* 原数组内容 */]

const result = payload.find(item => item.manSegChildDesc === name) && {
    id: Number(payload.find(item => item.manSegChildDesc === name).manSegChildId),
    label: name,
    disabled: true
};

console.log(result);

不过这种写法会调用两次find，性能略差，还是推荐第一种方法。

为什么原代码不能用？ #

map的核心是把数组每一项都转换成新元素，生成新数组，不管有没有匹配到条件，都会占一个数组位置，没匹配的就填undefined，这和“只返回单个对象”的需求完全不匹配，所以这个场景下不能用map。

内容的提问来源于stack exchange，提问作者Mitul Panchal