深拷貝數組對象

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

一、背景

某個項目裡，存在一個對象數組，我用 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))​

它的主要缺點是，隻限于處理可被 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。