快捷導(dǎo)航

JS實現(xiàn)數(shù)組淺拷貝和深拷貝的方法

更新時間：2024年01月02日 15:15:59 作者：遇見小美好

淺拷貝創(chuàng)建一個新的對象,來接受重新復(fù)制或引用的對象值,如果對象屬性是基本的數(shù)據(jù)類型,復(fù)制的就是基本類型的值給新對象,這篇文章主要介紹了js實現(xiàn)數(shù)組淺拷貝和深拷貝,需要的朋友可以參考下

淺拷貝：創(chuàng)建一個新的對象，來接受重新復(fù)制或引用的對象值。如果對象屬性是基本的數(shù)據(jù)類型，復(fù)制的就是基本類型的值給新對象；但如果屬性是引用數(shù)據(jù)類型，復(fù)制的就是內(nèi)存中的地址，如果其中一個對象改變了這個內(nèi)存中的地址，會影響到另一個對象，因為兩者共同指向同一個地址。

數(shù)組的淺拷貝

可用concat、slice返回一個新數(shù)組的特性來實現(xiàn)拷貝

var arr = ['old', 1, true, null, undefined];
var new_arr = arr.concat(); // 或者var new_arr = arr.slice()也是一樣的效果;
new_arr[0] = 'new';
console.log(arr); // ["old", 1, true, null, undefined]
console.log(new_arr); // ["new", 1, true, null, undefined]

淺拷貝，還可以用Object.assign()方法實現(xiàn)

let target = {};
let source = { a: { b: 2 } };
Object.assign(target, source);
console.log(target); // { a: { b: 10 } }; 
source.a.b = 10; 
console.log(source); // { a: { b: 10 } }; 
console.log(target); // { a: { b: 10 } };

但是如果數(shù)組嵌套了對象或者數(shù)組的話用concat、slice拷貝只要有修改會引起新舊數(shù)組都一起改變了，比如：

var arr = [{old: 'old'}, ['old']];
var new_arr = arr.concat();
arr[0].old = 'new';
new_arr[1][0] = 'new';
console.log(arr); // [{old: 'new'}, ['new']]
console.log(new_arr); // [{old: 'new'}, ['new']]

下面是淺拷貝一個通用方法，實現(xiàn)思路：遍歷對象，把屬性和屬性值都放在一個新的對象里

var shallowCopy = function (obj) {
  // 只拷貝對象
  if (typeof obj !== 'object') return;
  // 根據(jù)obj的類型判斷是新建一個數(shù)組還是一個對象
  var newObj = Array.isArray(obj) ? [] : {};
  // 遍歷obj,并且判斷是obj的屬性才拷貝
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key];
    }
  }
  return newObj;
}

// 如果數(shù)組元素是基本類型，就會拷貝一份，互不影響，而如果是對象或者數(shù)組，就會只拷貝對象和數(shù)組的引用，這樣我們無論在新舊數(shù)組進行了修改，兩者都會發(fā)生變化。這種叫淺拷貝
// 深拷貝就是指完全的拷貝一個對象，即使嵌套了對象，兩者也相互分離，修改一個對象的屬性，也不會影響另一個。

數(shù)組的深拷貝

方法一：JSON.stringify()不僅可拷貝數(shù)組還能拷貝對象（但不能拷貝函數(shù)，也不能解決循環(huán)引用問題）

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}]
var new_arr = JSON.parse(JSON.stringify(arr))
console.log(new_arr);

方法二：遞歸。下面是深拷貝一個通用方法，實現(xiàn)思路：拷貝的時候判斷屬性值的類型，如果是對象，繼續(xù)遞歸調(diào)用深拷貝函數(shù)

var deepCopy = function(target) {
  // 只拷貝對象
  if (typeof target !== 'object') return target;
  // 根據(jù)obj的類型判斷是新建一個數(shù)組還是一個對象
  var result = Array.isArray(obj) ? [] : {};
  for (var key in target) {
    // 遍歷obj,并且判斷是obj的屬性才拷貝(不能拷貝原型對象的屬性)
    if (target.hasOwnProperty(key)) {
      // 判斷屬性值的類型，如果是對象遞歸調(diào)用深拷貝
      result[key] = typeof target[key] === 'object' ? deepCopy(target[key]) : target[key];
    }
  }
  return result;
}

其中上述方法一、方法二都解決不了循環(huán)引用的問題。
方法三，結(jié)合map（將方法二的遞歸改造，解決循環(huán)引用問題）：

var deepCopy = function (target, map = new Map()) {
  // 只拷貝對象
  if (typeof target !== "object") return target;
  // 克隆數(shù)據(jù)之前，先判斷之前是否有克隆過（解決循環(huán)引用的問題）
  let cache = map.get(target);
  if (cache) {
    return cache;
  }
  // 根據(jù)obj的類型判斷是新建一個數(shù)組還是一個對象
  var result = Array.isArray(target) ? [] : {};
  // 將新的結(jié)果存到容器中
  map.set(target, result);
  for (var key in target) {
    // 遍歷obj,并且判斷是obj的屬性才拷貝(不能拷貝原型對象的屬性)
    if (target.hasOwnProperty(key)) {
      // 判斷屬性值的類型，如果是對象遞歸調(diào)用深拷貝
      result[key] =
        typeof target[key] === "object"
          ? deepCopy(target[key], map)
          : target[key];
    }
  }
  return result;
};
// 測試代碼
let obj = { a: 1, b: [6, 8], c: { e: 3 } };
obj.b.push(obj.c);
obj.c.h = obj.b;
let obj1 = deepCopy(obj);
console.log(obj);
console.log(obj1);

到此這篇關(guān)于js實現(xiàn)數(shù)組淺拷貝和深拷貝的文章就介紹到這了,更多相關(guān)js淺拷貝和深拷貝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: