开发中,打断对象间的引用关系,只想下个副本的情况无处不在,clone一个对象就在所难免了。
JavaScript中,简单的方法就是用JSON函数,将对象stringify成字符串,再parse成一个新对象。要么就是从网上搜个代码,开源社区里面clone的代码还是有不少的。
代码虽然可以找得到,但,东西永远是别人的,动手学着码永远是个不变的主题。
自己写了两个克隆的函数:
cloneOwn:克隆自定义对象的自有属性,不包括继承的属性,属性可以是基本数据类型和数组,自定义的对象,可以制定要克隆的属性名称列表。
cloneArray: 克隆数组,数组内的元素可以是对象,基本类型。
//第一个参数是被克隆的对象,第二个参数是需要克隆的属性列表 function cloneOwn() { var obj = arguments[0]; if (typeof obj === 'undefined' || obj === null) return {}; if (typeof obj !== 'object') return obj; //第二个参数是属性名称列表,就采用该列表进行刷选 //否则就克隆所有属性 var attrs = arguments[1]; var enable_spec_attr = true; if (!(attrs instanceof Array)) { //console.log(attrs); attrs = obj; enable_spec_attr = false; } var result = {}; var i; for (i in attrs) { attr = enable_spec_attr? attrs[i]: i; //console.log(attr); if (obj.hasOwnProperty(attr)) { if (obj[attr] instanceof Array) { result[attr] = cloneArray(obj[attr]); } else if (typeof obj[attr] === 'object') { result[attr] = cloneOwn(obj[attr]); } else { result[attr] = obj[attr]; } } } return result; }
//克隆数组 function cloneArray(array) { if (typeof array === 'undefined' || array === null) return [];if (!(array instanceof Array)) return [];
result = [];
var i; for(i in array) { if (typeof array[i] !== 'object') { result[i] = array[i]; continue; }
//clone object result[i] = cloneOwn(array[i]); }
return result; }
调用
1.常规克隆自定义对象:
var a = { name:'frank', age:20 }; var b= cloneOwn(a);
2.指定克隆的属性
var a = { name:'frank', age:20, address:'any where' }; var b = cloneOwne(a, ['name', 'age']);
3.克隆内含有数组属性的自定义对象
var a = { name: 'kxh', age: 20, books: ['hai','ho','ali'], likes: [ {wname: 'kaili', wage: 81, fav: "aaaaa"}, {wname: 'seli', wage: 82, fav: "bbb"}, {wname: 'ailun', wage: 83, fav: "ccc"},] }; var b = cloneOwne(a);
4.克隆数组,内含有自定义对象
var a = [ { name:'frank', age:20 }, { name:'leon', age:30 } ]; var b = cloneArray(a);
上面的代码还是有很多问题的,比如,内置对象的克隆就存在点问题,例如datatime类型。
问题管问题,这样一个学习过程也是要有的。
问题内容: …每个对象还引用了同一数组中的其他对象吗? 当我第一次想到这个问题时 将存在并搜索有关如何在javascript中克隆对象的信息。我确实在StackOverflow上发现了一个问题(由相同的@JohnResig回答),他指出,使用jQuery,您可以做到 clone对象。我尝试了一下,但这只复制了数组中对象的引用。所以如果我 nodeArray [0]和clonedNodesArray
本文向大家介绍Javascript中arguments对象详解,包括了Javascript中arguments对象详解的使用技巧和注意事项,需要的朋友参考一下 在上篇文章中我们讨论了javascript中的默认参数,这篇文章,我们来讨论下javascript的arguments参数对象。 如下例的一个函数,我们如何根据传入参数的不同来做不同的处理呢? 幸运的是,javascript有一个argum
本文向大家介绍JavaScript Array对象详解,包括了JavaScript Array对象详解的使用技巧和注意事项,需要的朋友参考一下 本文介绍了Js的Array 数组对象,具体内容如下 目录 1. 介绍:介绍 Array 数组对象的说明、定义方式以及属性。 2. 实例方法:介绍 Array 对象的实例方法:concat、every、filter、forEach、indexOf、join、
本文向大家介绍详解JavaScript RegExp对象,包括了详解JavaScript RegExp对象的使用技巧和注意事项,需要的朋友参考一下 什么是 RegExp? 正则表达式描述了字符的模式对象。 当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。 简单的模式可以是一个单独的字符。 更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。 您可以规
本文向大家介绍详解JavaScript中的函数、对象,包括了详解JavaScript中的函数、对象的使用技巧和注意事项,需要的朋友参考一下 JS中的函数声明方式 方式一 function 函数名(){ 函数体 } 方式二 var 函数名=function(){ 函数体 } 方式三 var 函数名=new Function(“函数体”); 执行方式 函数名(); JS中的对象 类似Java中的一些系
本文向大家介绍详解JavaScript函数对象,包括了详解JavaScript函数对象的使用技巧和注意事项,需要的朋友参考一下 函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 注释: 形参不需要加上类型; return语句为可选,没有return语句的函数返回undefined; 局部变量与全局变量 在函数内声明:局部变量 在函数外声明:全局变量 向一个新