在項目中，經常會用到拷貝。

淺拷貝和深拷貝，相信大家都知道區別，但是怎么去實現呢？

我會分享一些項目中經常會用到的一些方法，然后再手寫一個深/淺拷貝的方法。

1. Object.assign

相信這個很多人都用過，用過就知道，這個在微信端，ie11或更低版本的ie上并不支持。所以我們就拋棄了這種方法。

這種方法也只是淺拷貝，不能滿足深拷貝的需求

2. 通過es6的擴展運算符...來實現淺拷貝

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

通常，淺拷貝只能解決部分問題。所以我們來看看深拷貝。

3. JSON.parse(JSON.stringify(object))

這個方法在項目中用的挺多的。

let a = {age: 1,jobs: {first: 'FE'} } let b = JSON.parse(JSON.stringify(a)) a.jobs.first = 'native' console.log(b.jobs.first) // FE

但是該方法有局限性：

• 會忽略?undefined
• 會忽略?symbol
• 不能序列化函數
• 不能解決循環引用的對象

自己實現一個深拷貝是很困難的，因為有很多便捷情況需要考慮。比如原型鏈，dom如何處理。所以我是根據項目實現的一個簡易版的深、淺拷貝。

推薦一個庫： lodash

?

var isObject = function(obj) {return obj !== null && (typeof obj === "object" || typeof obj === "function")};var clone = function(obj, deep) {if (!isObject(obj)) {throw new Error(obj + " is not object");}var newObj;var cloneArray = function(item) {var newItem = [];var size = item.length;for (var i = 0; i < size; i++) {var vk = item[i];if (deep && isObject(vk)) {newItem[i] = clone(vk, deep);} else {newItem[i] = vk;}}return newItem;};var cloneObject = function(item) {var newItem = {};Object.keys(item).forEach(function(n) {var v = item[n];if (deep && isObject(v)) {newItem[n] = clone(v, deep);} else {newItem[n] = v;}});return newItem;};if (obj instanceof Array) {newObj = cloneArray(obj);return newObj;}newObj = cloneObject(obj);return newObj;}

?

測試代碼：

var obj1 = {a: 1,b: ["a", "b"]};var obj2 = {b: 2,c: obj1};var obj3 = clone(obj2, true);var obj4 = clone(obj2, false);obj1.b = ["a", "b", "c"];obj1.a = "2";console.log(obj3);console.log(obj4);

輸出結果：

?

?從結果可以看出：

深拷貝obj3的結果不會因為引用類型obj1的改變而改變

淺拷貝obj4的結果會因為引用類型obj1的改變而改變

?

轉載于:https://www.cnblogs.com/thonrt/p/10334483.html

總結

以上是生活随笔為你收集整理的js - 浅拷贝和深拷贝的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。