JS实现深拷贝(深克隆)和浅拷贝(浅克隆)

原创已于 2022-11-03 09:43:32 修改 · 786 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

于 2020-09-22 09:34:19 首次发布

js 基础专栏收录该内容

6 篇文章

订阅专栏

本文详细解释了深拷贝与浅拷贝的概念及其区别，并提供了具体的代码实现示例，帮助读者理解如何在实际编程中应用这两种拷贝方式。

什么是深拷贝与浅拷贝

浅拷贝：只复制对象的基本类型，对于引用类型，只是克隆地址（包含的内嵌的对象或数组，不再复制副本）
引用类型，只是克隆地址，那么原对象修改，克隆后的新对象也会跟着变化，克隆不彻底
数组的 Array.from() 方法就是实现的浅拷贝
对象的 Object.assign() 方法也是实现的浅拷贝

深拷贝：复制对象的基本类型和引用类型（包含的内嵌的对象或数组，依然复制副本）

浅拷贝的代码实现

function lowClone(val) {
  var newObj = {}
  for (var key in val) {
    newObj[key] = val[key]
  }
  return newObj
}
var obj = {
  a: 1,
  b: [2, 3, [4]],
  c: { c1: 5 }
}
var result = lowClone(obj)
// 用JSON.Stringify方便看打印结果
console.log(JSON.stringify(result)) //{"a":1,"b":[2,3,[4]],"c":{"c1":5}}
obj.c.c1 = 7;
obj.b[2] = [5, 6]
console.log(JSON.stringify(obj)) //{"a":1,"b":[2,3,[5,6]],"c":{"c1":7}}
console.log(JSON.stringify(result)) //{"a":1,"b":[2,3,[5,6]],"c":{"c1":7}}
// 可以看出浅克隆的原对象改变，克隆后的对象属性也跟着改变，浅克隆只是克隆地址。

深拷贝的代码实现

实现深拷贝需要用到递归的思想
具体代码如下：

// 实现深拷贝
function deepClone(val) {
  //判断是普通类型或是null直接返回
  if (typeof val !== 'object' || val === null) {
    return val
  }
  //判断是array
  if (val instanceof Array) {
    var newArr = [];
    for (var i = 0; i < val.length; i++) {
      newArr.push(this.deepClone(val[i]));
    }
    return newArr
  }
  //判断是对象
  var newObj = {}
  for (var key in val) {
  	// Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。
    if (val.hasOwnProperty(key)) { 
      // 递归调用
      newObj[key] = deepClone(val[key])
    }
  }
  return newObj
}
var obj = {
  a: 1,
  b: [2, 3, [4]],
  c: { c1: 5 }
}
var result = deepClone(obj);
// 用JSON.Stringify方便看打印结果
console.log(JSON.stringify(obj)) //{"a":1,"b":[2,3,[4]],"c":{"c1":5}}
console.log(JSON.stringify(result)) //{"a":1,"b":[2,3,[4]],"c":{"c1":5}}
obj.c.c1 = 7;
obj.b[2] = [5, 6]
console.log(JSON.stringify(obj)) //{"a":1,"b":[2,3,[5,6]],"c":{"c1":7}}
console.log(JSON.stringify(result)) //{"a":1,"b":[2,3,[4]],"c":{"c1":5}}

看打印结果，可以看出实现了深拷贝。