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

作者： 小蒋不素小蒋

出处：https://www.cnblogs.com/xjnotxj/p/9810534.html

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

一、背景#

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

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

二、例子#

1、浅拷贝#

Copy

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：

Copy

改变前:
[ { 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、深拷贝#

Copy

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：

Copy

改变前:
[ { 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、拓展#

其实网上还有一种方法：

Copy

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，以及对象，数组。其他任何内容都将被特殊处理。

undefined，Function，Symbol 时，它被忽略掉
Infinity，NaN 会被变成 null
Date 对象会被转化为 String (默认调用date.toISOString())

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

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