- 浅拷贝
①引用的复制
function clone(obj) {
let newObj = {};
for (let key in obj) {
if (!obj.hasOwnProperty(key)) break;
newObj[key] = obj[key]
}
return newObj;
}
let obj = {
age: 20,
name: 'xxx',
address: {
city: 'beijing'
},
arr: ['a', 'b', 'c']
}
// 测试
let obj2 = clone(obj);
console.log(obj2 == obj) //false
obj2.age = 18;
console.log(obj.age) //20
obj2.address.city = 'shanghai'
console.log(obj.address.city) //'shanghai'
②Object.assign()方法
let arr = ['a', 'b', 'c']
let newArr = Object.assign([], arr)
console.log(newArr) //['a', 'b', 'c']
newArr[0] = 'd';
console.log(arr) //['a', 'b', 'c']
console.log(arr==newArr) //false
let obj = {
age: 20,
name: 'xxx',
address: {
city: 'beijing'
},
arr: ['a', 'b', 'c']
}
let newObj=Object.assign({},obj);
console.log(obj==newObj) //false
newObj.arr[0]='b';
console.log(obj.arr) //['b', 'b', 'c']
- 深拷贝
①JSON.stringify()、JSON.parse()
let obj = {
age: 20,
name: 'xxx',
address: {
city: 'beijing'
},
arr: ['a', 'b', 'c']
}
let newObj=JSON.parse(JSON.stringify(obj))
newObj.address='guangzhou';
console.log(obj.address)// {city:'beijing'}
注:这种方法的弊端在于如果对象中包含方法、日期、正则表达式,拷贝的属性值不正确
let newObj=JSON.parse(JSON.stringify({a:1,b:/\b([a-z]+)\1\b/}))
console.log(newObj) //{a:1,b:{}}
let newObj = JSON.parse(JSON.stringify({
a: 1,
b: function() {}
}))
console.log(newObj) //{a:1}
let newObj = JSON.parse(JSON.stringify({
a: 1,
b: new Date()
}))
console.log(newObj) //{a: 1, b: "2021-03-01T16:29:50.543Z"}
- 递归的方式实现深拷贝
// 深拷贝
function deepClone(obj) {
// 过滤特殊情况
if (typeof obj !== 'object' || obj == null) {
return obj;
}
if (obj instanceof RegExp) {
return new RegExp(obj)
}
if (obj instanceof Date) {
return new Date(obj);
}
if (obj instanceof Function) {
return new Function(obj);
}
// 不直接创建对象的目的:克隆的结果和之前保持相同的所属类
let newObj = new obj.constructor;
for (let key in obj) {
if (obj.hasOwnProperty(key)) { //只拷贝私有的属性,公有的不拷贝
// 递归调用
newObj[key] = deepClone(obj[key])
}
}
return newObj;
}
// 测试
let obj = {
age: 20,
name: 'xxx',
address: {
city: 'beijing'
},
arr: ['a', 'b', 'c']
}
let obj2 = deepClone(obj);
console.log(obj2 === obj);//false
obj2.arr[0]=1;
console.log(obj.arr[0])//a