无业可守 创新图强
living innovation

必富娱乐APP

当前位置:首页 > 必富娱乐APP >

如何深拷贝一个对象数组?

日期:2019-08-07

一、背景

某个项目里,存在一个对象数组,我用 lodashfilter() 函数,分别生成了 A、B 两个新的对象数组,但我遍历了 B 数组,改造里面的每一个对象,没想到引起 A 数组的里对象发生了变化,引发了错误。

这是一个基础的,对引用类型——对象没有使用深拷贝的问题,我疏忽了,特此记录下。

二、例子

1、浅拷贝

const _ = require("lodash");let one_brand = [ {name: "A", count: 1, value: Infinity}, {name: "B", count: 2},]// 浅拷贝// 方法一let two_brand = one_brand.slice(0);// 方法二(推荐)let two_brand = _.clone(one_brand) console.log("改变前:")console.log(one_brand) console.log(two_brand) two_brand[1].count = 0;console.log("改变后:")console.log(one_brand) console.log(two_brand)

return:

改变前:[ { name: "A", count: 1, value: Infinity }, { name: "B", count: 2 } ][ { name: "A", count: 1, value: Infinity }, { name: "B", count: 2 } ]改变后:[ { name: "A", count: 1, value: Infinity }, { name: "B", count: 0 } ][ { name: "A", count: 1, value: Infinity }, { name: "B", count: 0 } ]

你会发现改变了 two_brand 的一个对象,one_brand 的那个对应的对象也改变了。这样不行。

2、深拷贝

const _ = require("lodash");let one_brand = [ {name: "A", count: 1, value: Infinity}, {name: "B", count: 2},]// 深拷贝// 方法一let two_brand = one_brand.map(o => Object.assign({}, o));// 方法二let two_brand = one_brand.map(o => ({...o}));// 方法三(推荐)let two_brand = _.cloneDeep(one_brand);console.log("改变前:")console.log(one_brand) console.log(two_brand) two_brand[1].count = 0;console.log("改变后:")console.log(one_brand) console.log(two_brand)


return:

改变前:[ { name: "A", count: 1, value: Infinity }, { name: "B", count: 2 } ][ { name: "A", count: 1, value: Infinity }, { name: "B", count: 2 } ]改变后:[ { name: "A", count: 1, value: Infinity }, { name: "B", count: 2 } ][ { name: "A", count: 1, value: Infinity }, { name: "B", count: 0 } ]

3、拓展

其实网上还有一种方法:

let two_brand = JSON.parse(JSON.stringify(one_brand))

这种方法存在很大的问题。虽然他在 stackoverflow 是得票最多的一个答案。(https://stackoverflow.com/questions/597588/how-do-you-clone-an-array-of-objects-in-javascript)

它的主要缺点是,只限于处理可被 JSON.stringify() 编码的值。

JSON.stringify() 将编码 JSON 支持的值。包含 Boolean,Number,String,以及对象,数组。其他任何内容都将被特殊处理。

undefinedFunctionSymbol 时,它被忽略掉InfinityNaN 会被变成 nullDate 对象会被转化为 String (默认调用date.toISOString())

问:为什么JSON.stringify() 编码 JSON 支持的值那么少呢?

因为JSON是一个通用的文本格式,和语言无关。设想如果将函数定义也stringify的话,如何判断是哪种语言,并且通过合适的方式将其呈现出来将会变得特别复杂。特别是和语言相关的一些特性,比如JavaScript中的Symbol。