关于js的浅拷贝与深拷贝

summerpxy 发布于2019-08-26 13:41 / 906人阅读

摘要：原文地址浅拷贝和深拷贝只针对像这样的复杂对象的简单来说，浅拷贝只拷贝一层对象的属性，而深拷贝则递归拷贝了所有层级。浅拷贝通过来实现浅拷贝。

原文地址：http://www.silenceboy.com/201...

浅拷贝和深拷贝只针对像Object, Array这样的复杂对象的.简单来说，浅拷贝只拷贝一层对象的属性，而深拷贝则递归拷贝了所有层级。

浅拷贝 通过 Object.assign 来实现浅拷贝。

let a = {
    num: 1
}
let b = Object.assign({}, a)
a.num = 2
console.log(b.num) // 1

通过展开运算符(…)来实现浅拷贝

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

通过属性赋值来实现浅拷贝:

const obj = { a:1, arr: [2,3] };
const shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

该方法体现了浅拷贝的问题．因为浅拷贝只会将对象的各个属性进行依次拷贝，并不会进行递归拷贝，而 JavaScript 存储对象都是存地址的，所以浅拷贝会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址．

导致的结果就是：

shallowObj.arr[1] = 5;
obj.arr[1]   // = 5

这种情况就需要用到深拷贝了．

深拷贝 通过JSON序列化实现深拷贝

你不知道的JavaScript(上) 
许多JavaScript框架都提出了自己的解决办法,但是Javascript应该采用那种方法作为标准呐? 在很长一段时间里,这个问题都没有明确的答案.对于JSON安全(也就是说可以被序列化为一个JSON字符串并且可以根据这个字符串解析出一个结构和值完全一样的对象)的对象来说,有一种巧妙的复制方法:
var newObj = JSON.parse(JSON.stringify(someObj));当然,这种方法需要保证对象是JSON安全的,所以只适用于部分情况.

该方法的局限性:

会忽略 undefined

会忽略 symbol

不能序列化函数

不能解决循环引用的对象

递归完成深拷贝

function deepCopy(obj){
    //判断是否是简单数据类型，
    if(typeof obj == "object"){
        //复杂数据类型
        var result = obj.constructor == Array ? [] : {};
        for(let i in obj){
            result[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];
        }
    }else {
        //简单数据类型 直接 == 赋值
        var result = obj;
    }
    return result;
}

GPU云服务器云服务器 js拷贝内存数据库后拷贝预拷贝深拷贝和浅拷贝浅拷贝

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

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

JS引用类型数据的浅拷贝与深拷贝

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

MangoGoing 2019-08-21 16:53 评论0 收藏0
JavaScript中的浅拷贝与深拷贝

摘要：所以，深拷贝是对对象以及对象的所有子对象进行拷贝实现方式就是递归调用浅拷贝对于深拷贝的对象，改变源对象不会对得到的对象有影响。为什么会有浅拷贝与深拷贝什么是浅拷贝与深拷贝如何实现浅拷贝与深拷贝好了，问题出来了，那么下面就让我们带着这几个问题去探究一下吧！如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过以下↓ 数据类型在开始了解浅拷贝与深拷贝之前，让我们先...

546669204 2019-08-26 18:27 评论0 收藏0
JavaScript中的浅拷贝与深拷贝

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

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

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

shenhualong 2019-08-26 12:23 评论0 收藏0
浅谈JavaScript的浅拷贝与深拷贝

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

娣辩孩 2019-08-23 13:44 评论0 收藏0