js中浅拷贝,深拷贝的实现

简介: js中浅拷贝,深拷贝的实现


在JavaScript中,浅拷贝和深拷贝是两种复制对象的方式,它们的主要区别在于是否复制对象的引用类型属性

  1. 浅拷贝:浅拷贝只复制对象的基本类型的属性,如果属性是引用类型(如数组、对象),则复制的是引用,而不是实际的对象。这意味着如果你修改了复制后的对象的引用类型属性,原对象的对应属性也会被修改。
  2. 深拷贝:深拷贝不仅复制对象的基本类型的属性,还会复制引用类型的属性。这意味着它会创建一个新的对象,并复制原对象的所有属性和嵌套的属性。因此,修改复制后的对象的任何属性,都不会影响到原对象。

浅拷贝的实现


// 接收传进来的参数 可能是数组 或者是对象
function clone(obj) {
    // 进行obj 参数类型的判断
    // 如果 object ==> {} array ==>[]
    const newObj = Array.isArray(obj) ? [] : {}
    // 遍历老对象 或者 老数组 
    for (const key in obj) {
        // 进行赋值操作
        // key  属性名
        newObj[key] = obj[key]
        // 但是这里有一个问题, 比如说 引用数据类型 对象啊 数组啊, 你这样赋值的话,相当于
        // 直接把地址拷贝过来了, 修改新对象里面的引用数据类型的属性的时候,也会影响到了源对象
        // 类似
        // newfruit[name] = fruit[name]
    }
    return newObj
}

深拷贝的实现

深拷贝的主要实现步骤相较于浅拷贝 主要在于 对于原对象引用数据类型的属性值的处理

主要使用的是函数递归的方法 一层一层的走下去


/**
 * 深拷贝的思路:
 * 1. 对进行被拷贝对象数据类型的判断 数组 || 对象
 * 2. 如果是数组 就创建一个空数组 ; 如果是对象 就创建一个空对象 (主要为了开辟新的内存空间)
 * 3. 遍历数组 或者 对象 (depend on 原对象的类型)
 * 4. 原对象身上的基础数据类型直接赋值即可. 如果是引用数据类型,进行递归函数调用  
 * 5. 返回新创建的数组 或者 对象
 *
 */
 
// 接收传进来的参数 可能是数组 或者是对象
function deepClone(obj) {
    // 进行obj 参数类型的判断
    // 如果 object ==> {} array ==>[]
    const newObj = Array.isArray(obj) ? [] : {}
    // 遍历老对象 或者 老数组 
    for (const key in obj) {
        // 如果是引用数据类型的话
        if (typeof newObj[key] == "object") {
            newObj[key] = deepClone(obj[key])
        }
        // 基础数据类型 直接进行赋值操作
        // key  属性名
        newObj[key] = obj[key]
        // 但是这里有一个问题, 比如说 引用数据类型 对象啊 数组啊, 你这样赋值的话,相当于
        // 直接把地址拷贝过来了, 修改新对象里面的引用数据类型的属性的时候,也会影响到了源对象
        // 类似
        // newfruit[name] = fruit[name]
    }
    return newObj
}


目录
相关文章
|
12天前
|
JSON JavaScript 数据格式
手写JS实现深拷贝函数
本文介绍了如何实现一个深拷贝函数`deepClone`,该函数可以处理对象和数组的深拷贝,确保拷贝后的对象与原始对象在内存中互不干扰。通过递归处理对象的键值对和数组的元素,实现了深度复制,同时保留了函数类型的值和基础类型的值。
15 3
|
2月前
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
36 2
|
2月前
|
JavaScript 前端开发
JavaScript中的深拷贝和浅拷贝的实现讲解
在JavaScript中,浅拷贝与深拷贝用于复制对象。浅拷贝仅复制基本类型属性,对于引用类型仅复制引用,导致双方共享同一数据,一方修改会影响另一方。深拷贝则完全复制所有层级的数据,包括引用类型,确保双方独立。浅拷贝可通过简单属性赋值实现,而深拷贝需递归复制各层属性以避免共享数据。
41 1
|
2月前
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
24 0
|
2月前
|
存储 JavaScript 前端开发
JS浅拷贝及面试时手写源码
JS浅拷贝及面试时手写源码
|
3月前
|
存储 JavaScript 前端开发
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
31 0
|
3月前
|
JavaScript
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
64 0
|
3月前
|
存储 JavaScript 前端开发
javascript的栈内存 VS 堆内存(浅拷贝 VS 深拷贝)
javascript的栈内存 VS 堆内存(浅拷贝 VS 深拷贝)
26 0
|
5月前
|
JSON 前端开发 JavaScript
【面试题】JavaScript 深拷贝和浅拷贝 高级
【面试题】JavaScript 深拷贝和浅拷贝 高级
|
4月前
|
JSON JavaScript 前端开发
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别
JavaScript 中,理解数据拷贝的深浅至关重要。浅拷贝(如扩展运算符`...`、`Object.assign()`)仅复制对象第一层,共享内部引用,导致修改时产生意外联动。深拷贝(如自定义递归函数、`_.cloneDeep`或`JSON.parse(JSON.stringify())`)创建独立副本,确保数据隔离。选择哪种取决于性能、数据独立性和资源需求。深拷贝虽慢,但确保安全;浅拷贝快,但需小心引用共享。在面试中,理解这些概念及其应用场景是关键。
66 4
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别