JavaScript对象之深度克隆

也不知道从什么时候开始,前端圈冒出了个新词:对象深度克隆。看起来好像很高大上的样子,实际上并不新鲜,在我们的实际项目开发中,你可能早已用到,只不过由于汉字的博大精深,有些原本很简单的事物被一些看似专业的词汇稍加修饰,就变得神秘起来了。

首先为什么要将一个对象进行深克隆?请允许我进行一个猜测:你有时一定会认为js的内置对象document太长,那么你可能会这样做:

var d = document;
d.by = function(id){
    return d.getElementById(id);
};
d.by(‘id‘).innerHTML = ‘hello sentsin‘;

代码laycode - v1.1

上述代码对document.getElementById进行了简化,同时在原document对象中也增加了一个by的成员方法,你可以通过document.hasOwnProperty(‘by‘)返回的状态值来验证你的判断。再看下面一个例子。

var person = {name: ‘贤心‘, profession: ‘前端开发‘, place: ‘杭州‘};
var newPerson = person;
newPerson.age = ‘24‘;
console.log(person);
//结果:{name: ‘贤心‘, profession: ‘前端开发‘, place: ‘杭州‘, age: 24}

代码laycode - v1.1

由此可见,将一个对象通过简单的传递给一个新的变量时,仅仅只是给该对象增添了一个别名。这意味着,通过对该别名的操作,原有对象键值会发生改变。但问题在于,有时我们希望newPerson完全独立于person,彼此之间不存在同步关系,那么就需要生成一个副本,请看例子:

var cloneObj = function(obj){
    var str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== ‘object‘){
        return;
    } else if(window.JSON){
        str = JSON.stringify(obj), //系列化对象
        newobj = JSON.parse(str); //还原
    } else {
        for(var i in obj){
            newobj[i] = typeof obj[i] === ‘object‘ ?
            cloneObj(obj[i]) : obj[i];
        }
    }
    return newobj;
};

//测试
var obj = {a: 0, b: 1, c: 2};
var arr = [0, 1, 2];
//执行深度克隆
var newobj = cloneObj(obj);
var newarr = cloneObj(arr);
//对克隆后的新对象进行成员删除
delete newobj.a;
newarr.splice(0,1);
console.log(obj, arr, newobj, newarr);
//结果: {a: 0, b: 1, c: 2}, [0, 1, 2], {b: 1, c: 2}, [1, 2];

代码laycode - v1.1

这便是所谓的对象克隆。不过有几处需要解释一下。代码中的JSON对象及其成员方法stringify和parse属于ECMAScript5规范,它们分别负责将一个对象(包括数组对象)转换成字符串,和还原,从而实现对象的深拷贝。那么对于低级浏览器(如IE),拷贝数组的话,可以用newobj.concat(obj),而普通对象,就索性枚举赋值好了。

时间: 2024-10-29 03:21:14

JavaScript对象之深度克隆的相关文章

javascript对象的深度克隆

在做项目的时候需要向对象里面添加新属性,又不想修改原对象.于是就写: var newObj = oldObj,但是新对象属性改变后就对象也会跟着改变,这是因为无论是新对象还是旧对象,指向的内存地址都是一样的,改变了谁都改变了 内存中的数据. 于是找到了一个取巧的方法就是先把旧对象转化为字符串 然后 在转化为对象给新对象,虽然可以达到效果,但是总感觉有点不正规.于是想到了深度克隆 function cloneObjectFn (obj){ // 对象复制 return JSON.parse(JSO

JavaScript实现对象的深度克隆【简洁】【分享】

JavaScript实现对象的深度克隆 代码实现如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>clone</title> 6 7 <script type="text/javascript"> 8 //对象深度克隆方法 9 10 11 ////

javascript中对象的深度克隆

零.寒暄 又是一个月多月没有更新博客了,这段时间回学校处理下论文的事情,实习的生活也暂时告一段落(在公司上班,才发现学校里面的生活简直如天堂一般,相信很多已经毕业的小伙伴肯定被我说中了,说中了请给本文点个赞,哈哈!).希望接下来自己的更新进度能加快,马上又是一年校招时,被虐也好.大牛虐别人也罢,总之祝福各位今年要找工作的小伙伴们好运.那么,今天就聊一下一个常见的笔试.面试题,js中对象的深度克隆.翻了下这个题目,在很多地方出现过,已经算一个老的题目了,但是每年的校招中总会考到,其实想想,这个题目

JAVA对象任意深度克隆clone工具类分享

原文:JAVA对象任意深度克隆clone工具类分享 源代码下载地址:http://www.zuidaima.com/share/1550463408114688.htm package com.zuidaima.n_app.util; import java.lang.reflect.Constructor; import java.lang.reflect.Field; import java.lang.reflect.InvocationTargetException; import jav

JAVA对象的深度克隆

有时候,我们需要把对象A的所有值复制给对象B(B = A),但是这样用等号给赋值你会发现,当B中的某个对象值改变时,同时也会修改到A中相应对象的值! 也许你会说,用clone()不就行了?!你的想法只对了一半,因为用clone()时,除了基础数据和String类型的不受影响外,其他复杂类型(如集合.对象等)还是会受到影响的!除非你对每个对象里的复杂类型又进行了clone(),但是如果一个对象的层次非常深,那么clone()起来非常复杂,还有可能出现遗漏! 既然用等号和clone()复制对象都会对

实现对象的深度克隆

1.方式一 实现Cloneable接口并重写 Object类中的 clone()方法 2. 方式二 (实现Serializable接口,通过对象的序列化和反序列化实现克隆,可以实现真正的深度克隆) 2.1 User类和Car的准备 package cn.qdm.ceshi; import java.io.Serializable; public class User implements Serializable{ private String name; private Integer age

JavaScript 浅克隆与深度克隆

一.浅克隆  1.基本数据类型的克隆(赋值即可) var a = 1; var b = a; console.info(a); //1 console.info(b); //1 a = 2; console.info(a); //2 console.info(b); //1 把一个值赋给另一个变量时,当那个变量的值改变的时候,另一个值不会受到影响. 2.数组克隆 如果我们采取基本数据类型的方式(赋值)来进行克隆,案例如下: var arr1 = [1, 2, 3]; var arr2 = arr

JS对象的深度克隆——JavaScript代码实现

1 function clone(Obj) { 2 var buf; 3 if (Obj instanceof Array) { 4 buf = []; // 创建一个空的数组 5 var i = Obj.length; 6 while (i--) { 7 buf[i] = clone(Obj[i]); 8 } 9 return buf; 10 } 11 else if (Obj instanceof Object){ 12 buf = {}; // 创建一个空对象 13 for (var k

对象的深度克隆

1 function clone(obj) { 2 var buf; 3 if(obj instanceof Array){ //被克隆的对象是数组 4 buf = []; 5 var i = obj.length; 6 while(i--){ 7 buf[i] = clone(obj[i]); 8 } 9 return buf; 10 }else if(obj instanceof Object){ //被克隆的对象是对象 11 buf = {}; 12 for (var k in obj){