JavaScript如何解析点表示法字符串取值并动态渲染数据表格

直接用item[i]读取属性时，JS会把传入的字符串当做完整的单层键名查找。遇到user.email这类带点的路径时，实际执行的是查找item下键名就叫user.email的顶层属性，不会自动深入嵌套结构找user对象下的email字段，自然拿不到对应值。

写一个通用的嵌套路径取值工具函数，按点拆分路径后逐层从对象中取值，再替换原来的直接取值逻辑即可。

1. 先定义通用取值函数，兼容路径中间层不存在的场景，避免运行报错：

const getNestedValue = (target, pathStr) => {
  // 按点拆分路径，逐层深入取值
  return pathStr.split('.').reduce((currentLevel, key) => {
    // 当前层存在才继续往下取，否则返回undefined
    return currentLevel?.[key]
  }, target)
}

2. 修改表格渲染逻辑，替换原来的直接取值写法：

// 表头渲染
<thead>
  <tr>
    {head.map((headerName, index) => (
      <th key={index}>{headerName}</th>
    ))}
  </tr>
</thead>

// 表体渲染
<tbody>
  {data.map((rowItem) => (
    <tr key={rowItem._id}>
      {body.map((fieldPath, index) => (
        <td key={index}>{getNestedValue(rowItem, fieldPath)}</td>
      ))}
    </tr>
  ))}
</tbody>

• 对_id、status这类顶层字段，拆分后路径只有一层，取值结果和原写法完全一致，不会影响原有展示
• 对user.email、user.profile.image这类嵌套字段，会自动按点拆分路径逐层深入取值，不需要手动写多层链式判断
• 逻辑做了空值兼容，哪怕某条数据缺少中间嵌套字段，也不会抛出JS报错，对应单元格会渲染为空
• 支持任意层级的嵌套路径，后续如果新增更深层的字段配置，不需要修改取值逻辑

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