数组和对象的浅拷贝和深拷贝

前言: 对于拷贝需要考虑数据的类型

  数据类型分为:基本数据类型和引用类型;

  基本数据类型是存储在栈中的简单数据;常见:String,Number,Undefined,Null,Boolean以及Es6新定义的Symbol;

  引用类型值是引用类型实例,它是保存在堆中的一个对象,引用类型是一中数据结构;常见:Array,Object,Function,Date,RegExp等,Es6提供的set和map新的数据结构;

  复制时的区别:

    基本数据类型是按值访问的;

    引用类型复制时,是复制的存在栈中的指针,指针指向堆内的数据,如果只是简单的赋值,就只是赋值了栈中的指针,通过一个变量操作堆内的对象会影响两者;

一、浅拷贝

  理解:创建一个新对象,这个对象有这原始对象属性值的一份精确拷贝;如果是基本类型,则拷贝的是基本类型的值,如果是引用类型,则拷贝的是内存地址,所以一个对象改变了这个地址对应点堆内数据,则会影响到另外一个对象

  1:Object.assign(target,...source)

    # ES6提供的浅拷贝的方法,接受的第一个参数是拷贝的目标,第二个参数将要拷贝的源对象

    # Object.assign()只是拷贝根属性上的值(对象的第一层属性),如果根属性上的值是引用类型的数据,则仍是浅拷贝

    # 特点: 不会拷贝继承的属性;可以拷贝symbol类型的值;

    # 可以理解为:Object.assign()只是简单的=赋值,遍历从右到左遍历source上的属性赋值到target目标对象上

  2:扩展运算符 - 浅拷贝

    var cloneObj = { ...obj } // 对象

    var cloneArr = [ ...arr ]  // 数组

    # 对于值是对象的属性无法完全拷贝成两个完全不相同的对象;但是如果对象的值都是基本数据类型的话,扩展运算符还是比较方便的

  3:Array.property.slice() - arr.slice(begin, end)

    返回一个新的数组对象,这一对象是由begin和end决定的原数组的浅拷贝;原数组不改变;

  4:concat():该方法是连接两个或多个数组,但它不会修改原先的数组;问题:只会对第一层进行拷贝,对深层的不起作用

二、深拷贝

  理解:将一个对象在内存中完整的拷贝出来,并内存中开辟一个新的空间存放新对象,这两个对象是相互独立的,且修改新对象不会影响原先的对象

  1:JSON.stringify()   JSON.parse()

  原理:将对象序列化成JSON字符串,将对象的内容转化成字符串的形式再保存到磁盘上,再用JSON.parse()反序列化将JSON字符串转换成新的对象

  注意:拷贝的对象的值有函数、undefined、symbol则经过反序列化后的JSON字符串中的键值对会消失;对象中包括NaN、infinity则序列化的后变为null

// JSON
var obj = {
    name: 'zs',
    arr : [ '1', 'a', { msg: '打贝贝' }]
}
// 针对对象深拷贝
var newObj = {}
// 便利对象里的键进行JSON编码和解析
for (var k in obj) {
    newObj = JSON.parse(JSON.stringfiy(obj[k]))
}
// 该方法对对象里的值是基本数据类型是可以的,对于引用类型是不成立的

  2:递归

// 2:递归深拷贝
var obj   =   { 
       name: "贝贝",     
       age: 20,     
       arr: [ '1', 'a', { msg: '揍贝贝!' },     
       obj: {
         console.log('内层的对象')
       }  
}

function deepClone(obj) {
    // 判断obj是数组还是对象,响应的格式进行拷贝
    const cloneObj = Array.isArray(obj) ? [] : {}
    // 拷贝对象不能为空且是对象
    if (obj && typeOf obj === 'Object')  {
        for (var k in obj) {
        // 判断对象里是否有键
      if (obj.hasOwnProperty(k)) {      
            if (obj[k]&& typeOf obj[k] === 'Object') {
                cloneObj[k] = deepClone(obj)
            } else {
                cloneObj[k] = obj[k]
            }
       }
        }
    }
    return cloneObj
}     
// 该方法只是针对object引用类型的值进行循环迭代

   3:lodash和jquery都有已经封装好的深拷贝的方法,有兴趣的可以深入研究下

posted @ 2020-07-27 14:36  xsk-walter  阅读(273)  评论(0编辑  收藏  举报