最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

JS对象浅克隆和深克隆的代码示例

来源:动视网 责编:小采 时间:2020-11-27 19:27:56
文档

JS对象浅克隆和深克隆的代码示例

JS对象浅克隆和深克隆的代码示例:本篇文章给大家带来的内容是关于JS对象浅克隆和深克隆的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。浅克隆先看代码:/** * 浅克隆 克隆传入对象,只克隆一层 * @param {any} source */ function shallowClo
推荐度:
导读JS对象浅克隆和深克隆的代码示例:本篇文章给大家带来的内容是关于JS对象浅克隆和深克隆的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。浅克隆先看代码:/** * 浅克隆 克隆传入对象,只克隆一层 * @param {any} source */ function shallowClo
 本篇文章给大家带来的内容是关于JS对象浅克隆和深克隆的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

浅克隆

先看代码:

/**
 * 浅克隆 克隆传入对象,只克隆一层
 * @param {any} source
 */
function shallowClone(source) {
 var tiaget = createEctype(source); //创建一个副本
 // 将原对象的所有属性值赋值到新对象上
 for (var property in source) {
 if (source.hasOwnProperty(property)) {
 tiaget[property] = source[property];
 }
 }
 /**
 * 创建副本
 * @param {any} source
 */
 function createEctype(source) {
 var newObject = {};
 if (Array.isArray(source))
 newObject = [];
 return newObject;
 }

 return tiaget;
}

执行测试:

var a={a1:1,a2:2,a3:[1,2,3]};
 var b={b1:1,b2:2,b3:[4,5,6]}
 a.b=b;
 b.a=a;
 a.a4=[a,b];
 b.b4=[a,b];
 a.fn=function(){console.log(this.b);};
 
 var newa=shallowClone(a);

测试代码定义了一个自我引用的对象

a===a.a4[0]; // true
a===a.b.a; // true

执行 shallowClone 方法获得了一个对象a的副本 newa

a === newa; // false
newa === newa.a4[0]; // false
newa === newa.b.a; // false
a === newa.a4[0]; // true
a === newa.b.a; // true

测试执行速度:

/**
获取传入方法在规定时间内执行次数

示例:
var test = function(){

};
runTime(test,1)
表示test方法 在1秒中执行了6819005次
**/

/**
 * 获取传入方法在规定时间内执行次数
 * @param {any} fn 执行的方法
 * @param {any} time 规定的时间,单位为秒
 */
function runTime(fn, time) {
 var startTime = Date.now();
 var count = 0;
 while (Date.now() - startTime < time * 1000) {
 fn.call();
 count++;
 }
 return count;
}

深度克隆

代码:

/**
 * 深克隆
 * 
 * 示例:
 * var a={a1:1,a2:2,a3:[1,2,3]};
 * var b={b1:1,b2:2,b3:[4,5,6]}
 * a.b=b;
 * b.a=a;
 * a.a4=[a,b];
 * b.b4=[a,b];
 * a.fn=function(){console.log(this.b);return this.b;};
 * 
 * var newa=deepClone(a);
 * newa.a1=123;
 * newa.fn();
 */
function deepClone(source) {
 this.objKeyCache = []; // 对象缓存
 this.objValueCache = []; // 对象克隆缓存

 this.clone = function (source) {
 var target = createEctype.call(this, source);
 for (var property in source) {
 if (source.hasOwnProperty(property)) {
 var value = source[property];
 if (typeof value === "number"
 || typeof value === "boolean"
 || typeof value === "symbol"
 || typeof value === "string"
 || typeof value === "function"
 || typeof value === "undefined"
 || value === null)
 target[property] = value;
 else if (typeof value === "object") {
 // 如果源对象在对象缓存中存在,就用对象克隆缓存中的值赋值
 var index = this.objKeyCache.indexOf(value);
 if (index >= 0)
 target[property] = this.objValueCache[index]; 
 else {
 target[property] = this.clone( value);
 }
 }
 else
 throw "未知数据类型" + (typeof value);
 }
 }

 return target;
 };
 /**
 * 创建副本
 * @param {any} source
 */
 function createEctype(source) {
 var target = {};
 if (Array.isArray(source))
 target = [];
 this.objKeyCache.push(source);
 this.objValueCache.push(target);
 return target;
 }
 var newObject = this.clone(source);
 // 释放缓存,防止内存溢出
 this.objKeyCache = [];
 this.objValueCache = [];
 return newObject;
}

执行测试:

var a={a1:1,a2:2,a3:[1,2,3]};
var b={b1:1,b2:2,b3:[4,5,6]}
a.b=b;
b.a=a;
a.a4=[a,b];
b.b4=[a,b];
a.fn=function(){console.log(this.b);return this.b;};

var newa=deepClone(a);
a === newa; // false
newa === newa.a4[0] // true
newa === newa.b.a; // true
a === newa.a4[0]; // false
a === newa.b.a; // false

测试执行速度:

文档

JS对象浅克隆和深克隆的代码示例

JS对象浅克隆和深克隆的代码示例:本篇文章给大家带来的内容是关于JS对象浅克隆和深克隆的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。浅克隆先看代码:/** * 浅克隆 克隆传入对象,只克隆一层 * @param {any} source */ function shallowClo
推荐度:
标签: 复制 js 代码
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top