javascript中clone对象详解


Posted in Javascript onDecember 03, 2014

  开发中,打断对象间的引用关系,只想下个副本的情况无处不在,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 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
redux.js详解及基本使用
May 24 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
javascript使用正则表达式检测IP地址
Dec 03 #Javascript
Javascript快速排序算法详解
Dec 03 #Javascript
Javascript冒泡排序算法详解
Dec 03 #Javascript
Javascript堆排序算法详解
Dec 03 #Javascript
node.js下when.js 的异步编程实践
Dec 03 #Javascript
jquery操作 iframe的方法
Dec 03 #Javascript
使用js实现数据格式化
Dec 03 #Javascript
You might like
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
php数据类型判断函数有哪些
2013/09/23 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
python 重命名轴索引的方法
2018/11/10 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
几道PHP面试题
2013/04/14 面试题
工厂保洁员岗位职责
2013/12/04 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
进口业务员岗位职责
2014/04/06 职场文书
党员演讲稿
2014/09/04 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS