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中的call实现继承
Jan 22 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
js实现的map方法示例代码
Jan 13 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
js实现每日签到功能
Nov 29 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
vue 实现特定条件下绑定事件
Nov 09 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 stream_context_create()作用和用法分析
2011/03/29 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
Python多层装饰器用法实例分析
2018/02/09 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Python笔记之工厂模式
2019/11/20 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
Python编写单元测试代码实例
2020/09/10 Python
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
介绍一下linux的文件系统
2015/10/06 面试题
业务总经理岗位职责
2014/02/03 职场文书
军神教学反思
2014/02/04 职场文书
运输服务质量承诺书
2014/03/27 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
见习报告格式范文
2014/11/08 职场文书
财务工作失职检讨书
2014/11/21 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis