js拷贝的三种方式对比(深拷贝、浅拷贝、递归拷贝)
作者：影子信息
在JavaScript编程中,拷贝是一个常见的操作,而区分深拷贝和浅拷贝对于理解程序行为和预测程序结果至关重要,这篇文章主要介绍了js拷贝的三种方式对比,分别是深拷贝、浅拷贝、递归拷贝,需要的朋友可以参考下
背景：
拷贝就是复制，拷贝的是javascript对象。
深拷贝是对象里面嵌套对象，全部拷贝；浅拷贝只拷贝一层，不会全部拷贝。
拷贝的三种方式对比：
(一)、JSON.parse(JSON.stringify(obj))
理论知识：
let newObj = JSON.parse(JSON.stringify(obj))
特点:
能实现深拷贝，不能拷贝的数据类型为的Function函数、undefined
let obj = {
name: "Aj",
age: 18,
num: undefined,
say: function () {
console.log("say函数>>>");
},
arr: ["数组1", "数组2"],
objOption: {op01:'jack',op02:2022},
};
let newObj = JSON.parse(JSON.stringify(obj))
console.log("obj>>>", obj);
console.log("newObj>>>", newObj);
newObj.age = 24;
newObj.objOption.op02=2023
console.log("obj>>>", obj);
console.log("newObj>>>", newObj);代码控制台：
(二)、扩展运算符…obj <=> Object.assign(obj)
理论知识：
特点：
不能深拷贝，即只能拷贝一层,如下图【浅拷贝】；
所有数据类型都能拷贝。
let obj = {
name: "Aj",
age: 18,
num: undefined,
say: function () {
console.log("say函数>>>");
},
arr: ["数组1", "数组2"],
objOption: {op01:'jack',op02:2022},
};
let newObj = {...obj}
console.log("obj>>>", obj);
console.log("newObj>>>", newObj);
newObj.age = 24;
newObj.objOption.op02=2023
console.log("obj>>>", obj);
console.log("newObj>>>", newObj);代码控制台：
(三)、递归拷贝
背景：
深拷贝和浅拷贝有各自的优点和缺点，所以考虑把二者的优点结合起来。
解决思路：
1. 如果对象属性值没有对象，只有一层,使用展开运算符{…obj}
2. 如果对象数据类型不是Function也不是数据值为undefined,
使用JSON.parse(JSON.stringify(obj))
4. 否则使用递归
代码封装：
/**
* 深拷貝-递归实现
* @param {*} data
* @returns
*/
const cloneDeep = (data) => {
const newData = Array.isArray(data) ? [] : {};
for (let key in data) {
if (data[key] && typeof data[key] === "object") {
newData[key] = cloneDeep(data[key]);
} else {
newData[key] = data[key];
}
}
return newData;
};
/**
* 拷贝对象 优化方案
* @param {*} obj 原对象
* @param {*} cloneOjb 返回拷贝对象
*/
const cloneDeepObj = (obj) => {
if (obj === undefined) {
throw new TypeError("param is not undefined");
}
//判断拷贝对象只有一层及属性值都不是对象,使用Object.assign()
if (!isObjectValue(obj)) {
return { ...obj };
}
//判断类型,如果不是Function或undefined使用JSON方式
if (!isFunctionOrUndefined(obj)) {
return JSON.parse(JSON.stringify(obj));
}
return cloneDeep(obj);
};
/**
* 递归判断数据类型
* Function或undefined返回为true
*/
const isFunctionOrUndefined = (data) => {
for (let key in data) {
if (data[key] === undefined) {
return true;
} else if (
data[key] &&
Object.prototype.toString.call(data[key]) === "[object Function]"
) {
return true; //Function
} else if (data[key] && typeof data[key] === "object") {
isFunctionOrUndefined(data[key]);
}
}
};
/**
* 判断对象属性值是否有对象
* @param {} data
* @returns
*/
const isObjectValue = (data) => {
for (let key in data) {
if (data[key] && typeof data[key] === "object") {
if (
Object.prototype.toString.call(data[key]) !== "[object Function]"
) {
return true;
}
}
}
};
调用封装代码，示例如下：
const testCloneDeepObj = () => {
const obj = {
name: "jack",
age: 18,
hobby: { swiming: "游泳" },
arr: [{ score: 98 }],
say: function () {
console.log(this.name);
},
number: undefined,
};
const cloneObj = cloneDeepObj(obj);
cloneObj.name = "rose";
cloneObj.age = 20;
cloneObj.hobby.swiming = "不会游泳";
cloneObj.arr[0].score = 100;
console.log("obj :", obj, "\n cloneObj :", cloneObj);
cloneObj.say();
obj.say();
};
testCloneDeepObj();代码控制台：
附：使用场景
无论是浅拷贝还是深拷贝，一般都用于操作Object 或 Array之类的复合类型。
1、例如：
比如：想对某个数组 或 对象的值进行修改，但是又想保留原来数组 或 对象的值不被修改！
此时：就可以用深拷贝来创建一个新的数组 或 对象，从而达到操作(修改)新的数组 或 对象时，保留原来数组 或 对象。
2、扩展：
在JS中还有一些原生封装好的浅拷贝方法：
如数组方法：concat()，filter()，slice()，map()等。
它们在修改数组时，不会修改原来的数组，而是返回一个新的数组。
总结
到此这篇关于js深拷贝、浅拷贝、递归拷贝的文章就介绍到这了,更多相关js深拷贝、浅拷贝、递归拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！