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
相关产品推荐
相关产品推荐

