Typescript数组push新对象问题：多次push后仅保留最后一项

嘿，我来帮你捋捋这个问题！从你的代码和描述来看，主要有两个常见原因会导致你遇到这种情况：

1. 浏览器控制台的“引用延迟显示”坑 #

这是前端开发者常碰到的小陷阱：当你用console.log打印数组、对象这类引用类型时，浏览器并不会立刻把当前的数组状态拍个快照给你，而是存了一个指向这个数组的“链接”。等你后来点开控制台里的数组查看详情时，它才会去读取这个数组的最新状态——也就是你所有push操作完成后的最终样子。

所以你看到的“每次打印都只有最后一个元素”，其实是视觉错觉！实际上每次push后数组已经把元素加进去了，只是控制台展开时显示的是最终结果。

怎么验证？ #

把你的打印代码改成这样，打印数组的快照而不是引用：

// 用扩展运算符创建一个新数组，打印当时的状态
console.log([...this.restall]);
// 或者转成JSON字符串，也是快照效果
console.log(JSON.stringify(this.restall));

这样就能看到每次push后的真实数组内容啦。

2. this.restall没正确初始化或被意外重置 #

如果上面的验证后还是只有最后一个元素，那就要检查this.restall的初始化逻辑：

• 一定要在执行这段forEach循环之前，把this.restall初始化为空数组：

  // 比如在类的构造函数里，或者循环前的代码中加上这行
  this.restall = [];
  

• 排查下有没有其他代码在循环过程中不小心把this.restall重置成空数组了（比如某个回调里又写了this.restall = []）。

额外的代码小优化 #

你的嵌套循环可以用flatMap简化一下，代码更清爽：

this.restall = this.restarray.flatMap(element => 
  element.map(elt => ({ name: elt.name, xval: elt.value }))
);
// 再打印验证
console.log(this.restall);

这样也能避免嵌套循环可能带来的潜在问题（不过你用箭头函数的话，this指向是没问题的）。

内容的提问来源于stack exchange，提问作者Jelena M.