1.浅克隆（浅拷贝）

无法进行引用类型（地址和地址中数据的）双重拷贝，从而导致克隆者和被克隆者指向同一地址后，任何一方发生数据的改变都会影响对方的数据。

克隆者与被克隆者之间相互影响。

var arr = [{a: 1,b: [1, 2, 3]}, 2, 3, 4];function clone(param) {if (Array.isArray(param)) {//  判断是不是数组var newArr = [];for (var i = 0; i < param.length; i++) {newArr.push(param[i]);};return newArr;} else if (Object.prototype.toString.call(param) === '[object Object]') {//  判断是不是对象var newObj = {};for (var k in param) {newObj[k] = param[k];};return newObj;} else {//  函数 与 基本数据类型 可以直接返回//  函数就是为了被调用：不需要所谓的克隆，需要函数内部的数据时执行调用就好。//  基本数据类型可实现数据的完全拷贝return param;};};var clonedRes = clone(arr);console.log(clonedRes);

输出结果如下图：

看起来，clonedRes和arr的确一模一样。

接下来，看看改变clonedRes中的数据时会发生什么吧？

clonedRes[0].a = 8;

console.log(arr);

结果如下：

可见：改变clonedRes中的数据，也会引发arr中数据的改变。

这就是浅拷贝的不足之处了，所以才有了深拷贝的存在。

2.深克隆（深拷贝）

克隆地址和数据，直到克隆到引用类型的最深层（存储的都是基本数据类型）时，形成绝对的结构拷贝，使拷贝者拥有完全一样的独立结构和独立数据，从而实现深克隆。

克隆者与被克隆者之间互不影响。

var arr = [{ a: 1, b: [1, 2, 3], }, 2, 3, 4];function clone(param) {// 通过条件限制来进行不同类型数据的克隆if (Array.isArray(param)) {//  判断是不是数组var newArr = [];for (var i = 0; i < param.length; i++) {//  利用递归 对数组类型进行浅拷贝后，再调用clone进行一次浅拷贝，从而实现深拷贝newArr.push(clone(param[i]));};return newArr;} else if (Object.prototype.toString.call(param) === '[object Object]') {//  判断是不是对象var newObj = {};//  遍历对象 for infor (var k in param) {//  利用递归 对对象类型进行浅拷贝后，再调用clone进行一次浅拷贝，从而实现深拷贝newObj[k] = clone(param[k]);};return newObj;} else {//  函数 与 基本数据类型 可以直接返回//  函数就是为了被调用：不需要所谓的克隆，需要函数内部的数据时执行调用就好。//  基本数据类型可实现数据的完全拷贝return param;};};var clonedRes = clone(arr);

结果如图：

仍测试改变clonedRes中的数据时，arr是否改变？

clonedRes[0].a = 8;

console.log(arr);

已经完成深拷贝了，当然不会改变了。

其实，完成深拷贝后，克隆者和被克隆者就像是一对双胞胎，看起来一模一样，但实际上就是两个独立的个体。

当独立的个体各自做自己独立的事情时，当然不会影响对方啦~

总结

学习深浅克隆，更深的感受到了不同数据类型之间的细微差别。

所以，按实际情况实现相应功能总是不会错的。

js之深浅克隆（深浅拷贝）相关推荐

JS 中对象的深浅拷贝（ES3、ES5、ES6不同方法底层实现，一文搞清楚深浅拷贝面试常问题）
JS 中对象的深浅拷贝拷贝我们都知道这个词的意思,我们经常做过复制.粘贴的操作,其中的复制就是拷贝,那么在拷贝的时候,如果我们复制出来的内容和原内容是完全的分开,各自不相影响,那么这就属于深拷贝 ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
Java深浅克隆原理及实现
1.深浅克隆定义 Java 中的数据类型分为基本数据类型和引用数据类型.对于这两种数据类型,在进行赋值操作.用作方法参数或返回值时,会有值传递和引用(地址)传递的差别. (补充)基本数据类型包括byt ...
js中的深浅复制（深浅拷贝、深浅克隆）
什么是浅复制? --把一个变量赋值给另一个变量,基本数据类型如数字,字符串,布尔值等这些是拷贝值,引用数据类型如对象,数组,函数等,这些拷贝的是地址. 深复制: 将一个对象从内存中完整的拷贝一份出来 ...
前端面试JS必备基础之深浅拷贝和this指向问题@莫成尘
一:js深拷贝在JS中,数据类型分为基本数据类型和引用数据类型两种,对于基本数据类型来说,它的值直接存储在栈内存中,而对于引用类型来说,它在栈内存中仅仅存储了一个引用,而真正的数据存储在堆内存中.深 ...
js动态创建对象_JS深浅拷贝的深入浅出
一首先了解JavaScript中的基本数据类型基本数据类型:String,Number,Boolean,Null,Undefined 引用数据类型:Araay,Date,RegExp,Functi ...
java中的深浅克隆
假设有一个对象object,在某处又需要一个跟object一样的实例object2,强调的是object和object2是两个独立的实例,只是在开始的时候,他们是具有相同状态的(属性字段的值都相同). ...
深浅克隆面试题汇总——附详细答案
在开始学习深克隆和浅克隆之前,我们先来看下面代码,有什么问题? class CloneTest {public static void main(String[] args) throws Clone ...
JavaScript中的经典题型（类数组、CSS Sprites、事件委托、经典去重、原型链、闭包、深浅克隆、附带思路流程和源码）
JavaScript中的经典题型一.JavaScript中的经典题型 1..如何判断一个数组和类数组? 首先要明白什么是类数组. 类数组:类数组是一个普通对象,他的原型是Object.而真实的数组是 ...

js之深浅克隆（深浅拷贝）

1.浅克隆（浅拷贝）

2.深克隆（深拷贝）

总结

js之深浅克隆（深浅拷贝）相关推荐

最新文章

热门文章