You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular中向数组推入对象:push(obj)与深拷贝方式哪种更优?

两种Angular数组推入写法的优劣分析

先明确两种写法的核心差异:

  • 写法1直接把订阅返回的user对象引用推入数组,数组里的元素和原对象共享同一个引用
  • 写法2通过JSON.parse(JSON.stringify(user))做了一次深拷贝,推入的是原对象的独立副本

哪种方案更优?要看你的业务场景:

优先选写法1的场景

如果满足以下任意一个条件,写法1是更好的选择:

  • 不需要修改数组里的user对象,或者修改时希望同步影响原对象
  • 原user对象不会被外部(比如订阅的数据源、其他组件)修改
  • 数据量较大,或者需要频繁执行推入操作

原因很直接:

  • 写法1性能更高,JSON序列化/反序列化是开销不小的操作,数据多了会明显拖慢运行速度
  • 能保留对象的原型链和原始类型,比如Date对象还是Date类型,而写法2会把它转成字符串;函数、undefined、Symbol这类非JSON支持的类型,写法2会直接丢弃

需要选写法2(或替代方案)的场景

如果需要修改数组里的user对象,同时不想影响原对象,或者原对象可能被外部修改导致数组数据意外变化,这时候需要拷贝对象,但写法2有明显局限性:

  • 无法处理循环引用的对象,会直接报错
  • 丢失非JSON兼容的类型(函数、Symbol、undefined等)
  • Date对象会被转为字符串,后续还要手动转回来

这种场景下,更推荐用structuredClone()替代JSON拷贝,它支持更多类型(Date、Map、Set、循环引用),性能也更优:

someMethod.subscribe((user) => {
  this.users.push(structuredClone(user));
})

内容的提问来源于stack exchange,提问作者Angular animal

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.07 03:55:15