Angular2中克隆类型化对象数组遇编译报错，求解决方案

首先，咱们先揪出你遇到的核心问题：你用了for...in来遍历数组，但这是完全错误的用法！for...in是用来遍历对象的可枚举属性的，当你用它遍历数组时，变量p拿到的是数组的索引（比如"0"、"1"这种字符串类型的键），而不是数组里的Product对象，所以p.idProduct自然会报错——字符串哪里来的idProduct属性呀😅

第一步：修正遍历代码 #

把for...in换成正确的数组遍历方式，推荐这几种实用方案：

方式1：for...of循环（最直观，直接遍历数组元素）

for (let p of this.configuratorProducts) {
  const ck = this.accessories.filter(x => x.idProductParent === p.idProduct);
  // 这里可以继续处理筛选后的ck数据
}

方式2：forEach遍历（函数式风格，代码更简洁）

this.configuratorProducts.forEach(p => {
  const ck = this.accessories.filter(x => x.idProductParent === p.idProduct);
  // 编写你的业务处理逻辑
});

方式3：普通for循环（传统索引遍历，适合需要操作索引的场景）

for (let i = 0; i < this.configuratorProducts.length; i++) {
  const p = this.configuratorProducts[i];
  const ck = this.accessories.filter(x => x.idProductParent === p.idProduct);
  // 处理逻辑
}

第二步：关于数组拷贝的补充说明 #

你当前用的拷贝方式：

this.configuratorProducts = this.listProducts.map(x => Object.assign({}, x));

这是浅拷贝，如果你的Product对象里没有嵌套的引用类型属性（比如子对象、数组），这个写法完全够用。但如果Product存在嵌套结构，浅拷贝会导致修改副本里的嵌套属性时，原数组的对应属性也被改动。这种情况下，你可以用深拷贝方案：

深拷贝方案1：JSON序列化（简单但有局限性，无法处理函数、Symbol等特殊类型）

this.configuratorProducts = JSON.parse(JSON.stringify(this.listProducts));

深拷贝方案2：自定义递归拷贝（更灵活，适配复杂对象结构）

function deepCopy<T>(obj: T): T {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Array) return obj.map(item => deepCopy(item)) as T;
  const copy = {} as T;
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

// 使用方式
this.configuratorProducts = this.listProducts.map(x => deepCopy(x));

这样就能确保副本和原数组完全独立，不会互相影响啦。

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