持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情
对象拷贝分为浅拷贝(shallow)和深拷贝(deep)两种。浅拷贝只复制一层对象的属性，并不会进行递归复制，而javascript存储对象都是存地址的，所以浅拷贝会导致对象中的子对象指向同一块内存地址；而深拷贝则不同，它不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深拷贝的方法递归复制到新对象上，拷贝了所有层级。
浅拷贝： 如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型拷贝的就是内存地址，两个对象指向同一个地址。 深拷贝： 将对象里的所有数据重新复制到新的内存空间，是最彻底的拷贝。两个对象指向不同的地址
浅拷贝
在JS中存在浅拷贝的现象有
object.assignArray.prototype.slice()，Array.prototype.concat()- 使用扩展运算符实现的复制
【推荐方法】Object.assign()
将obj1拷贝给obj2，如果对象里的属性名相同，会被覆盖 obj2 = Object.assign(obj2, obj1) Object.assign(target, 源对象1, 源对象2…)
//Object.assign()
var obj = {
age: 18,
nature: ['smart', 'good'],
names: {
name1: 'fx',
name2: 'xka'
},
love: function () {
console.log('fx is a great girl')
}
}
var newObj = Object.assign({}, fxObj);
newObj.names.name1 = 'lys'
console.log(obj.names,name1) //lys
//slice()
const fxArr = ["One", "Two", "Three"]
const fxArrs = fxArr.slice(0)
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]
//concat()
const fxArr = ["One", "Two", "Three"]
const fxArrs = fxArr.concat()
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]
//扩展运算符
const fxArr = ["One", "Two", "Three"]
const fxArrs = [...fxArr]
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]
【方法一】简单拷贝：新建一个空对象，使用for-in循环，将对象的所有属性复制到新建的空对象中
function simpleClone1(obj){
if(typeof obj != 'object'){
return false;
}
var cloneObj = {};
for(var i in obj){
cloneObj[i] = obj[i];
}
return cloneObj;
}
var obj1={a:1,b:2,c:[1,2,3]};
var obj2=simpleClone1(obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3,4]
【方法二】使用属性描述符
通过对象的原型，建立一个空的实例对象。通过forEach语句，获取到对象的所有属性的属性描述符，将其作为参数，设置到新建的空实例对象中
function simpleClone2(orig){
var copy = Object.create(Object.getPrototypeOf(orig));
Object.getOwnPropertyNames(orig).forEach(function(propKey){
var desc = Object.getOwnPropertyDescriptor(orig,propKey);
Object.defineProperty(copy,propKey,desc);
});
return copy;
}
var obj1={a:1,b:2,c:[1,2,3]};
var obj2=simpleClone1(obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3,4]
【方法三】使用jquery的extend()方法
var obj1={a:1,b:2,c:[1,2,3]};
var obj2=$.extend({},obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3,4]
深拷贝
深拷贝开辟一个新的栈，两个对象属性完全相同，但是对应不同两个地址，修改一个对象的属性，不会改变另一个对象的属性 常见的深拷贝方式
_.cloneDeep()jQuery.extend()JSON.stringify()- 手写循环递归
【方法一】遍历复制
复制对象的属性时，对其进行判断，如果是数组或对象，则再次调用拷贝函数；否则，直接复制对象属性
function deepClone1(obj,cloneObj){
if(typeof obj != 'object'){
return false;
}
var cloneObj = cloneObj || {};
for(var i in obj){
if(typeof obj[i] === 'object'){
cloneObj[i] = (obj[i] instanceof Array) ? [] : {};
arguments.callee(obj[i],cloneObj[i]);
}else{
cloneObj[i] = obj[i];
}
}
return cloneObj;
}
var obj1={a:1,b:2,c:[1,2,3]};
var obj2=deepClone1(obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3]
【方法二】json
用JSON全局对象的parse和stringify方法来实现深复制算是一个简单讨巧的方法，它能正确处理的对象只有Number、String、Boolean、Array、扁平对象，即那些能够被json直接表示的数据结构
function jsonClone(obj){
return JSON.parse(JSON.stringify(obj));
}
var obj1={a:1,b:2,c:[1,2,3]};
var obj2=jsonClone(obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3]
【方法三】使用jquery的extend()方法
var obj1={a:1,b:2,c:[1,2,3]};
var obj2=$.extend(true,{},obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3]
