Article directory
JavaScript object type data deep copy method [mainly solves the problem that JSON.parse (JSON.stringify() will remove function attributes]
正常情况下，在js中我们要对一个数组做深拷贝，最新想到的方法是JSON.parse(JSON.stringify(arr))，但是JSON.parse(JSON.stringify()会去掉属性中为函数的属性。
For example:
let arr = [
{
a: 1,
b: 2,
c: function () {
console.log('111');
}
}
]
arr1 = JSON.parse(JSON.stringify(arr))
arr1[0].a = 100
console.log(arr, arr1);
// [ { a: 1, b: 2, c: [Function: c] } ]
// [ { a: 100, b: 2 } ]
Deep copy method of handwritten object type data deepClone
code show as below:
function deepClone(originValue) {
// 如果不是对象类型且是null则直接将当前值返回
if (typeof originValue !== 'object' || originValue == null) {
return originValue;
}
const newObject = Array.isArray(originValue) ? [] : {
}
for (const key in originValue) {
// 因为javascript没有将hasOwnProperty作为一个敏感词，所以我们很有可能将对象的一个属性命名为hasOwnProperty，
// 这样一来就无法再使用对象原型的 hasOwnProperty 方法来判断属性是否是来自原型链。
// 所以采用 Object.prototype.hasOwnProperty.call
if (Object.prototype.hasOwnProperty.call(originValue, key)) {
// 若是对象类型属性，递归调用deepClone，若是其他类型属性，则直接赋值
if (typeof originValue[key] === 'object' && originValue[key] !== null) {
newObject[key] = deepClone(originValue[key]);
} else {
newObject[key] = originValue[key];
}
}
}
return newObject
}
let arr = [
{
a: 1,
b: 2,
c: function () {
console.log('111');
}
}
]
arr1 = deepClone(arr)
// arr1 = JSON.parse(JSON.stringify(arr))
arr1[0].a = 100
console.log(arr, arr1);
// [ { a: 1, b: 2, c: [Function: c] } ]
// [ { a: 100, b: 2, c: [Function: c] } } ]
arr1[0].c() // 111
summary
If the attributes in the object array do not have function attributes, you can use it JSON.parse(JSON.stringify(), but if there are function attribute values, use the method you write deepClone.