如何简化JavaScript map函数代码？能否直接使用对象扩展语法？

可行性结论 #

完全可行，你不需要创建临时变量filterItem2，可以直接在需要返回对象的位置内联使用{ ...filterItem, type: 'chip' }，语法完全合法。

修改后的代码示例 #

方式1：直接内联替代临时变量

filtersToUse = filtersToChip.map((filterItem) => {
    if (filterItem.id === '12345' || filterItem.id === '67890') {
        // 直接嵌套展开基础对象，替代filterItem2
        return { ...{ ...filterItem, type: 'chip' }, labelOverride: 'new-label' };
    }

    return { ...filterItem, type: 'chip' };
})

方式2：更简洁的合并逻辑写法

还可以把重复的ID判断合并，利用逻辑短路进一步简化代码：

filtersToUse = filtersToChip.map((filterItem) => {
    const isSpecialId = ['12345', '67890'].includes(filterItem.id);
    return {
        ...filterItem,
        type: 'chip',
        // 当isSpecialId为true时，自动展开labelOverride属性
        ...(isSpecialId && { labelOverride: 'new-label' })
    };
})

对应的专业术语 #

1. 对象展开语法（Object Spread Syntax）：这是你代码中{ ...filterItem, type: 'chip' }用到的核心语法，ES2018引入，允许将一个对象的所有可枚举属性复制到新的对象字面量中。
2. 内联对象字面量（Inline Object Literal）：直接在返回语句或表达式中创建对象字面量的写法，无需先赋值给临时变量，属于消除冗余临时变量的代码优化手段。

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