JavaScript中的浅拷贝与深拷贝

546669204 发布于2019-08-26 18:27 / 1758人阅读

摘要：所以，深拷贝是对对象以及对象的所有子对象进行拷贝实现方式就是递归调用浅拷贝对于深拷贝的对象，改变源对象不会对得到的对象有影响。

为什么会有浅拷贝与深拷贝
什么是浅拷贝与深拷贝
如何实现浅拷贝与深拷贝
好了，问题出来了，那么下面就让我们带着这几个问题去探究一下吧！

如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过

以下↓

数据类型
在开始了解浅拷贝与深拷贝之前，让我们先来回顾一下 JavaScript 的数据类型（可以参考这里 JavaScript中的数据类型）

在 JavaScript 中，我们将数据分为基本数据类型(原始值) 与引用类型

基本数据类型的值是按值访问的，基本类型的值是不可变的
引用类型的值是按引用访问的，引用类型的值是动态可变的
由于数据类型的访问方式不同，它们的比较方式也是不一样的

var a = 100;
var b = 100;

a === b // true

var c = {a: 1, b: 2};
var d = {a: 1, b: 2};

c == d // false 两个不同的对象

·基本数据类型的比较是值得比较
·引用类型的比较是引用地址的比较

鉴于以上数据类型的特点，我们可以初步想到：所谓浅拷贝与深拷贝可能就是对于值的拷贝和引用的拷贝（简单数据类型都是对值的拷贝，不进行区分）

一般来说，我们所涉及的拷贝对象，也都是针对引用类型的。由于引用类型属性层级可能也会有多层，这样也就引出了我们所要去了解的 浅拷贝 与 深拷贝

浅拷贝

顾名思义，所谓浅拷贝就是对对象进行浅层次的复制，只复制一层对象的属性，并不包括对象里面的引用类型数据

想象一下，如果让你自己去实现这个功能，又会有怎么的思路呢

首先，我们需要知道被拷贝对象有哪些属性吧，然后还需要知道这些属性都对应了那些值或者地址的引用吧。那么，答案已经呼之欲出了，是的，循环

var person = {
    name: "tt",
    age: 18,
    friends: ["oo", "cc", "yy"]
}

function shallowCopy(source) {
    if (!source || typeof source !== "object") {
        throw new Error("error");
    }
    var targetObj = source.constructor === Array ? [] : {};
    for (var keys in source) {
        if (source.hasOwnProperty(keys)) {
            targetObj[keys] = source[keys];
        }
    }
    return targetObj;
}

var p1 = shallowCopy(person);

console.log(p1)

在上面的代码中，我们创建了一个 shallowCopy 函数，它接收一个参数也就是被拷贝的对象。

首先创建了一个对象
然后 for...in 循环传进去的对象，为了避免循环到原型上面会被遍历到的属性，使用 hasOwnProperty 限制循环只在对象自身，将被拷贝对象的每一个属性和值添加到创建的对象当中
最后返回这个对象
通过测试，我们拿到了和 person 对象几乎一致的对象 p1。看到这里，你是不是会想那这个结果和 var p1 = person 这样的赋值操作又有什么区别呢？

我们再来测试一波

var p2 = person;

// 这个时候我们修改person对象的数据
person.name = "tadpole";
person.age = 19; 
person.friends.push("tt")

p2.name // tadpole
p2.age // 19
p2.friends // ["oo", "cc", "yy", "tt"]

p1.name // tt
p1.age // 18
p1.friends // ["oo", "cc", "yy", "tt"]

上面我们创建了一个新的变量 p2 ，将 person 赋值给 p2 ，然后比较两个变量

深拷贝
了解完浅拷贝，相信小伙伴们对于深拷贝也应该了然于胸了

浅拷贝由于只是复制一层对象的属性，当遇到有子对象的情况时，子对象就会互相影响。所以，深拷贝是对对象以及对象的所有子对象进行拷贝

实现方式就是递归调用浅拷贝

function deepCopy(source){
   if(!source || typeof source !== "object"){
     throw new Error("error");
   }
   var targetObj = source.constructor === Array ? [] : {};
   for(var keys in source){
      if(source.hasOwnProperty(keys)){
         if(source[keys] && typeof source[keys] === "object"){
           targetObj[keys] = source[keys].constructor === Array ? [] : {};
           targetObj[keys] = deepCopy(source[keys]);
         }else{
           targetObj[keys] = source[keys];
         }
      } 
   }
   return targetObj;
}
var obj1 = {
    arr: [1, 2, 3],
    key: {
        id: 22
    },
    func: function() {
        console.log(123)
    }
}

var obj2 = deepCopy(obj1);

obj1.arr.push(4);

obj1.arr // [1, 2, 3, 4]
obj2.arr // [1, 2, 3]
obj1.key === obj2.key // false
obj1.func === obj2.func // true

对于深拷贝的对象，改变源对象不会对得到的对象有影响。只是在拷贝的过程中源对象的方法丢失了，这是因为在序列化 JavaScript 对象时，所有函数和原型成员会被有意忽略

还有一种实现深拷贝的方式是利用 JSON 对象中的 parse 和 stringify，JOSN 对象中的 stringify 可以把一个 js 对象序列化为一个 JSON 字符串，parse 可以把 JSON 字符串反序列化为一个 js 对象，通过这两个方法，也可以实现对象的深复制

// 利用JSON序列化实现一个深拷贝
function deepCopy(source){
  return JSON.parse(JSON.stringify(source));
}
var o1 = {
  arr: [1, 2, 3],
  obj: {
    key: "value"
  },
  func: function(){
    return 1;
  }
};
var o2 = deepCopy(o1);
console.log(o2); // => {arr: [1,2,3], obj: {key: "value"}}

实现拷贝的其他方式

浅拷贝
·Array.prototype.slice()
·Array.prototype.concat()
·Object.assign
·拓展操作符...
...
深拷贝
很多框架或者库都提供了深拷贝的方式，比如 jQuery 、 lodash 函数库等等，基本实现方式也就和我们前面介绍的大同小异

后记
根据需求的不同，比如有时候我们需要一个全新的对象，在修改它的时候不去影响到源对象，那么这个时候我们就可能需要深拷贝；反之，浅拷贝就能实现我们的需求

只是，我们需要注意到一点，那就是因为实现深拷贝使用递归的方式，就增加了性能的消耗

相信在不断使用的过程中，一定会对它越来越熟悉

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110228.html

JavaScript中的浅拷贝与深拷贝

摘要：所以，深拷贝是对对象以及对象的所有子对象进行拷贝实现方式就是递归调用浅拷贝对于深拷贝的对象，改变源对象不会对得到的对象有影响。上一篇 JavaScript中的继承前言文章开始之前，让我们先思考一下这几个问题：为什么会有浅拷贝与深拷贝什么是浅拷贝与深拷贝如何实现浅拷贝与深拷贝好了，问题出来了，那么下面就让我们带着这几个问题去探究一下吧！如果文章中有出现纰漏、错误之处...

AZmake 2019-08-23 17:08 评论0 收藏0
关于js的浅拷贝与深拷贝

摘要：原文地址浅拷贝和深拷贝只针对像这样的复杂对象的简单来说，浅拷贝只拷贝一层对象的属性，而深拷贝则递归拷贝了所有层级。浅拷贝通过来实现浅拷贝。原文地址：http://www.silenceboy.com/201... 浅拷贝和深拷贝只针对像Object, Array这样的复杂对象的.简单来说，浅拷贝只拷贝一层对象的属性，而深拷贝则递归拷贝了所有层级。浅拷贝通过 Object.ass...

summerpxy 2019-08-26 13:41 评论0 收藏0
浅谈JavaScript的浅拷贝与深拷贝

摘要：引用数据类型是存放在堆内存中的，变量实际上是一个存放在栈内存的指针，这个指针指向堆内存中的地址。栈和堆的区别其实浅拷贝和深拷贝的主要区别就是数据在内存中的存储类型不同。这里，对存在子对象的对象进行拷贝的时候，就是深拷贝了。数据类型在开始拷贝之前，我们从JavaScript的数据类型和内存存放地址讲起。数据类型分为基本数据类型和引用数据类型基本数据类型主要包括undefin...

娣辩孩 2019-08-23 13:44 评论0 收藏0
关于JavaScript的浅拷贝和深拷贝

摘要：引用类型值引用类型值是保存在堆内存中的对象，变量保存的只是指向该内存的地址，在复制引用类型值的时候，其实只复制了指向该内存的地址。前言要理解 JavaScript中浅拷贝和深拷贝的区别，首先要明白JavaScript的数据类型。JavaScript有两种数据类型，基础数据类型和引用数据类型。js的基本类型：undefined，null，string，boolean，number,s...

shenhualong 2019-08-26 12:23 评论0 收藏0
JS引用类型数据的浅拷贝与深拷贝

摘要：拷贝到，属性均顺利拷贝。大辉小辉，小辉，大辉小辉，小辉，大辉但是，若修改的属性变为对象或数组时，那么对象之间就会发生关联。深拷贝不希望对象之间产生关联，那么这时候可以用到深拷贝。浅拷贝之前文章提到，在定义一个对象或数组时，变量存放的往往只是一个地址。当我们对堆内存中的对象复制时，如果属性是对象或数组时，这时候我们拷贝的只是一个栈内存的指针。因此b对象在访问该属性时，会根据指针寻找...

MangoGoing 2019-08-21 16:53 评论0 收藏0