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 相关文章推荐
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
vue.js的安装方法
May 12 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 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截取中文字符串函数实例
2015/02/23 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
python测试mysql写入性能完整实例
2018/01/18 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python根据文本生成词云图代码实例
2019/11/15 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
编辑找工作求职信范文
2013/12/16 职场文书
小班重阳节活动方案
2014/02/08 职场文书
小学教学随笔感言
2014/02/26 职场文书
汽车广告策划方案
2014/05/31 职场文书
委托公证书样本
2015/01/23 职场文书
会计工作能力自我评价
2015/03/05 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers