TypeScript使用push()向数组添加对象时的转义与重复问题

问题原因分析 #

1. 反斜杠问题：
   你把JSON.stringify(object)推入数组时，数组元素是JSON格式的字符串。当后续对整个数组执行JSON.stringify，字符串内部的双引号会被JSON规则自动转义（JSON字符串必须用双引号包裹，内部双引号需转义），因此出现大量反斜杠。

2. 重复最后一个对象问题：
   object变量在循环外部声明，整个循环复用同一个对象的引用。每次循环只是修改这个对象的属性值，数组里添加的都是同一个对象的引用，最终所有元素都会指向最后一次修改后的对象。

正确解决方案 #

核心是每次循环创建新对象，直接推入对象本身（而非字符串），既解决引用重复问题，也避免转义反斜杠。

TypeScript代码示例

// 定义原始数据
const data = {
  records: [
    { id: 2463534, token: "135", name: "MNC Rental", number: "0" },
    { id: 2463535, token: "132", name: "ZNC Rental", number: "0" }
  ]
};

// 初始化数组，指定类型（可选，用于TypeScript类型校验）
const editableArray: { i: number; id: number; number: string }[] = [];

for (let i = 0; i < data.records.length; i++) {
  // 每次循环创建新对象，避免复用同一个引用
  const item = {
    i: i,
    id: data.records[i].id,
    number: data.records[i].number
  };
  console.log("当前对象:", item);
  editableArray.push(item); // 推入对象本身，不是JSON字符串
}

// 打印结果
console.log("最终数组:", editableArray);
// 如果需要整个数组的JSON字符串，最后统一转换
console.log("数组JSON格式:", JSON.stringify(editableArray));

简化写法（用map）

更符合现代TypeScript风格的写法，直接用map转换数组：

const editableArray = data.records.map((record, index) => ({
  i: index,
  id: record.id,
  number: record.number
}));

console.log("最终数组:", editableArray);
console.log("数组JSON格式:", JSON.stringify(editableArray));

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