TS中如何过滤content为空的数组对象并解决map取值报错

你原有代码存在3个核心问题，修正后即可得到预期结果：

• 遍历目标错误：你要处理的数组存放在value.List属性下，直接遍历value对象本身不符合数据结构
• 过滤逻辑缺失：没有提前剔除content为空的项，导致访问content[0]时触发空指针报错
• 结构嵌套错误：把map返回的结果额外包了一层数组，会产生多余的嵌套层级，同时字段映射时没有把functionId提到对象顶层

正确实现代码如下：

let control: any[] = value.List
  // 先过滤：只保留content数组非空的项
  .filter((item: any) => Array.isArray(item.content) && item.content.length > 0)
  // 再映射：组装需要的字段结构
  .map((item: any) => {
    return {
      id: item.id,
      title: item.title,
      functionId: item.content[0].functionId
    }
  })

执行后console.log(control)的输出为合法的目标结构：

[
  {
    id: 1,
    title: 'hi',
    functionId: 11
  }
]

注：你给出的预期输出示例漏了对象外层的{}，数组中存储的对象必须包裹大括号才是符合JS语法的合法结构。

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