JS链式调用map+filter报preview_url空值读取错误，求优化写法

你之前关于.map()返回空数组的猜测可以直接排除——如果map真的返回空数组，后续filter的回调根本不会被执行，完全不可能触发属性读取的错误。
真正的触发链路非常清晰：

1. 接口返回的responseJSON.items数组中，至少有一个条目item的track字段本身就是null/undefined（很多接口对无关联资源的条目会直接返回该字段为null）
2. 经过第一轮.map((item) => item.track)转换后，生成的新数组里包含了null/undefined元素，而不是空数组
3. 执行.filter()回调时，代码直接读取item.preview_url——此时item本身就是null，自然抛出Cannot read property 'preview_url' of null的错误。
   还有个隐蔽的同类触发场景：如果接口偶尔返回track字段为非对象类型（比如数字、空字符串），也会触发同类报错，只是不同类型的报错提示措辞略有区别。

核心优化思路就是每一步属性读取前做空值校验，绝对避免对null/undefined值读取属性，可以根据自己的运行环境选择对应的实现：

• 全环境兼容的基础写法，适配所有浏览器/Node版本，无语法依赖

  var tracks = responseJSON.items
    .map(function(item) {
      // 只有item和item.track都是有效对象时才返回track，否则返回null占位
      return item && typeof item.track === 'object' ? item.track : null
    })
    .filter(function(item) {
      // 过滤掉上一步的null占位值，再判断preview_url
      return item && item.preview_url != null
    })
  

• 支持ES2020可选链语法的简洁写法

  const tracks = responseJSON.items
    .map(item => item?.track)
    // item为null/undefined时，item?.preview_url返回undefined，会被!= null判断直接过滤
    .filter(item => item?.preview_url != null)
  

• 高性能单遍历写法，适合items数组长度较大的场景
  传统map+filter的组合会对数组做两次遍历，换用reduce做单次聚合，性能更高：

  const tracks = responseJSON.items.reduce((result, item) => {
    const track = item?.track
    // 同时校验track本身存在、且有有效preview_url，才压入结果数组
    if (track && track.preview_url != null) {
      result.push(track)
    }
    return result
  }, [])
  

• 不要误以为filter能自动跳过null元素的属性读取：只要filter回调里直接对传入的item取属性，item本身为null时一样会抛错，和前序map步骤的逻辑无关
• 不要在链式调用里无防御读取多级嵌套属性，比如顺手写.map(item => item.track.preview_url)，只要中间某一步的属性值为null，会在对应的读取位置直接抛出错误
• 对接口返回的数据永远不要做“字段一定存在、类型一定正确”的假设，尤其是第三方开放接口，对边界值的防御要写在前面。

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