JS Array map遇null报cannot read property of undefined错误如何解决

你提供的示例代码存在基础逻辑问题：Groups为数组类型，无法直接通过.name访问属性，需要先指定数组下标（如取首个Group写为Groups[0]）。以下方案完全满足你不能修改原数组、不能生成额外过滤数组的限制，属性不存在时自动返回null，不会抛出访问错误。

最优方案（ES2020+ 原生支持，无额外依赖） #

使用**可选链操作符（?.）配合空值合并操作符（??）**实现安全取值：

// 示例1：取每个元素首个Group的首个name的text值
const result = x.map(y => y?.Groups?.[0]?.name?.[0]?.text ?? null)

// 示例2：如果需要取每个元素下所有Group的text值，嵌套map即可
const result = x.map(y => {
  return y?.Groups?.map(group => group?.name?.[0]?.text ?? null) ?? null
})

可选链会在访问到null/undefined类型的属性时自动终止表达式执行，返回undefined，再通过空值合并操作符统一将不存在的场景返回为null。

旧环境兼容方案 #

如果运行环境不支持ES2020语法，使用短路运算符实现等价逻辑：

const result = x.map(y => {
  return y && y.Groups && y.Groups[0] && y.Groups[0].name && y.Groups[0].name[0] 
    ? y.Groups[0].name[0].text 
    : null
})

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