js的浅拷贝 VS 深拷贝

时间: 2019-09-04阅读: 381标签: 拷贝

我们常常会用到拷贝对象的功能,而拷贝有浅拷贝和深拷贝2种。这篇文章会着重讲2个方面:

1: 浅拷贝和深拷贝的区别
2: 浅拷贝和深拷贝的具体实现

拷贝,我们常常用在把A对象的属性copy到B对象,这样B对象就拥有了A对象的属性。当B对象的属性不是基本数据类型,而是数组或者对象的时候,就会出现浅拷贝和深拷贝的区别,具体看下文的解释:


1: 什么是浅拷贝?
紧接上文,当B对象的属性是数组或者对象的时候,浅拷贝是通过使A对象的同名属性指向B对象的属性的内存地址,从而达到copy的目的。这样的做法会造成一个问题,当我们改变B对象这个属性时,A对象的这个属性也会被改变,因为它们是指向同一段内存地址的。

我们直接看例子:

function shallowCopy(origin, destination) {
    for (let i in origin) {
        if (origin.hasOwnProperty(i)) {
            destination[i] = origin[i];
        }
    }
    return destination;
}

let origin = {age: 20, name: {firstName: 'nana'}};
let destination = {};

let result = shallowCopy(origin, destination);
console.log(result.name.firstName); // 'nana'
result.name.firstName = 'Lian';
console.log(origin.name.firstName); // 'Lian'

上面就是一个浅拷贝的实现。我们可以看到,因为name属性是一个对象,由于浅拷贝的实现机制,当我们改变result的name属性之后,origin对象的name属性也被影响了,这种结果可能不是我们想看到的。那我们来看一下深拷贝是怎么做的:


2: 深拷贝的实现机制
和浅拷贝不同的是,当源对象的属性是一个对象或者数组时,深拷贝会为目标对象开辟一段新的内存地址,然后把源对象属性的值一一拷贝到目标对象,而不是直接使二者指向同一段内存地址。我们来看代码实现:

function deepCopy(origin, destination) {
    for(let i in origin){
        if(typeof origin[i] === 'object'){
            if(origin[i].constructor === 'Array'){
                destination[i] = [];
            }else{
                destination[i] = {};
            }
            deepCopy(origin[i], destination[i]);
        }else{
            destination[i] = origin[i];
        }
    }

    return destination;
}

let destination = {class: '1-1'};
let origin = {age: 22, name: {firstName: 'nana'}};
let result = deepCopy(origin, destination);
console.log(result.name.firstName); // 'nana'
result.name.firstName = 'Lian';
console.log(result.name.firstName); // 'Lian'
console.log(origin.name.firstName);// 'nana'

当我们使用深拷贝来拷贝属性为对象或者数组的对象时,当我们改变结果对象的属性值时,源对象的同名属性并不会因此而改变。

深拷贝看起来似乎很完美,但是当源对象层级很深的时候,却面临一个性能的问题。所以在实际的使用中,要根据自己的需求来选择是采用浅拷贝还是深拷贝。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5156

JS变量存储与深拷贝和浅拷贝

string、number、null、undefined、boolean、symbol(ES6新增) 变量值存放在栈内存中,可直接访问和修改变量的值 基本数据类型不存在拷贝,好比如说你无法修改数值1的值

Js实现深浅复制

JavaScript中有两种数据类型,基本数据类型如undefined、null、boolean、number、string,另一类是Object。简单数据类型只存储在内存中的栈区,复制的时候是值传递给新的索引。而复杂数据类型由栈区和堆区共同储存

JS对象复制(深拷贝、浅拷贝)

注意: 此方法仅在原对象包含可序列化值类型且没有任何循环引用时才有效。不可序列化值类型的一个例子是 Date 对象 - JSON.parse 只能将其解析为字符串而无法解析回其原始的 Date 对象 或者对象中属性值为function

javascript实现数组或对象的深拷贝

可以看出来,改变原数组arr,并没有对新数组copyArr产生影响;改变新数组copyArr也没有对原数组arr产生影响;同样:改变原数组arr,并没有对新数组copyArr产生影响;改变新数组copyArr也没有对原数组arr产生影响;

js中深拷贝和浅拷贝的区别及原理

javascript的深拷贝和浅拷贝主要是针对像Object, Array这样的复杂对象的,简单理解为浅拷贝只复制一层对象的属性,而深拷贝则递归复制了所有层级。

Js如何禁止复制粘贴?

JavaScript中可以使用oncopy事件来禁止复制,oncopy事件在用户拷贝元素上的内容时触发。使用onpaste事件禁止粘贴,onpaste事件在用户向元素中粘贴文本时触发。

使用jquery克隆对象_实现深、浅拷贝的简单实例

克隆JavaScript对象,首页想到的是obj = eval(uneval(obj)),但这是非标准的,推荐使用jquery提供的jQuery.extend方法,因为它包含了一些额外的类型验证逻辑,并且不会复制未定义的属性等。

关于内存拷贝(浅拷贝)和js链表的小知识点

记录一个做leetcode看答案学到的小知识。。。浅拷贝实现一些特殊的功能的一些应用场景,比如:我们有一个需求如下

JavaScript 中对象的深拷贝

在JavaScript中,对对象进行拷贝的场景比较常见。但是简单的复制语句只能对对象进行浅拷贝,即复制的是一份引用,而不是它所引用的对象。而更多的时候,我们希望对对象进行深拷贝,避免原始对象被无意修改。

14个JS数组拷贝技巧

数组拷贝经常被误解,但这并不是因为拷贝过程本身,而是因为缺乏对 JS 如何处理数组及其元素的理解。JS 中的数组是可变的,这说明在创建数组之后还可以修改数组的内容。这意味着要拷贝一个数组,咱们不能简单地将旧数组分配给一个新变量

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广