JavaScript匹配用户ID颜色码 为数组对象赋值对应颜色属性

你原有代码存在两处问题：

• Array.map 返回对象的语法错误，color 属性被写在了对象字面量外部，无法被正确添加到用户对象中
• 未实现用户ID与颜色编码的匹配逻辑

可以直接通过字符串匹配+数组查找实现需求，完整可运行代码如下：

const users = [
  { id: 'u1pur33' },
  { id: 'u1ora29' }
]

const colors = [
  {color: 'purple', colorCode: 'pur'},
  {color: 'orange', colorCode: 'ora'},
  {color: 'black', colorCode: 'bla'},
  {color: 'pink', colorCode: 'pnk'}
]

const newUsers = users.map(user => {
  // 匹配ID中包含的颜色编码
  const currentColor = colors.find(item => user.id.includes(item.colorCode))
  return {
    ...user,
    color: currentColor?.color ?? ''
  }
})

执行后得到的newUsers结构完全符合预期：

[
  { id: 'u1pur33', color: 'purple' },
  { id: 'u1ora29', color: 'orange' }
]

提示：你给出的期望结果示例中第二行color: orange遗漏了字符串引号，属于语法错误，实际编写时需要补上。

如果处理的用户数据量较大，可以提前将颜色配置转换为键值对映射，减少遍历次数提升性能：

// 预生成编码-颜色名映射表
const colorCodeMap = new Map(colors.map(item => [item.colorCode, item.color]))
const newUsers = users.map(user => {
  let color = ''
  for (const [code, name] of colorCodeMap) {
    if (user.id.includes(code)) {
      color = name
      break
    }
  }
  return { ...user, color }
})

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