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 复制或插入Html的实现方法小结
May 19 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
springboot+VUE实现登录注册
May 27 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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
php下使用SMTP发邮件的代码
2008/01/10 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
Python写的服务监控程序实例
2015/01/31 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
numpy数组拼接简单示例
2017/12/15 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python之循环结构
2019/01/15 Python
Python Pandas 箱线图的实现
2019/07/23 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
django跳转页面传参的实现
2020/09/17 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
销售部主管岗位职责
2013/12/18 职场文书
领导干部对照检查材料
2014/08/24 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
初三数学教学反思
2016/02/17 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python