使用Object.assign替换对象嵌套属性时报undefined错误如何解决

报错原因 #

• 数组中存在部分image元素的transform属性为undefined，打印验证时仅校验了符合结构的元素，遗漏了异常数据。
• 你提供的示例代码中images数组的三个元素是同一个image对象的引用，第一次map遍历就会把原对象的transform从包含mobile/desktop的父结构直接替换为对应设备的子对象，后续遍历访问transform.mobile/transform.desktop时属性不存在，触发报错。
• 现有写法使用Object.assign直接修改原对象，属于副作用操作，极易引发其他依赖原对象的逻辑异常。

解决方案 #

修正逻辑如下：

1. 构造数组时生成独立对象，避免多个元素指向同一个引用
2. 新增空值判断兜底，兼容异常结构的数据
3. 改为返回新对象，不修改原对象避免副作用

const image = {
  id: "asdasd123213",
  transform: {
    mobile: {
      top: 2,
      left: 1,
      width: 20,
    },
    desktop: {
      top: 20,
      left: 145,
      width: 260,
    }
  }
}
// 构造数组时生成独立对象
const images = [{...image}, {...image}, {...image}];
const isMobile = true;
const newImages = images.map((image) => {
  const transform = image.transform ?? {};
  const deviceTransform = transform[isMobile ? "mobile" : "desktop"] ?? {};
  // 返回新对象，不改动原对象
  return {
    ...image,
    transform: deviceTransform
  };
});
console.log(newImages)

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