JavaScript浅层克隆与深度克隆实现原理及代码示例
本文详细解析JavaScript中浅层克隆与深度克隆的区别及实现方法。通过对比引用值变化,展示浅层克隆仅复制第一层对象的特性;深入探讨深度克隆如何处理数组和对象,利用Object.prototype.toString判断类型,并通过递归实现完整复制。附带完整代码示例,帮助开发者掌握对象拷贝的核心技术。
JavaScript浅层克隆与深度克隆概述
本文重点讲解JavaScript中浅层克隆与深度克隆的区别及具体实现方式,文中提供了详细的示例代码,旨在为读者的学习和工作提供有价值的参考。
浅层克隆机制与示例
浅层克隆:当修改引用类型的值时,原对象和克隆对象会同时发生变化。
var obj = {
name : 'xiaoming',
age : 12,
children : ['mimi','lili','rokey']
}
var obj2 = {};
function clone(origin, target) {
var target = target || {};
for(var prop in origin) {
target[prop] = origin[prop];
}
return target;
}
clone(obj, obj2);
深度克隆实现原理
深度克隆:主要针对数组和对象进行完整复制。
实现深度克隆的第一步是判断值是否为原始类型。
第二步需区分数据类型是数组还是对象,可通过Object.prototype.toString.call([])返回'[object Array]',以及Object.prototype.toString.call({})返回'[object Object]'来进行判断。
第三步根据判断结果,分别创建对应的数组或对象容器。
第四步通过递归调用,遍历并复制对象或数组中的属性。
function deepClone(origin, target) {
var target = target || {},
toStr = Object.prototype.toString,
arrStr = '[object Array]';
for(var prop in origin) {
if(origin.hasOwnProperty(prop)) { //判断是不是对象自带的属性
if(origin[prop] !== 'null' && typeof(origin[prop]) == 'object') {
if(toStr.call(origin[prop]) == arrStr) {
target[prop] = [];
}else {
target[prop] = {};
}
deepClone(origin[prop], target[prop]);
}else {
target[prop] = origin[prop];
}
}
}
return target;
}
总结
以上就是本文的全部内容,希望这些解析对大家的JavaScript学习有所帮助,欢迎继续支持本站获取更多技术资源。
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
