JS深拷贝和浅拷贝

本是古典何须时尚 2023-10-02 17:02 34阅读 0赞

### JS深拷贝和浅拷贝 ###

这里主要使用对象赋值，扩展运算符实现举例浅拷贝（类似于Object.assign()方法)，但是操作更简单一点；  
使用JSON.stringify、JSON.parse和深拷贝递归函数举例深拷贝

var obj = {
         name: '张三', girlFriend:undefined,re:/^[1-9]$/,age: 15, major: ['chinese', 'math', 'english',{
        all:5,other:'computer'}], fun () {
         console.log(this.name); }, family: {
         son: 'Jerry', age: 3 } }
    
    // 浅拷贝
    var assignObj = obj //赋值方式拷贝，相当于复制了栈内存中的地址，两个对象无论谁改变都会改变另一个对象中的值
    assignObj.name = '李四'   // 李四
    obj.name //李四
    assignObj.name //李四
    var openClone = {
        ...obj} //扩展运算符进行拷贝，对象中深层的值不能进行深拷贝，本质上来说还是浅拷贝
    openClone.name = '张三' 
    //不涉及深层时，两者的值不同
    opClone.name //张三
    obj.name //李四
    //涉及深层时两者的值相同
    obj.major[0] = 'physics' //修改obj中major数组的值，同样会改变使用扩展运算符克隆的对象的值
    openClone.major[0] //physics
    obj.major[0] //physics
    
    
    // 深拷贝
    // 使用JSON中的两个方法进行深拷贝后会被去掉对象有undefined的键值对和函数，有正则的会被转成空对象
    var jsonString = JSON.stringify(obj)
    var jsonClone = JSON.parse(jsonString) 
    console.log(jsonClone);
    // JSON方法输出可以看到去掉了对象中的函数和有undefined的键值对，正则被转成了空对象：
    /*
            {
              name: '李四',
              re: {},
              age: 15,
              major: [ 'physics', 'math', 'english', { all: 5, other: 'computer' } ],
              family: { son: 'Jerry', age: 3 }
            }
    */ 
    // 深拷贝方法
    function deepClone (obj) {
        
      let objClone = Array.isArray(obj) ? [] : {
        }; // 先判断是不是数组
      if (obj && typeof obj === 'object') {
         // 确定是引用类型
        for (let key in obj) {
        
          if (obj[key] && typeof obj[key] === 'object') {
         // 判断是否有深层嵌套
            objClone[key] = deepClone(obj[key]); //使用递归
          } else {
        
            objClone[key] = obj[key]
          }
        }
      }
      return objClone;
    }
    var newObj = deepClone(obj); //使用深拷贝函数进行深拷贝
    newObj.major[0] = 'doctor';
    console.log(obj.major[0]);//physics
    console.log(newObj.major[0]); //doctor

从上面代码看得出，深拷贝与浅拷贝最本质的区别在于内存中的位置，自己个人简单理解，深拷贝会形成新的内存地址，和原来的对象没有了半毛钱关系，而浅拷贝有时即使不能明显的看出来，但是还是会和原来的对象有着联系，如使用扩展运算符生成的对象。

发表评论取消回复

表情：

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

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

相关阅读

相关 JS的深拷贝和浅拷贝

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

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

相关 js浅拷贝和深拷贝

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

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

相关 JS深拷贝和浅拷贝

JS深拷贝和浅拷贝这里主要使用对象赋值，扩展运算符实现举例浅拷贝（类似于Object.assign()方法)，但是操作更简单一点；使用JSON.stringify

本是古典何须时尚/ 2023年10月02日 17:02/ 0 赞/ 35 阅读

相关 JS深拷贝和浅拷贝

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

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

相关 JS的深拷贝和浅拷贝

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

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

相关 js深拷贝和浅拷贝

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

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

相关 js深拷贝和浅拷贝

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

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

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

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

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

相关 js深拷贝和浅拷贝

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

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

相关 js深拷贝浅拷贝

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

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