JavaScript拷貝複製JSON對象

應用場景

JavaScript中，把對象objA賦值給objB之後，改變objB的值，objA會跟着改變。這是因爲默認執行淺拷貝，也就是在內存中只複製了一個指針給了objB，內存中的數據本身並沒有被複制。

如果我們需要一個深拷貝，也就是執行 objB = objA 之後，讓 objB 和 objA 再也沒有直接關聯，該如何操作？

方法一

ES6新特性

const clone = {...original}

示例：

let a = {key1: 1}
let b = {...a}
b.key1 = 2
console.log(a) // {key1: 1}

注意: 這種方式只能用於單層json對象，也就是對象中的每個value都是基本類型，沒有嵌套。

方法二

ES6新特性

const clone = Object.assign({}, original)

示例：

var a = { key1: 1 };
var b = Object.assign({}, a);
b.a-=key1 = 2
console.log(a) // {key1: 1}

注意: 這種方式只能用於單層json對象，也就是對象中的每個value都是基本類型，沒有嵌套。

方法三

const clone = JSON.parse(JSON.stringify(original));

這個是可以對多層json對象進行拷貝的

示例：

var a = { 
          key1: {
            subKey: 1
          }
        };
var b = JSON.parse(JSON.stringify(a));
b.key1.subKey = 2
console.log(a)

//打印結果
{
  key1: {
          subKey: 1
        }
}

注意: 使用這個方法，對象中不能有Date, functions, undefined, Infinity, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays這些數據類型。

方法四

使用第三方庫

例如：

• lodash.clonedeep

• angular.copy

• jQuery.extend()

參考鏈接

https://stackoverflow.com/questions/39736397/is-this-a-good-way-to-clone-an-object-in-es6

https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript/122704#122704