如何在JavaScript中重构JSON数组？解决slug读取报错问题

问题背景 #

尝试从JSON数组中提取并重构数据，原始数据如下：

const data =
    [
      {
        "name": "EVENTNAME 1",
        "venue": "VENUE 1",
        "starttime": "09:00",
        "endtime": "12:00",
        slug: {
                 "_type" : "slug",
                 "current": "SLUG-1"
              },
       "comments": "COMMENT 1"
      },

      {
        "name": "EVENTNAME 2",
        "venue": "VENUE 2",
        "starttime": "07:00",
        "endtime": "13:00",
        slug: {
                 "_type" : "slug",
                 "current": "SLUG-2"
              },
       "comments": "COMMENT 2"
      },

      {
        "name": "EVENTNAME 3",
        "venue": "VENUE 3",
        "starttime": "10:00",
        "endtime": "12:00",
        slug: {
                 "_type" : "slug",
                 "current": "SLUG-3"
              },
       "comments": "COMMENT 3"
      }
  ]

期望重构为以下格式：

[
      {
        "Name": "EVENTNAME 1",
        "Location": "VENUE 1",
        "Time": "09:00",
        Slug:"SLUG-1"
            
      },

      {
        "Name": "EVENTNAME 2",
        "Location": "VENUE 2",
        "Time": "07:00",
        Slug:"SLUG-2" // 注：原示例此处笔误为SLUG-3，应为SLUG-2
      },

      {
        "Name": "EVENTNAME 3",
        "Location": "VENUE 3",
        "Time": "10:00",
        Slug:"SLUG-3"
      }
  ]

编写的重构代码如下：

const newarray = data.map((item) => {
    return {
      Name: item.name,
      Location: item.venue,
      Time: item.starttime,
      Slug: item.slug.current
    };
  });

运行时出现报错：

TypeError: Cannot read properties of undefined (reading 'current')

移除Slug相关代码后运行正常，打印原始数据时slug.current均已定义，询问问题原因及解决方法。

问题分析与解决方案 #

报错提示无法读取undefined的current属性，说明某个item的slug字段为undefined或不存在。即使你打印的原始数据看起来都有slug，但实际运行时可能存在以下情况：

• 原始数据中存在隐藏的空项或未初始化的对象（比如数组末尾多余逗号导致的空对象）
• 数据在传递或转换过程中被修改，部分slug字段丢失
• 遍历过程中存在非预期的元素（比如数组被意外添加其他值）

解决方法：添加空值保护 #

在访问item.slug.current前，先检查item.slug是否存在，避免报错。推荐以下几种实现方式：

方式1：可选链操作符（ES2020+）

这是最简洁的写法，当item.slug为undefined或null时，表达式会返回undefined而不报错：

const newarray = data.map((item) => {
    return {
      Name: item.name,
      Location: item.venue,
      Time: item.starttime,
      Slug: item.slug?.current
    };
  });

方式2：条件判断（兼容旧环境）

如果环境不支持可选链，可使用三元运算符做判断：

const newarray = data.map((item) => {
    return {
      Name: item.name,
      Location: item.venue,
      Time: item.starttime,
      Slug: item.slug ? item.slug.current : undefined // 也可设置默认值如空字符串''
    };
  });

方式3：过滤无效项

如果只需要保留包含有效slug的元素，可先过滤数组再重构：

const newarray = data
  .filter(item => item.slug && item.slug.current)
  .map((item) => {
    return {
      Name: item.name,
      Location: item.venue,
      Time: item.starttime,
      Slug: item.slug.current
    };
  });

额外排查建议 #

可以在map函数中添加日志，打印每个item的slug值，确认是否存在异常项：

const newarray = data.map((item, index) => {
    console.log(`第${index+1}项的slug:`, item.slug);
    return {
      Name: item.name,
      Location: item.venue,
      Time: item.starttime,
      Slug: item.slug?.current
    };
  });

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