Ionic3项目中如何在同一JSON数组内复制添加元素

Hi there! 针对你在Ionic 3项目里想要复制并添加JSON数组元素的需求，这里有几种实用的方案，完全适配你的场景：

如果你想复制数组里某一条数据（比如第一条USA的记录），修改后再添加到数组末尾，可以这么做：

// 假设你的接口返回数据存在这个变量里
let recordArray = [
  {record_id: "1", local_TimeStamp: "16:00:00", country: "USA"},
  {record_id: "2", local_TimeStamp: "17:00:00", country: "Japan"},
  {record_id: "3", local_TimeStamp: "17:00:00", country: "Korea"},
  {record_id: "4", local_TimeStamp: "15:00:00", country: "Thailand"},
  {record_id: "5", local_TimeStamp: "16:00:00", country: "China"}
];

// 深拷贝目标元素（避免修改新元素时影响原数据）
const copiedItem = JSON.parse(JSON.stringify(recordArray[0]));
// 可选：修改复制后的元素属性，比如更新record_id避免重复
copiedItem.record_id = "6";
copiedItem.country = "USA (Duplicate)";

// 将复制后的元素添加到数组
recordArray.push(copiedItem);

这里用JSON.parse(JSON.stringify())做深拷贝，适合你的扁平对象场景；如果你的对象有嵌套结构，这个方法也能搞定。如果只是浅拷贝，用ES6扩展运算符{...recordArray[0]}也可以。

要是你想一次性复制数组里的多条记录（比如前3条）并添加，用map结合扩展运算符就能实现：

// 复制前3个元素并做拷贝
const copiedItems = recordArray.slice(0, 3).map(item => JSON.parse(JSON.stringify(item)));
// 批量修改复制元素的record_id
copiedItems.forEach((item, idx) => {
  item.record_id = String(parseInt(item.record_id) + 5); // 原id+5，避免重复
});
// 把复制的元素批量添加到原数组
recordArray.push(...copiedItems);

如果需要把整个数组的元素都复制一遍，追加到原数组末尾，可以这么写：

// 复制整个数组的元素
const fullCopiedArray = recordArray.map(item => JSON.parse(JSON.stringify(item)));
// 统一更新复制元素的record_id
fullCopiedArray.forEach((item, idx) => {
  item.record_id = String(parseInt(item.record_id) + recordArray.length);
});
// 合并原数组和复制后的数组
recordArray = [...recordArray, ...fullCopiedArray];

关键注意点 #

• 对象拷贝的坑：千万别直接赋值const copiedItem = recordArray[0]，这只是复制了对象的引用，修改新元素会同时改动原数组里的元素，一定要用拷贝方法来隔离引用。
• Ionic模板更新：如果你的数组是绑定到页面*ngFor上的，普通的push或数组合并操作Angular都能自动检测到变化；如果遇到模板不更新的情况，可以注入ChangeDetectorRef，调用detectChanges()手动触发变更检测。

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