JS深拷贝和浅拷贝

我会带着你远行 2022-12-19 06:26 164阅读 0赞

### 浅拷贝 ###

<script>
            // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
            // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
            var obj = { 
                id: 1,
                name: 'andy',
                msg: { 
                    age: 18
                }
            };
            var o = { };
            // for (var k in obj) { 
            // // k 是属性名 obj[k] 属性值
            // o[k] = obj[k];
            // }
            // console.log(o);
            // o.msg.age = 20;
            // console.log(obj);
    
            console.log('--------------');
            Object.assign(o, obj);
            console.log(o);
            o.msg.age = 20;
            console.log(obj);
        </script>

### 深拷贝 ###

<script>
            // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
            var obj = { 
                id: 1,
                name: 'andy',
                msg: { 
                    age: 18
                },
                color: ['pink', 'red']
            };
            var o = { };
            // 封装函数 
            function deepCopy(newobj, oldobj) { 
                for (var k in oldobj) { 
                    // 判断我们的属性值属于那种数据类型
                    // 1. 获取属性值 oldobj[k]
                    var item = oldobj[k];
                    // 2. 判断这个值是否是数组
                    注意先判断数组是因为 数组也属于Object 不然会进入不考array分支
                    if (item instanceof Array) { 
                        newobj[k] = [];这里是拿到地址后创建新空间，再赋值，这样就达到了深拷贝
                        deepCopy(newobj[k], item)
                    } else if (item instanceof Object) { 
                        // 3. 判断这个值是否是对象
                        newobj[k] = { };
                        deepCopy(newobj[k], item)
                    } else { 
                        // 4. 属于简单数据类型
                        newobj[k] = item;
                    }
    
                }
            }
            deepCopy(o, obj);
            console.log(o);
    
            var arr = [];
            console.log(arr instanceof Object);
            o.msg.age = 20;
            console.log(obj);
        </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/6b34a94ab97b42d9aef2f7e1ea03de0c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS的深拷贝和浅拷贝

**浅拷贝** 指向同一个内存地址，改变一个对象，另一个跟着改变 var obj1 = { a: 11, b: 22 }; var obj...

àì夳堔傛蜴生んèń/ 2024年04月20日 09:34/ 0 赞/ 77 阅读

相关 js浅拷贝和深拷贝

浅拷贝：只复制对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意一个的值，另一个也会随之改变，这就是浅拷贝。 **1.赋值** var m =...

ゝ一纸荒年。/ 2024年04月19日 10:18/ 0 赞/ 72 阅读

相关 JS深拷贝和浅拷贝

浅拷贝 <script> // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用. // 深拷贝拷贝多层, 每一

我会带着你远行/ 2022年12月19日 06:26/ 0 赞/ 165 阅读

相关 JS的深拷贝和浅拷贝

> 前言: 原来工作只知道,使用 Object.assign(\{\},obj) 去拷贝一个对象会复制各个熟悉值.不会影响原对象. > >

一时失言乱红尘/ 2022年10月02日 08:50/ 0 赞/ 205 阅读

相关 js深拷贝和浅拷贝

一、数组的深浅拷贝在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然后其

墨蓝/ 2022年08月05日 02:57/ 0 赞/ 228 阅读

相关 js深拷贝和浅拷贝

一、数组的深浅拷贝在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然

清疚/ 2022年07月14日 14:52/ 0 赞/ 223 阅读

相关 JS浅拷贝和深拷贝详解

简单的来说就是，在有指针的情况下，浅拷贝只是增加了一个指针指向已经存在的内存，而深拷贝就是增加一个指针并且申请一个新的内存，使这个增加的指针指向这个新的内存，采用深拷贝的情况下

蔚落/ 2022年07月12日 10:44/ 0 赞/ 205 阅读

相关 js深拷贝和浅拷贝

一、数组的深浅拷贝在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然后其

ゞ浴缸里的玫瑰/ 2022年04月24日 04:14/ 0 赞/ 227 阅读

相关浅拷贝和深拷贝

浅拷贝浅拷贝会创建新对象，其内容非原对象本身的引用，而是原对象内第一层对象的引用。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

Dear 丶/ 2022年04月13日 04:48/ 0 赞/ 281 阅读

相关 js深拷贝浅拷贝

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

朱雀/ 2021年08月31日 14:35/ 0 赞/ 469 阅读