深拷贝数组对象

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

一、浅拷贝

代码

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 的那个对应的对象也改变了。这样不行。

二、深拷贝

代码

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 } ]

三、拓展

其实网上还有一种方法：

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。