JS/React中如何将对象数组映射为以c开头字母为键的键值对

实现方案 #

核心逻辑是利用小写字母c的Unicode编码值为基准，结合数组遍历的索引生成连续的字母键，再通过数组的reduce方法拼接成目标对象。

基础JS实现代码 #

const data = [
  {name: 'Jane', age: 25},
  {name:'Luke', age: 55},
  {name:'Martha', age: '16'},
  // 其余元素
]

// 取字符c的Unicode编码作为基准值
const baseCharCode = 'c'.charCodeAt(0)
const result = data.reduce((acc, currentItem, index) => {
  // 生成从c开始的连续字母作为键
  const key = String.fromCharCode(baseCharCode + index)
  acc[key] = currentItem
  return acc
}, {})

输出的result就是你要求的结构。

React中使用示例 #

如果是在React项目中使用，推荐用useMemo缓存计算结果，避免重复计算：

import { useMemo } from 'react'

function MyComponent({ data }) {
  const targetObj = useMemo(() => {
    const baseCharCode = 'c'.charCodeAt(0)
    return data.reduce((acc, item, index) => {
      acc[String.fromCharCode(baseCharCode + index)] = item
      return acc
    }, {})
  }, [data])

  // 后续可直接使用targetObj做渲染或其他逻辑
  return <div>{/* 你的组件渲染逻辑 */}</div>
}

注意事项 #

如果你的数组长度超过24个（从c到z共24个字母），上述方法会生成z之后的特殊符号，若需要支持更长的数组，可自行扩展多字母生成逻辑，常规场景下上述代码完全可用。

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