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 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
flexigrid 参数说明
Nov 23 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
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
Zerg兵种介绍
2020/03/14 星际争霸
php不写闭合标签的好处
2014/03/04 PHP
Yii快速入门经典教程
2015/12/28 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
Python实现去除代码前行号的方法
2015/03/10 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
优秀毕业生求职信
2014/06/05 职场文书
答谢词范文
2015/01/05 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL