深拷贝数组对象

转载

mb5ff59200ebb3c 2021-09-11 14:10:00

文章标签 json 深拷贝数组对象数组 javascript 文章分类 代码人生

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

一、背景

某个项目里，存在一个对象数组，我用 lodash 的 filter() 函数，分别生成了 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 } ]