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 回调函数中变量作用域的讨论
Sep 11 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
Dojo 学习要点
Sep 03 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
jquery实现数字输入框
Feb 22 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
Vue动态实现评分效果
May 24 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
详解javascript函数写法大全
Mar 25 Javascript
vue 实现用户登录方式的切换功能
Apr 14 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
php xml 入门学习资料
2011/01/01 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
PHP模块化安装教程
2016/06/01 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
PHP chr()函数讲解
2019/02/11 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
python中import学习备忘笔记
2017/01/24 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python 实现倒排索引的方法
2018/12/25 Python
详解重置Django migration的常见方式
2019/02/15 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
省级优秀班集体申报材料
2014/05/25 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
员工保密协议书
2014/09/27 职场文书
市级三好学生评语
2014/12/29 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python