如何深拷貝一個對象數組？

一、背景

某個項目里，存在一個對象數組，我用 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 } ]

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，以及對象，數組。其他任何內容都將被特殊處理。

undefined，Function，Symbol 時，它被忽略掉
Infinity，NaN 會被變成 null
Date 對象會被轉化為 String (默認調用date.toISOString())

問：為什么JSON.stringify() 編碼 JSON 支持的值那么少呢？

因為JSON是一個通用的文本格式，和語言無關。設想如果將函數定義也stringify的話，如何判斷是哪種語言，並且通過合適的方式將其呈現出來將會變得特別復雜。特別是和語言相關的一些特性，比如JavaScript中的Symbol。