资讯专栏INFORMATION COLUMN

js对象的深浅拷贝

dinfer / 1400人阅读

摘要:对象的深浅拷贝针对于的对象和数组数组也是对象浅拷贝只是引用,内存不变而深拷贝就是递归赋值。往往需要深拷贝的对象里没有函数,也不需要拷贝它原型链上的属性。

js对象的深浅拷贝

针对于JavaScript的对象和数组(数组也是对象)浅拷贝只是引用,内存不变;而深拷贝就是递归赋值。
深拷贝是不同内存,相互独立。而浅拷贝会影响

//1.循环复制数组
var arr = [1,2,3],arr2 = [];
for(var i=0;i

别急着走,利用window.JSON的方法做深拷贝存在2个 缺点:

如果你的对象里有函数,函数无法被拷贝下来

无法拷贝对象原型链上的属性和方法

例如下面这种情况:对象里包含函数

var o1 = {
    name:"小明",
    age:12,
    city:"广州",
    schools:["小学","中学","大学"],
    say:function(){
            alert(this.name);
    }
}

for...in 遍历对象,找出自身的属性,且会搜索原型,即也会查找原型上的属性
__proto__不可枚举的属性

obj.hasOwnProperty() 返回布尔值 判断属性是否是自有属性

JSON.parse(JSON.stringify(o1)) 可以将只有属性/不存在方法的对象复制
JSON.stringify 将对象转换成字符串,转换的过程,会忽略掉方法.

//下面的方法可以实现 深深度复制(复制包括函数)

function deepClone(oldObj){
        var newObj = {};
        for(var key in oldObj){
                if(oldObj.hasOwnProperty(key)){
                        if(oldObj[key].constructor == Array){ //判断oldObj[key]值是否数组/对象
                                newObj[key] = oldObj[key].slice();
                        }else if(oldObj[key].constructor == Object){
                                newObj[key] == deepClone(oldObj[key]);
                        }else{
                                newObj[key] = oldObj[key];
                        }
                }
        }
        return newObj;
}
var o2 = deepClone(o1);

当然,你明确知道他们的缺点后,如果他的缺点对你的业务需求没有影响,就可以放心使用了,一行原生代码就搞定。
目前我在开发业务场景中,大多还真可以忽略上面2个缺点。往往需要深拷贝的对象里没有函数,也不需要拷贝它原型链上的属性。

js堆栈

由于js中的对象都是复杂数据类型,这种数据在内存中存储的时候,存放在堆中。当简单赋值的时候,其实是将该对象的指针指向同一个堆地址。
简单的数据类型存放在栈中,当对简单的数据类型进行赋值的时候,其实就是直接在栈中新开辟一个地方专门存储一样的值。

数据结构里的堆栈:
栈(stack): 由编译器自动分配, 存放函数的参数值, 局部变量的值等. 其操作方式类似于数据结构中的栈.
堆(heap): 一般由程序员分配释放, 若程序员不释放, 程序结束时可能由OS回收. 这里OS是指: 操作系统(Operating System)

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

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

相关文章

  • JS专题之深浅拷贝

    摘要:在之前的文章专题之数据类型和类型检测中我有讲过,中的数据类型分为两种,基本数据类型和引用数据类型,基本数据类型是保存在栈的数据结构中的是按值访问,所以不存在深浅拷贝问题。 前言 在开发过程中,偶尔会遇到这种场景,拿到一个数据后,你打算对它进行处理,但是你又希望拷贝一份副本出来,方便数据对比和以后恢复数据。 那么这就涉及到了 JS 中对数据的深浅拷贝问题,所谓深浅拷贝,浅拷贝的意思就是,...

    ASCH 评论0 收藏0
  • 深入理解JS深浅拷贝

    摘要:深拷贝相比于浅拷贝速度较慢并且花销较大。所以在赋值完成后,在栈内存就有两个指针指向堆内存同一个数据。结果如下扩展运算符只能对一层进行深拷贝如果拷贝的层数超过了一层的话,那么就会进行浅拷贝那么我们可以看到和展开原算符对于深浅拷贝的结果是一样。 JS中数据类型 基本数据类型: undefined、null、Boolean、Number、String和Symbol(ES6) 引用数据类型:...

    JackJiang 评论0 收藏0
  • 9012年,当我们讨论js深浅拷贝时我们在说些什么?

    摘要:正文讨论深浅拷贝,首先要从的基本数据类型说起根据中的变量类型传递方式,分为值类型和引用类型,值类型变量包括。当你拷贝的对象有多级的时候,就是深拷贝。数据不存在则对其拷贝。 前言: 本文主要阅读对象:对深浅拷贝印象模糊对初级前端,想对js深浅拷贝聊一聊的中级前端。 如果是对这些有完整对认知体系和解决方法的大佬,可以选择略过。 正文: 讨论深浅拷贝,首先要从js的基本数据类型说起: 根据 J...

    xeblog 评论0 收藏0
  • 深浅拷贝

    摘要:深复制实现代码如下第一种方法通过递归解析解决第二种方法通过解析解决作者六师兄链接原生深拷贝的实现处理未输入新对象的情况通过方法构造新的对象 深浅拷贝针对的是 对象类型,如果是字符串的数组用[...arr],还是不会影响 要区分针对数组的深浅拷贝(默认情况为里面没有对象的数组),与针对对象的深浅拷贝 JavaScript数组深拷贝和浅拷贝的两种方法 let a1 = [1, 2]; ...

    Karrdy 评论0 收藏0
  • 复习Javascript专题(四):js深浅拷贝

    摘要:基本数据类型的复制很简单,就是赋值操作,所以深浅拷贝也是针对,这类引用类型数据。它会抛弃对象的。另外,查资料过程中还看到这么一个词结构化克隆算法还有这一篇资料也有参考,也写得比较详细了的深浅拷贝 基本数据类型的复制很简单,就是赋值操作,所以深浅拷贝也是针对Object,Array这类引用类型数据。 浅拷贝对于字符串来说,是值的复制,而对于对象来说则是对对象地址的复制;而深拷贝的话,它不...

    MobService 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<