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 相关文章推荐
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
学习ExtJS border布局
2009/10/08 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
JavaScript解析JSON数据示例
2019/07/16 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
闭幕式主持词
2014/04/02 职场文书
医学求职信
2014/05/28 职场文书
数学系毕业生求职信
2014/05/29 职场文书
学生干部培训方案
2014/06/12 职场文书
有关环保的标语
2014/06/13 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
移交协议书
2014/08/19 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
学习十八大标语
2014/10/09 职场文书
关于车尾的标语大全
2015/08/11 职场文书