浅拷贝
拷贝引用:如果对象的属性也是一个引用类型,拷贝的时候不重新创建一个新的对象来实现该属性的拷贝,那么就是浅拷贝
对象的直接赋值就是浅拷贝
1.引用数据类型的赋值
eg:引用数据类型拷贝
var arr1 = [1,2,3]
var arr2 = arr1 //浅拷贝
var obj1 = {name:'张三'}
var obj2 = obg1 //浅拷贝
2.ES6拓展运算
…拓展运算符,遍历当前对象能访问以及能遍历的所有属性,并将当前的属性放入一个新的集合中。
如果当前属性的属性值为基本数据类型,该拷贝为深拷贝,
如果为引用数据类型,拷贝的这是处于栈内存中保存的地址,即为浅拷贝
var obj2 = {…obj1}
3.Object.assign(空对象或者想被覆盖的对象,要复制的对象)
assign将的所有可枚举的自身属性(静态属性)从一个或多个源对象复制到目标对象,返回修改后的对象
var obj2 = Object.assign(obj2,obj1)
深拷贝
拷贝数据:将两个对象完全从内存中隔离开,就是深拷贝。即每一个引用属性,以及引用属性的引用属性,全部拷贝出来.
遍历对象的每一项数据,实现复制就是深拷贝
1.基本数据类型拷贝
eg:基本数据类型拷贝
var num1 = 1
var num2 = num1 //深拷贝
2.使用JSON,但不能拷贝函数、属性值为undefined的属性
var obj1 = {
name:'张三',
age:18,
say:function(){
console.log(this.name)
}
}
var obj2 = JSON.parse(JSON.stringify(obj1))
return 0bj
console.log(obj2.say()) //j2.say is not a function
var arr1 = [1,2,3]
var arr2 = JSON.parse(JSON.stringify(arr1))
3.for in遍历拷贝,不能拷贝对象
var obj1 = {
name: '张三',
age: 18,
f1: {
f2: {
f8: 'f8',
f9: 'f9',
},
f3: {
f13: 'f13',
f14: 'f14'
}
},
say: function () {
console.log(this.name)
}
}
var obj2 = {}
for (const key in obj1) {
obj2[key] = obj1[key]
}
console.log(obj1, obj2) //{name: '张三', age: 18, f1: {…}, say: ƒ} {name: '张三', age: 18, f1: {…}, say: ƒ}
obj1.say = function () {
console.log('obj1..........')
}
obj2.say() //张三
obj1.f1.f2.f8 = 'f88888888'
console.log(obj2.f1.f2.f8) //f88888888
4.递归实现深拷贝,完美实现对象深拷贝
var obj1 = {
name: "张三",
age: 18,
f1: {
f2: {
f8: "f8",
f9: "f9",
},
f3: {
f13: "f13",
f14: "f14",
},
},
say: function () {
console.log(this.name);
},
};
function deepClone(obj) {
//var objClone = {}
//判断要深拷贝的对象是否为数组,是则给objClone赋空数组
var objClone = Array.isArray(obj) ? [] : {};
for (const key in obj) {
//判断key是否为自身属性,是:拷贝
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === "object") {
//如果是对象就递归
objClone[key] = deepClone(obj[key]);
} else {
objClone[key] = obj[key];
}
}
}
return objClone;
}
let obj2 = deepClone(obj1);
console.log(obj2); //{name: '张三', age: 18, f1: {f2: {f8: 'f8', f9: 'f9'}, f3: {f13: 'f13', f14: 'f14'}}, say: ƒ}
obj1.f1.f2.f8="f88888"
console.log(obj2.f1.f2.f8); //f8
5.lodash 第三方插件 https://www.lodashjs.com/
let arr=[
{ pid: 101, pname: '华为nova10 128g', address: '深圳', price: 2688, num: 50001 },
{ pid: 102, pname: '华为nova10 256g', address: '深圳', price: 2999, num: 30001 },
{ pid: 103, pname: '华为nova10 pro 128g', address: '深圳', price: 3600, num: 40001 },
{ pid: 104, pname: '华为nova10 pro 256g', address: '广州', price: 3968, num: 20001 },
{ pid: 105, pname: '华为p50 Pocket 8+512g', address: '武汉', price: 9988, num: 10001 },
{ pid: 106, pname: '华为p50 Pocket 8+256g', address: '深圳', price: 8800, num: 35001 },
{ pid: 107, pname: '华为畅享50 6+128g', address: '武汉', price: 1249, num: 92501 },
{ pid: 108, pname: '华为畅享50 8+128g', address: '广州', price: 1499, num: 50001 },
{ pid: 109, pname: '华为畅享50 8+256g', address: '深圳', price: 1699, num: 88000 },
{ pid: 110, pname: '华为Mate 40 RS保时捷设计 5+512g', address: '深圳', price: 12000, num: 5000 }
]
var obj1 = {
name:'张三',
age:18,
say:function(){
console.log(this.name)
}
}
var obj2 = _.cloneDeep(obj1)