对象浅拷贝深拷贝方法总结

对象复制方法总结
Object.assign Object.creat() jQuery.extend(object)
JSON.parse(JSON.stringfy()) 循环递归方法 原型链继承方法

深拷贝是拷贝储存在栈中的对象,
而浅拷贝是从内存中拷贝,
数据大体可以分为两种数据类型,
一种是基本数据类型,数据结构不是很复杂,单独可以存在内存中就可以,
另一种是复杂数据类型,也叫引用数据类型,放在栈中存储的,例如数组和对象

引用类型数据存储是首先在内存开辟一个空间,但内存当中不可以存储这种复杂数据类型,
所以要把这种结构放到栈当中,栈相当于一个密码箱,而钥匙存在内存当中,这就构成了一个存储关系,

浅拷贝就是把这份钥匙复制了一份,但内存当中的数据并没有复制,所以如果改变a相应b也会改变
而深拷贝则需要在栈中在生成一个密码箱,生成一把新钥匙(钥匙2),这样深拷贝的两种数值不会相互影响,
也可以说没有任何关系了

方法一:JSON.parse(JSON.stringify(obj));
但是这种简单粗暴的方法有其局限性。当值为undefined、function、symbol 、有NaN、Infinity和-Infinity、RegExp、Error对象,时间对象,会在转换过程中被忽略或者异常

JSON.parse(JSON.stringfy())注意事项

方法二、递归通用拷贝函数

function clone(obj){
let newObj = Array.isArray(obj) ? [] : {};
    for(let key in obj){
	    let val = obj[key];
	    newObj[key] = typeof val == 'object'&& val !==null?clone(val):val;
	    // //clone(val)递归复制
	    //这里也没有判断是否为函数,因为对于函数,我们将它和一般值一样处理
    }
return newObj ;
}

方法三、Object.assign({},obj)

var obj = {a:1,b:2}  
var newObj = Object.assign({}, obj); 

在这里插入图片描述

方法四、jq中,$.extend({},obj)方法、jQuery.extend(object)方法
概述:
 扩展jQuery对象本身,用来在jQuery命名空间上增加新函数。

var obj = {
    x: 1,
    y: {
        a: 1,
        b: 0,
        c: [1, 2, 3]
    }
};
var obj2 = $.extend({}, obj);
console.log(obj2 === obj) //false 
console.log(obj2);

对象浅拷贝深拷贝方法总结_第1张图片
方法五. Object.create()方法
 复制对象存在于Object原型prototype中

var obj = {
    x: 1,
    y: {
        a: 1,
        b: 0,
        c: [1, 2, 3]
    }
};

var obj2 = Object.create(obj);
console.log(obj2 == obj); //false
console.log(obj2);

对象浅拷贝深拷贝方法总结_第2张图片
 深拷贝, 就是遍历那个被拷贝的对象。判断对象里每一项的数据类型。如果不是对象类型, 就直接赋值, 如果是对象类型, 就再次调用递归的方法去赋值。

方法六. 原型链继承方法

function Father() {
    this.say = "hi";
    this.fn = function () {
        return this.say;
    }
}
Father.prototype.eat = function () {
    console.log('吃');
}
function Son() {
    this.play = function () {
        console.log('play game');
    }
}

//通过原型来继承父类的公共属性

Son.prototype = new Father();
var s = new Son();
console.log(s);
console.log(s.say); //hi
console.log(s.fn()); //hi

对象浅拷贝深拷贝方法总结_第3张图片

你可能感兴趣的:(Object,for,in,对象遍历,javascript,递归,es6)