Skip to content

百度：什么是浅拷贝和深拷贝？有什么区别？如何实现 Object 的深拷贝 #55

Open
Open
百度：什么是浅拷贝和深拷贝？有什么区别？如何实现 Object 的深拷贝#55
Labels
百度

Description

@sisterAn
sisterAn
opened on May 27, 2020
No description provided.

Activity

  1. sisterAn
    added
    百度
    on May 27, 2020
  2. sisterAn
    changed the title [-]什么是浅复制和深复制？有什么区别？如何实现 Object 的深复制[/-] [+]百度：什么是浅复制和深复制？有什么区别？如何实现 Object 的深复制[/+] on May 27, 2020
  3. sisterAn
    changed the title [-]百度：什么是浅复制和深复制？有什么区别？如何实现 Object 的深复制[/-] [+]百度：什么是浅拷贝和深拷贝？有什么区别？如何实现 Object 的深拷贝[/+] on May 27, 2020

  4. plane-hjh commented on May 28, 2020

    @plane-hjh
    plane-hjh
    on May 28, 2020

    解答

    在js中，对象是引用类型。如果给一个变量赋值给一个对象的时候，这时候变量和对象都是指向同一个引用，即

    let obj1 = {a: 1}
let obj2 = obj1

console.log(obj2.a) // 1
obj2.a = 2
console.log(obj2.a) // 2
console.log(obj1.a) // 2

    由于指向的是同一个引用，即 obj2 属性的值变化了，那么 obj1 也会跟着变化。

    但是我们希望说不想要这种效果，那么就可以使用 浅拷贝 来实现，这样和原对象不是指向同一个引用，但是也会把对象的成员复制过来。

    但是，浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就要使用到 深拷贝 了

    深拷贝的实现

    1. JSON.parse(JSON.stringify(object))

    通常可以使用 JSON.parse(JSON.stringify(object)) 来解决

    let obj1 = {
    a: 1,
    b: {
        c: 2
    }
}
let obj2 = JSON.parse(JSON.stringify(obj1))
obj2.b.c = '3'
console.log(obj1.b.c) // 2

    但是使用 JSON.parse(JSON.stringify(object)) 也有弊端

    1. 会忽略 undefined
    2. 会忽略 symbol
    3. 不能序列化函数
    4. 不能解决循环引用的对象

    2. 递归

    遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深拷贝

    // 递归判断是否对象和数组
function deepClone(obj, target) {
    if(!obj) return

    for(let key in obj) {
        if(obj.hasOwnProperty(key)) {
            if(Array.isArray(key) || (typeof obj[key] === 'object' && obj[key] !== null)) {
                target[key] = []
                
                deepClone(obj[key], target[key])
            } else {
                target[key] = obj[key]
            }
        }
    }

    return target
}

  5. 0undefined0 commented on May 28, 2020

    @0undefined0
    0undefined0
    on May 28, 2020

    浅拷贝的复制了指向对象的指针， 地址和原对象的地址指向相同
    深拷贝是完全脱离原对象，只有值和原对象保持一致

    浅拷贝

    function extendCopy(p) {
　　var c = {};
　　for (var i in p) { 
　　　　c[i] = p[i];
　　}
　　return c;
}

    深拷贝

        function checkedType(target) {
      return Object.prototype.toString.call(target).slice(8, -1)
    }
    //实现深度克隆---对象/数组
    function clone(target) {
      //判断拷贝的数据类型
      //初始化变量result 成为最终克隆的数据
      let result, targetType = checkedType(target)
      if (targetType === 'Object') {
        result = {}
      } else if (targetType === 'Array') {
        result = []
      } else {
        return target
      }
      //遍历目标数据
      for (let i in target) {
        //获取遍历数据结构的每一项值。
        let value = target[i]
        //判断目标结构里的每一值是否存在对象/数组
        if (checkedType(value) === 'Object' ||
          checkedType(value) === 'Array') { //对象/数组里嵌套了对象/数组
          //继续遍历获取到value值
          result[i] = clone(value)
        } else { //获取到value值是基本的数据类型或者是函数。
          result[i] = value;
        }
      }
      return result
    }

  6. luweiCN commented on May 28, 2020

    @luweiCN
    luweiCN
    on May 28, 2020

    基本类型和引用类型

    存储方式

    JavaScript中有两种类型，分别是基本类型和引用类型。其中基本类型就包括Number、String、Boolean、null、undefined、Symbol、BigInt这几种，剩下的（Array、Regex、Object、Function等等）都是引用类型。通常我们创建这两种类型的值之后会使用一个变量来保存它，而对于基本类型的值我们是直接使用对象保存它的值，对于引用类型的值，我们是保存它的引用（在C语言里就是指针，即内存地址）

    let number = 1
let string = 'abc'
let object = { name: 'luwei' }

    上面声明了三个变量，其中number和string是基本类型的值，而object是引用类型的值。我们从计算机底层来讨论在声明这三个变量的时候计算机都做了什么：

    • 程序中的使用到的变量和数据都是在保存在计算机的内存中的，内存又可以分为堆和栈两块区域
    • 基本类型的值都是保存在栈空间中的，而引用类型的值是保存在堆空间中的
    • 在声明基本类型number和string的时候，计算机上会在栈中开辟出来两个空间，并分别把这两个空间叫做number和string，然后在赋值的时候分别把数字1和字符串abc存入这两个空间内；也就是说，基本类型的值是直接在栈中保存它的值
    • 而在声明引用类型的值的时候就比较复杂了，首先在栈中申请一块空间并将它命名成object，然后在对空间中申请一块内存，并且把{name: 'luwei'}这个对象保存在这个堆空间上，最后再把这个堆空间所在的内存地址赋值给栈中的object变量；也就是说，引用类型在声明和赋值给某个变量之后，我们只能通过这个变量拿到这个引用类型的值在内存中的地址，即它的引用（指针）

    拷贝方式

    基本类型的拷贝方式

    let number = 1
let string = 'abc'
let number2 = number
let string2 = string
number2 = 3
string2 = 'dcba'
console.log(number, number2) // 1 ,  3
console.log(string, string2) // 'abc' , 'dcba'
    • 基本类型的值在拷贝时是拷贝它的值，当使用变量number2拷贝了number之后，修改number2的值并不会影响number的值
    • 这里要多说一点，注意到string2 = 'dcba'这一句，计算机在执行这个语句时，并不是简单的把栈空间中叫做string2的内存块中存储的值修改为dcba，而是会重新申请一块内存块并命名为string2，再将dcba存入这个内存块；这种现象只有在字符串才会发生，因为存储在栈中的数据大小都是固定的，数字等其他基本类型的重新赋值之后在内存中所占的大小都是一样的，所以不需要重新申请空间，直接修改原有的值就可以。而对于字符串，比如上面的例子，它的长度比之前增加了1，因此原本存储abc的空间是无法存储dcba的，因此编译器在处理字符串的重新赋值时是统一重新申请栈空间。这就是字符串的不可变性（字符串的值是无法被修改的）。

    引用类型的拷贝方式

    通过上文的描述，我们知道引用类型的值是保存在堆空间的，而保存引用类型的变量，其实是存在于栈空间的，它保存着引用类型的值在堆空间的内存地址。那么我们要拷贝引用类型的值就会出现两种情况

    浅拷贝

    所谓浅拷贝就是使用一个变量去拷贝一个引用类型在栈中的内存地址

    let object = { name: 'luwei' }
let object2 = object
object2.name = 'LUWEI'
console.log(object) // { name: 'LUWEI' }
    深拷贝

    而深拷贝就是指在堆空间中，另外开辟出一个空间，并把原有的堆空间中保存的引用类型的值拷贝到新的空间中来。

    let object = { name: 'luwei' }
let object2 = JSON.parse(JSON.stringify(object))
object2.name = 'LUWEI'
console.log(object) // { name: 'luwei' }

    实现深拷贝的方式

    第一种：JSON.parse(JSON.stringify(object))

    上面的代码通过JSON.parse(JSON.stringify(object))演示了一个简单的深拷贝，但是这种方式是有缺点的：

    let obj = {         
    reg : /^reg$/,
    fun: function(){},
    syb: Symbol('foo'),
    undefined: undefined
}; 
let copied_obj = JSON.parse(JSON.stringify(obj));
console.log(copied_obj); // { reg: {} }
    1. 会忽略 undefined
    2. 会忽略 symbol
    3. 不能序列化函数正则对象等特殊对象
    4. 不能处理指向相同引用的情况，相同的引用会被重复拷贝
    let obj = {}; 
let obj2 = {name:'aaaaa'};
obj.ttt1 = obj2;
obj.ttt2 = obj2;
let cp = JSON.parse(JSON.stringify(obj)); 
obj.ttt1.name = 'change'; 
cp.ttt1.name  = 'change';

// 因为obj的 ttt1 和 ttt2都是指向一个同一个对象，所以修改其中一个，另一个也会变，也就是说obj.ttt1 === obj.ttt2
console.log(obj); // { ttt1: {name: "change"}, ttt2: {name: "change"}}

// 而通过这种方式拷贝时，obj2拷贝了两次，丢失了cp.ttt1 === cp.ttt2 的特征
console.log(cp); // {ttt1: {name: "change"}, ttt2: {name: "aaaaa"}}
    第二种：递归拷贝
    function cloneDeep(value) {
  let copied_objs = []; // 用于解决循环引用问题

  function _cloneDeep(value) {
    if (value === null) return null;
    if (typeof value === "object") {
    	// 对象类型的值首先在copied_objs查找是否出现过，如果出现直接返回之前的结果
      for (let i = 0; i < copied_objs.length; i++) {
        if (value === copied_objs[i].source) {
          return copied_objs[i].target;
        }
      }
      let new_value = {};
      
      // 需要处理数组的情况
      if (Array.isArray(value)) new_value = [];
      copied_objs.push({ source: value, target: new_value });

      Object.keys(value).forEach((key) => {
        new_value[key] = _cloneDeep(value[key]);
      });
      return new_value;
    } else {
      return value;
    }
  }
  return _cloneDeep(value);
}

    使用lodash的测试用例测试通过，TypedArray的相关用例没有通过，上面的代码没有考虑兼容TypedArray类型

  7. syc666 commented on May 28, 2020

    @syc666
    syc666
    on May 28, 2020
    const fun = (input) => {
    if(typeof input !== 'object') return input
    if(input instanceof Array) {
        return input.map(val=>fun(val))
    }
    if(input instanceof Object) {
        const obj = {}
        for(val in input){
            obj[val] = fun(input[val])
        }
        return obj
    }
}

  8. plane-hjh commented on May 29, 2020

    @plane-hjh
    plane-hjh
    on May 29, 2020

    基本类型和引用类型

    存储方式

    JavaScript中有两种类型，分别是基本类型和引用类型。其中基本类型就包括Number、String、Boolean、null、undefined、Symbol、BigInt这几种，剩下的（Array、Regex、Object、Function等等）都是引用类型。通常我们创建这两种类型的值之后会使用一个变量来保存它，而对于基本类型的值我们是直接使用对象保存它的值，对于引用类型的值，我们是保存它的引用（在C语言里就是指针，即内存地址）

    let number = 1
let string = 'abc'
let object = { name: 'luwei' }

    上面声明了三个变量，其中number和string是基本类型的值，而object是引用类型的值。我们从计算机底层来讨论在声明这三个变量的时候计算机都做了什么：

    • 程序中的使用到的变量和数据都是在保存在计算机的内存中的，内存又可以分为堆和栈两块区域
    • 基本类型的值都是保存在栈空间中的，而引用类型的值是保存在堆空间中的
    • 在声明基本类型number和string的时候，计算机上会在栈中开辟出来两个空间，并分别把这两个空间叫做number和string，然后在赋值的时候分别把数字1和字符串abc存入这两个空间内；也就是说，基本类型的值是直接在栈中保存它的值
    • 而在声明引用类型的值的时候就比较复杂了，首先在栈中申请一块空间并将它命名成object，然后在对空间中申请一块内存，并且把{name: 'luwei'}这个对象保存在这个堆空间上，最后再把这个堆空间所在的内存地址赋值给栈中的object变量；也就是说，引用类型在声明和赋值给某个变量之后，我们只能通过这个变量拿到这个引用类型的值在内存中的地址，即它的引用（指针）

    拷贝方式

    基本类型的拷贝方式

    let number = 1
let string = 'abc'
let number2 = number
let string2 = string
number2 = 3
string2 = 'dcba'
console.log(number, number2) // 1 ,  3
console.log(string, string2) // 'abc' , 'dcba'
    • 基本类型的值在拷贝时是拷贝它的值，当使用变量number2拷贝了number之后，修改number2的值并不会影响number的值
    • 这里要多说一点，注意到string2 = 'dcba'这一句，计算机在执行这个语句时，并不是简单的把栈空间中叫做string2的内存块中存储的值修改为dcba，而是会重新申请一块内存块并命名为string2，再将dcba存入这个内存块；这种现象只有在字符串才会发生，因为存储在栈中的数据大小都是固定的，数字等其他基本类型的重新赋值之后在内存中所占的大小都是一样的，所以不需要重新申请空间，直接修改原有的值就可以。而对于字符串，比如上面的例子，它的长度比之前增加了1，因此原本存储abc的空间是无法存储dcba的，因此编译器在处理字符串的重新赋值时是统一重新申请栈空间。这就是字符串的不可变性（字符串的值是无法被修改的）。

    引用类型的拷贝方式

    通过上文的描述，我们知道引用类型的值是保存在堆空间的，而保存引用类型的变量，其实是存在于栈空间的，它保存着引用类型的值在堆空间的内存地址。那么我们要拷贝引用类型的值就会出现两种情况

    浅拷贝

    所谓浅拷贝就是使用一个变量去拷贝一个引用类型在栈中的内存地址

    let object = { name: 'luwei' }
let object2 = object
object2.name = 'LUWEI'
console.log(object) // { name: 'LUWEI' }
    深拷贝

    而深拷贝就是指在堆空间中，另外开辟出一个空间，并把原有的堆空间中保存的引用类型的值拷贝到新的空间中来。

    let object = { name: 'luwei' }
let object2 = JSON.parse(JSON.stringify(object))
object2.name = 'LUWEI'
console.log(object) // { name: 'luwei' }

    实现深拷贝的方式

    第一种：JSON.parse(JSON.stringify(object))

    上面的代码通过JSON.parse(JSON.stringify(object))演示了一个简单的深拷贝，但是这种方式是有缺点的：

    let obj = {         
    reg : /^reg$/,
    fun: function(){},
    syb: Symbol('foo'),
    undefined: undefined
}; 
let copied_obj = JSON.parse(JSON.stringify(obj));
console.log(copied_obj); // { reg: {} }
    1. 会忽略 undefined
    2. 会忽略 symbol
    3. 不能序列化函数正则对象等特殊对象
    4. 不能处理指向相同引用的情况，相同的引用会被重复拷贝
    let obj = {}; 
let obj2 = {name:'aaaaa'};
obj.ttt1 = obj2;
obj.ttt2 = obj2;
let cp = JSON.parse(JSON.stringify(obj)); 
obj.ttt1.name = 'change'; 
cp.ttt1.name  = 'change';

// 因为obj的 ttt1 和 ttt2都是指向一个同一个对象，所以修改其中一个，另一个也会变，也就是说obj.ttt1 === obj.ttt2
console.log(obj); // { ttt1: {name: "change"}, ttt2: {name: "change"}}

// 而通过这种方式拷贝时，obj2拷贝了两次，丢失了cp.ttt1 === cp.ttt2 的特征
console.log(cp); // {ttt1: {name: "change"}, ttt2: {name: "aaaaa"}}
    第二种：递归拷贝
    function cloneDeep(value) {
  let copied_objs = []; // 用于解决循环引用问题

  function _cloneDeep(value) {
    if (value === null) return null;
    if (typeof value === "object") {
    	// 对象类型的值首先在copied_objs查找是否出现过，如果出现直接返回之前的结果
      for (let i = 0; i < copied_objs.length; i++) {
        if (value === copied_objs[i].source) {
          return copied_objs[i].target;
        }
      }
      let new_value = {};
      
      // 需要处理数组的情况
      if (Array.isArray(value)) new_value = [];
      copied_objs.push({ source: value, target: new_value });

      Object.keys(value).forEach((key) => {
        new_value[key] = _cloneDeep(value[key]);
      });
      return new_value;
    } else {
      return value;
    }
  }
  return _cloneDeep(value);
}

    使用lodash的测试用例测试通过，TypedArray的相关用例没有通过，上面的代码没有考虑兼容TypedArray类型

    @luweiCN 然后在对空间中申请一块内存 应该是 堆，要不看起来很别扭

  9. xllpiupiu commented on Oct 2, 2021

    @xllpiupiu
    xllpiupiu
    on Oct 2, 2021
    /**
 * 实现深拷贝需要注意的点：
 */
 const parent = {
    a: 1,
    b: 2,
    c: 3
}
const child = {
    d: 4,
    e: 5,
    [Symbol()]: 6
}
child.__proto__ = parent
Object.defineProperty(child, "d", { enumerable: false })
console.log("Object.keys()>>>>>", Object.keys(child))//Object.keys()>>>>> [ 'e' ]
console.log("Object.getOwnPropertyNames>>>>",Object.getOwnPropertyNames(child))//Object.getOwnPropertyNames>>>> [ 'd', 'e' ]
console.log("Reflect.ownKeys>>>>",Reflect.ownKeys(child))//Reflect.ownKeys>>>> [ 'd', 'e', Symbol() ]

/**
 * 3. 使用递归
 * 获取属性for in  
 * Object.keys(obj)  
 * Object.getOwnPropertyNames(obj)  
 * Reflect.ownKeys 
 * 以上几种方法的区别
 */
function deepClone(oldObj) {
    let newObj = Array.isArray(oldObj)?[]:{};
    for(let key in oldObj) {
        if(oldObj.hasOwnProperty(key)) {
            if(oldObj[key]&&typeof oldObj[key]==='object') {
                console.log('进入深拷贝')
                newObj[key] = deepClone(oldObj[key]);
            } else {
                newObj[key] = oldObj[key];
            }
        }
    }
    return newObj;
}
let newObj3 = deepClone(oldObj);

  10. xllpiupiu commented on Oct 7, 2021

    @xllpiupiu
    xllpiupiu
    on Oct 7, 2021
    /**
 * 引用类型会有深拷贝的问题
 * 如果是引用类型数据，为了不改动原始数据需要深拷贝原数据
 */
/**
 * 1. 使用工具lodash函数库
 * let newObj = _.cloneDeep(oldObj);
 */
let oldObj = {
    'a':{
        'name':'消防',
        'age':22
    },
    'b':'b',
    'c':{
        'value':'hello',
        'id':23
    },
    'd':[1,2,3],
    'fun':function(){}
}
/**
 * 2. 使用JSON对象
 * 用JSON.stringify将对象转换为JSON字符串然后拷贝
 * 但是JSON.stringify不能转换函数即不能拷贝对象的方法
 */
function deepCopy(oldObj) {
    let newObj = JSON.parse(JSON.stringify(oldObj));
    return newObj;
}
let newObj2 = deepCopy(oldObj);

console.log('newObj2: ', newObj2);//{ a: { name: '消防', age: 22 }, b: 'b', c: { value: 'hello', id: 23 } }
oldObj['c']['id'] = 333;
console.log('newObj2: ', newObj2);//{ a: { name: '消防', age: 22 }, b: 'b', c: { value: 'hello', id: 23 } }
console.log('oldObj:>>>',oldObj)//{ a: { name: '消防', age: 22 }, b: 'b', c: { value: 'hello', id: 333 } }
/**
 * 实现深拷贝需要注意的点：
 */
 const parent = {
    a: 1,
    b: 2,
    c: 3
}
const child = {
    d: 4,
    e: 5,
    [Symbol()]: 6
}
child.__proto__ = parent
Object.defineProperty(child, "d", { enumerable: false })
console.log("Object.keys()>>>>>", Object.keys(child))//Object.keys()>>>>> [ 'e' ]
console.log("Object.getOwnPropertyNames>>>>",Object.getOwnPropertyNames(child))//Object.getOwnPropertyNames>>>> [ 'd', 'e' ]
console.log("Reflect.ownKeys>>>>",Reflect.ownKeys(child))//Reflect.ownKeys>>>> [ 'd', 'e', Symbol() ]

/**
 * 3. 使用递归
 * 获取属性for in  
 * Object.keys(obj)  
 * Object.getOwnPropertyNames(obj)  
 * Reflect.ownKeys 
 * 以上几种方法的区别
 */
function deepClone(oldObj) {
    let newObj = Array.isArray(oldObj)?[]:{};
    for(let key in oldObj) {
        if(oldObj.hasOwnProperty(key)) {
            if(oldObj[key]&&typeof oldObj[key]==='object') {
                console.log('进入深拷贝')
                newObj[key] = deepClone(oldObj[key]);
            } else {
                newObj[key] = oldObj[key];
            }
        }
    }
    return newObj;
}
let newObj3 = deepClone(oldObj);

console.log(newObj3);
oldObj['c']['id'] = 55;
oldObj['d'][0] = 22;
console.log('更改原对象之后newObj',newObj3);
//{
//     a: { name: '消防', age: 22 },
//     b: 'b',
//     c: { value: 'hello', id: 333 },
//     fun: [Function: fun]
//   }
console.log('更改原对象之后oldObj',oldObj)
// {
//     a: { name: '消防', age: 22 },
//     b: 'b',
//     c: { value: 'hello', id: 55 },
//     fun: [Function: fun]
//   }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    百度

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions