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 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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
德劲1107的电路分析与打磨
2021/03/02 无线电
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
廉洁教育学习材料
2014/05/19 职场文书
保密工作承诺书
2014/08/29 职场文书
与死神共舞观后感
2015/06/15 职场文书
2015年中秋寄语
2015/07/31 职场文书
诚信高考倡议书
2019/06/24 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
Python序列化模块JSON与Pickle
2022/06/05 Python