js浅拷贝与深拷贝

简介: js浅拷贝与深拷贝

一、赋值

很多时候,我们会弄混浅拷贝与赋值。我们先来看看赋值是如何实现的

当我们把一个对象赋值给一个新的变量时,赋的是该对象在栈中的地址值,而不是堆中的数据,也就是两个对象指向的是同一个存储空间,无论哪个发生改变,其实都是改变的存储空间的内容,因此两个对象是联动的。
let person = {
    name:'爱就一个字',
    hobby:['学习',['看电影','shopping'],'跑步']
}
let person1 = person
person1.name = '小明'
person1.hobby[0] = '玩耍'
console.log(person);
console.log(person1);

在这里插入图片描述
在这里插入图片描述
如上结果,改了name和hobby,原来的数据都会发生改变。

二、浅拷贝

创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址,所以如果其中一个对象改变了这个地址,就会影响到另一个对象。

let person = {
    name:'爱就一个字',
    hobby:['学习',['看电影','shopping'],'跑步']
}
function shallowCopy (obj) {
    let target = {}
    for(let i in obj) {
        if(obj.hasOwnProperty(i)) {
            target[i] = obj[i]
        }
    }
    return target
}
let person1 = shallowCopy(person)
// 调用shallowCopy()并且把person传进去了,返回一个target对象,这个target对象是原来person对象的精确拷贝
person1.name = '小明'
person1.hobby[0] = '玩耍'
console.log(person);
console.log(person1);

在这里插入图片描述
如上结果,name是基本数据类型,改了person1的name,person的name并没有受到影响,它本身的值不变;而hobby是引用数据类型,改了person1的hobby,person的hobby也会受到影响,它原来的值也被改变了,因为它们指向的是同一个地址。

小结:
浅拷贝就是重新在堆中创建内存,拷贝前后对象的基本数据类型互不影响,但拷贝前后对象的引用类型因共享同一块内存,会相互影响。

三、深拷贝

深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

let person = {
    name:'爱就一个字',
    hobby:['学习',['看电影','shopping'],'跑步']
}
function deepClone (obj) {
    let cloneObj = {}
    if(typeof obj !== 'object') return obj
    for(let i in obj) {
        if(obj.hasOwnProperty(i)) {
            cloneObj[i] = deepClone(obj[i])
        }
    }
    return cloneObj
}
let person1 = deepClone(person)
person1.name = '小明'
person1.hobby[0] = '玩耍'
console.log(person);
console.log(person1);

在这里插入图片描述
如上结果,改了person1的name,person的name并没有受到影响,它本身的值不变;改了person1的hobby,person的hobby也没有受到影响,它原来的值也不变。

四、总结

在这里插入图片描述

相关文章
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
348 4
|
JSON JavaScript 数据格式
手写JS实现深拷贝函数
本文介绍了如何实现一个深拷贝函数`deepClone`,该函数可以处理对象和数组的深拷贝,确保拷贝后的对象与原始对象在内存中互不干扰。通过递归处理对象的键值对和数组的元素,实现了深度复制,同时保留了函数类型的值和基础类型的值。
354 3
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
226 2
|
JavaScript 前端开发
JavaScript中的深拷贝和浅拷贝的实现讲解
在JavaScript中,浅拷贝与深拷贝用于复制对象。浅拷贝仅复制基本类型属性,对于引用类型仅复制引用,导致双方共享同一数据,一方修改会影响另一方。深拷贝则完全复制所有层级的数据,包括引用类型,确保双方独立。浅拷贝可通过简单属性赋值实现,而深拷贝需递归复制各层属性以避免共享数据。
440 1
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
178 0
|
JavaScript 前端开发
js中浅拷贝,深拷贝的实现
js中浅拷贝,深拷贝的实现
210 0
|
存储 JavaScript 前端开发
JS浅拷贝及面试时手写源码
JS浅拷贝及面试时手写源码
|
存储 JavaScript 前端开发
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
235 0
|
JavaScript
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
924 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
474 2

热门文章

最新文章