Angular 2中如何处理键值对数组结构并实现深克隆？

问题1：遍历数据无控制台输出 #

你当前遇到的遍历无输出问题，核心原因是你拿到的data是一个普通键值对对象，而非数组，但你调用了数组专属的forEach方法——对象本身并没有这个方法，所以这段遍历代码根本不会执行。

你看到的结构[CGOLD-1: Array(6), CGOLD-2: Array(6), …]其实是浏览器控制台对对象的特殊显示格式，本质上它是一个形如：

{
  "CGOLD-1": [/* 6个元素 */],
  "CGOLD-2": [/* 6个元素 */],
  "MGOLD-1": [/* 6个元素 */],
  // ...更多键值对
}

的对象。

修正后的遍历代码 #

针对对象类型的数据，你可以用以下几种方式遍历：

方式1：只遍历对象中的数组值

this.liverateservice.setcallback((data)=>{
  this.baserates = data;
  // 用Object.values提取对象的所有值（也就是那些数组）
  Object.values(this.baserates).forEach((itemArray) => {
    console.log(itemArray); // 现在能正常输出每个数组内容了
  });
});

方式2：同时遍历键名和对应数组

this.liverateservice.setcallback((data)=>{
  this.baserates = data;
  // 用Object.entries获取键值对数组，解构后同时拿到键名和数组
  Object.entries(this.baserates).forEach(([key, itemArray]) => {
    console.log(`品类：${key}，对应数据：`, itemArray);
  });
});

问题2：实现适配该结构的深克隆函数 #

你当前的deepClone函数存在两个明显问题：

1. 参数类型是Object[]（数组），但你需要处理的是包含数组的对象，类型不匹配；
2. Object.assign({}, item)属于浅拷贝，如果数组内部还嵌套了对象/数组，拷贝会失效，达不到深克隆的效果。

修正后的通用深克隆函数 #

下面是一个能处理对象、数组、嵌套结构的通用深克隆函数，完美适配你的数据结构：

deepClone<T>(target: T): T {
  // 处理基本类型和null/undefined
  if (target === null || typeof target !== 'object') {
    return target;
  }

  // 处理数组类型
  if (Array.isArray(target)) {
    return target.map(item => this.deepClone(item)) as unknown as T;
  }

  // 处理普通对象类型
  const clonedObj = {} as T;
  for (const key in target) {
    if (target.hasOwnProperty(key)) {
      clonedObj[key] = this.deepClone(target[key]);
    }
  }
  return clonedObj;
}

使用该函数处理你的数据 #

this.liverateservice.setcallback((data)=>{
  this.baserates = data;
  // 深克隆整个对象
  this.oldbaserates = this.deepClone(this.baserates);
  // 验证克隆结果
  console.log('原数据：', this.baserates);
  console.log('克隆后的数据：', this.oldbaserates);
});

补充：浅拷贝简化版（确认无嵌套结构时可用） #

如果你的数组里都是数字、字符串这类基本类型，不需要深克隆，也可以用更简单的方式做对象浅拷贝：

shallowCloneObj(obj: Record<string, any>) {
  const cloned = {} as Record<string, any>;
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 对数组做浅拷贝
      cloned[key] = [...obj[key]];
    }
  }
  return cloned;
}

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