JS深拷贝和浅拷贝

1.js基本数据类型
  • 基本数据类型: String,Boolean,Number,Undefined,Null\
  • 引用数据类型:
    Object(Array,Date,RegExp,Function)
基本数据类型和引用数据类型的区别:
  1. 保存位置不同: 基本数据类型保存在栈内存中,引用数据类型保存在堆内存中,然后在栈内存中保存了一个对堆内存中实际对象的引用,即数据在堆内存中的地址,js对引用数据类型的操作都是操作对象的引用而不是实际对象,如果obj1拷贝了obj2,那么这两个引用数据类型就指向了同一个堆内存对象,具体操作是obj1将栈内存的引用地址复制了一份给obj2,因而他们指向了一个共同的堆内存对象;

为什么基本类型保存在栈中,引用数据类型保存堆中?

  • 堆比栈大,栈比堆的速度快
  • 基本数据类型比较稳定,相对来说占用的内存小
  • 引用数据类型大小是动态的,而且是无限的
  • 堆内存是无序存储,可以根据引用直接获取

按引用访问: js不允许直接访问保存早堆内存中的对象,所以访问一个对象时,首先得到的是这个对象在栈内存中的地址,然后在按照这个地址去获得这个对象的值。

ECMAScript中所有函数的参数都是按值传递的,对于原始值,只要把变量里的值传递给参数,之后参数和这个变量互不影响,对于引用值,对象变量里面的值就是这个对象在堆内存中的内存地址,因此它传递的值是这个内存地址,这也就是为什么函数内部对这个参数修改会体现在外部的原因,因为他们指向的是同一个对象。

  1. 基本数据类型使用typeof可以返回基本数据类型,但是null会返回一个object,因此null表示一个空对象指针;引用数据类型使用typeof会返回object,此时就需要用instanceof来检测引用数据类型。

  2. 定义引用数据类型需要使用new操作符,后面跟一个构造函数来创建。
    1) 使用new操作符创建对象;
    var obj = new Object();
    obj.name = "Lusen"
    2) 使用对象字面量创建对象
    var obj = { name: "Lusen" }

  1. 可以使用点表示法访问对象属性,也可以使用[]访问对象属性([]可以包含变量和非法字符)
  • ES6新增数据类型:Map, Set, Generator, Symbol
深拷贝和浅拷贝

浅拷贝和深拷贝都只针对引用数据类型,浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象共享同一块内存;但深拷贝会创造一个一样的对象,不会和原来的对象共享内存,修改新对象不会改变原对象。
区别:浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制;

  • Object.assign第一级属性是深拷贝,第一级以下浅拷贝
let person = {
        name: 'Lusen',
        speak: {
            chinese: 'good',
            english: 'bad'
        }
    }

    let person2 = Object.assign({}, person)

    person2.name = 'engline'
    person2.speak.chinese = 'greet'
    console.log(person.name);  // Lusen  
    console.log(person2.name); // engline
    console.log(person.speak.chinese);  // greet
    console.log(person2.speak.chinese); // greet

  • 递归实现深拷贝
function deepCopy(obj) {
        var _obj = Array.isArray(obj) ? [] : {};
        if (obj && typeof _obj === 'object') {
            for (var i in obj) {
                var prop = obj[i] // 避免互相引用造成死循环
                if (prop === obj) {continue};
                if (obj.hasOwnProperty(i)){
                    // 如果子属性为引用数据类型,则递归复制
                    if (prop && typeof prop === 'object') {
                        _obj[i] = deepCopy(prop)
                    }else {
                        // 基本数据类型,直接简单复制
                        _obj[i] = prop
                    }
                }
            }
        }
        return _obj;
    }
    var obj1 = {
        a: 1,
        b: 2,
        c: {
            d: 3
        }
    }
    var obj2 = deepCopy(obj1);
    obj2.a = 3;
    obj2.c.d = 4;
    alert(obj1.a); // 1
    alert(obj2.a); // 3
    alert(obj1.c.d); // 3
    alert(obj2.c.d); // 4
  • 使用JSON.stringify和JSON.parse实现深拷贝:先把对象转化为字符串,在转成新的对象
function deepCopy(obj1){
    let _obj = JSON.stringify(obj1);
    let obj2 = JSON.parse(_obj);
    return obj2;
  }
    var a = [1, [1, 2], 3, 4];
    var b = deepCopy(a);
    b[1][0] = 2;
    alert(a); // 1,1,2,3,4
    alert(b); // 2,2,2,3,4

缺点: 会抛弃对象的constructor,深拷贝之后,不管这个对象原来的构造函数是什么,都会变成Object。这种方法只能处理对象只有Number,String,Boolean,Array,扁平对象,也就是说只有可以转成json格式的对象才能这样用,function就没办法

let obj1 = {
   fun:function(){
      alert(123);
   }
}
let obj2 = JSON.parse(JSON.stringify(obj1));
console.log(typeof obj1.fun); // function
console.log(typeof obj2.fun); // undefined
  • lodash函数库有提供方法做深拷贝
var _ = require('lodash');
var obj1 = {
   a: 1,
   b: { f: { g: 1 } },
   c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f); // false
  • slice只有对一级属性的数组对象深拷贝
// 一级属性数组使用slice
var a = [1,2,3,4];
var b = a.slice();
b[0] = 2;
alert(a); // 1,2,3,4
alert(b); // 2,2,3,4

// 对有多层属性的数组对象使用slice
var a = [1,[1,2],3,4];
var b = a.slice();
b[1][0] = 2;
alert(a); // 1,2,2,3,4
alert(b); // 1,2,2,3,4
  • Object.create
var obj1 = {
        a: 1,
        b: {
            c: 2
        }
    }

    var obj2 = Object.create(obj1)
    obj2.a = 22
    obj2.b.c = 333
    console.log(obj1.a); // 1
    console.log(obj2.a); // 22
    console.log(obj1.b.c); // 333
    console.log(obj2.b.c); // 333

你可能感兴趣的:(JS深拷贝和浅拷贝)