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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
xtree.js 代码
Mar 13 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 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 错误处理经验分享
2011/10/11 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
利用python画一颗心的方法示例
2017/01/31 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python 的topk算法实例
2020/04/02 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
导游的职业规划书范文
2013/12/27 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
成语的广告词
2014/03/19 职场文书
啤酒节策划方案
2014/05/28 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python