js中深克隆与浅克隆

js中深克隆与浅克隆

参考：https://blog.csdn.net/sinat_17775997/article/details/70482279

最近的项目要做一个对表数据的增加，由于表的设计比较复杂：字段中存的数据是json格式，相当于表中表。8多说，上图。

显示规格及选项列表（复选框），并保存用户选择的结果

需要经过遍历添加规格：
添加完网络制式后，再加屏幕尺寸5.0，需要在之前的规格列表中多加一个屏幕尺寸属性；若是再多勾选一个尺寸，那么所有规格数据需要克隆之前网络制式的数据，再加上新的属性：屏幕尺寸6寸。

变成这样的格式。这时候要求用到深克隆，而不是浅克隆。
那么什么是深克隆，什么是浅克隆呢？
首先，克隆只针对对象、数组、函数等复杂数据。
浅克隆就是将栈内存中的引用复制一份，赋给一个新的变量，本质上两个指向堆内存中的同一地址，内容也相同，其中一个变化另一个内容也会变化（根本上改变的是同一个对象）。

深克隆就是创建一个新的对象，开辟一块内存，然后将原对象中的数据全部复制过去，新对象和原对象毫无关系，互不影响。
深克隆本质上是创造一个完全一样的对象，这里简单介绍两种js的deepClone方法。talk is cheap show me the code~
一、递归完成深克隆
function deepClone(arr) {
if (typeof arr != “object”) {
return arr;
}
var result = {};
for (var i in arr) {
result[i] = deepClone(arr[i]);
}
return result;
}
代码非常简单，只有十行代码。首先判断元素是否是object，不是打哪儿来回哪儿去，然后创建一个对象赋给result。然后遍历arr中所有的元素，递归判断是否是深层对象，不是返回赋给result。这样就实现了深克隆。下面测试一下。

var a = {
name:“小明”,
age:“12”,
sister:{
name:“小美”,
age:“10”
}
}

var arrTwo = arrOne;
var arrThree = deepClone(a);
arrThree.name = “小光”;
arrThree.object.name = “小雅”;

console.log(arrTwo);
console.log(arrThree);
输出结果也在意料之中

Object:
name:“小明”,
age:“12”,
Object:
name:“小美”,
age:“10”

Object:
name:“小光”,
age:“12”,
Object:
name:“小雅”,
age:“10”
这里可以看到在对原数组操作时，克隆返回的数组内容不会改变。两个数组是完全不同的两个对象，在堆内存中各占一块，没有关联。
这个我也没试过，是复制参考资料中的。因为用的是下面更为简单的，只需要一行代码就搞定。
二、利用JSON

var a = {1};

var b= JSON.parse(JSON.stringify(a));

这时候你再修改b的值，就和a无关了。
JSON.stringify(a)是将a转为json对象（json字符串）。然后JSON.parse（）是将这个json对象转为object对象，在这个过程中会复制所有的值。并且是一个全新对象

js中深克隆与浅克隆相关推荐

浅析Java中的深克隆和浅克隆
说实话,目前为止还没在项目中遇到过关于Java深克隆和浅克隆的场景.今天手抖戳开了花呗账单,双十二败家的战绩真是惨不忍睹,若能在我的客户端"篡改"下账单金额,那该(简)有(止)多( ...
JS 中的 assign 方法究竟是 “深克隆” 还是 “浅克隆”？
先说一下答案:assign做的是浅克隆. "第一层是深克隆,下面的每一层做的是浅克隆" 这种说法其实是错误的. 在我们去探究assign是深克隆还是浅克隆之前,我们必须先明白 ...
JS：对象的浅克隆、深克隆
JS中对象的深浅克隆一.对象的浅克隆 1.浅克隆:只克隆对象的"表层",如果对象的某些属性值又是引用类型值,则不进一步克隆它们,只是传递它们的引用 2.使用for-in-循环即可 ...
我不知道的事——深克隆和浅克隆
推荐一部好电影<致命魔术>.(此处为植入广告) 推荐理由:涉及人性.画面不错,剧情跌宕,亦魔亦幻(此处的"魔"为魔术的"魔").虽然女 ...
Java深克隆和浅克隆的原理及实现
Java中没有C++中所谓的拷贝构造函数,但是相应地提供了Cloneable接口.在Java中所有类都实现了clone()方法,因为Java中的所有类的父类Object具有clone()方法,而所有J ...
深克隆与浅克隆的区别
深克隆与浅克隆之间的区别深克隆:用递归复制了对象的所有层级浅克隆:浅复制只复制一层对象的属性浅克隆浅克隆是指在克隆对象时,对于基本数据类型的变量会重新复制一份,而对于引用类型的变量只是对引用进 ...
Javascript深克隆和浅克隆
深克隆和浅克隆浅克隆:只需要拷贝对象中的原始类型值,引用类型拷贝的仍然是地址深克隆:无论是原始类型还是引用类型都会进行拷贝,包括引用类型中还有其他引用类型的质. <script>let ...
深克隆和浅克隆的区别
克隆 1.简介在Java中对象的克隆有深克隆和浅克隆之分.有这种区分的原因是Java中分为基本数据类型和引用数据类型,对于不同的数据类型在内存中的存储的区域是不同的.基本数据类型存储在栈中,引用数据 ...
java clone() 方法详解及深克隆与浅克隆
概述 clone 翻译过来就是克隆,顾名思义就是创造一个一模一样的事物.Java 代码中 clone() 方法是 Object 方法,而 Object 又是所有类的父类,也就是说所有 java 对象 ...
深克隆和浅克隆有什么区别？它的实现方式有哪些？
浅克隆(Shadow Clone) 是把原型对象中成员变量为值类型的属性都复制给克隆对象,把原型对象中成员变量为引用类型的引用地址也复制给克隆对象,也就是原型对象中如果有成员变量为引用对象,则此引用对 ...

js中深克隆与浅克隆

js中深克隆与浅克隆相关推荐

最新文章

热门文章