深拷贝与浅拷贝

2021-08-16  本文已影响0人  lvyweb

数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据(object)类型。

1、基本数据类型的特点:直接存储在栈(stack)中的数据

2、引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

深拷贝的实现方式

  1. 手写深拷贝
    递归方法实现深度克隆原理:遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝。
  function deepClone(obj = {}){
        if(typeof obj!='object' || obj == null){
            return obj;
        }
        let result;
        if(obj instanceof Array){
            result = []
        }else{
            result = {};
        }
        for(let key in obj ){
            if(obj.hasOwnProperty(key)){
                result[key] = deepClone(obj[key]);
            }
        }
        return result;
    }

    var obj1 = {
        'name' : 'August',
        'age' :  '18',
        'language' : [1,[2,3],[4,5]],
    };
    var obj2= deepClone(obj1);
    console.log('obj2===',obj2);
    obj2.name = 'September';
    console.log('obj1===',obj1,'obj2====',obj2);
  1. JSON.parse(JSON.stringify())
let arr = [1, 3, {
     username: 'August'
}];
let newArr = JSON.parse(JSON.stringify(arr));
newArr[2].username = 'September';
console.log(arr, newArr)

原理: 用JSON.stringify将对象转成JSON字符串,再用JSON.parse()把字符串解析成对象,一去一来,新的对象产生了,而且对象会开辟新的栈,实现深拷贝。
这种方法虽然可以实现数组或对象深拷贝,但不能处理函数。
这是因为 JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,不能接受函数。

  1. 函数库lodash
    该函数库也有提供_.cloneDeep用来做Deep Copy
var arr = require('lodash');
var obj1 = {
   a: 1,
   b: { f: { g: 1 } },
   c: [1, 2, 3]
};
var obj2 = arr .cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);
// false

浅拷贝的实现方式

  1. Object.assign()
    Object.assign()方法可以把任意多个的源对象自身可枚举属性给目标对象,然后返回目标对象。但是Object.assign()进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。
    eg:
    let obj = { a: {name: "August", b: 18} };
    let initalObj = Object.assign({}, obj);
    initalObj.a.name= "September";
    console.log(obj.a.name); // September

当object 只有一层的时候,是深拷贝

  1. Array.prototype.concat()
 let arr = [1, 3, {
        username: 'August'
  }];
 let arr2 = arr.concat();    
//修改新对象会改到原对象:
 arr2[2].username = 'September';
 console.log(arr);
  1. Array.prototype.slice()
    用法同concat

关于Array的slice和concat方法的补充说明:Array的slice和concat方法不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组

上一篇 下一篇

猜你喜欢

热点阅读