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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
原生JS实现九宫格抽奖
Sep 13 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
星际实力自我测试
2020/03/04 星际争霸
php开发工具之vs2005图解
2008/01/12 PHP
PHP 图片上传代码
2011/09/13 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
Python fileinput模块使用介绍
2014/11/30 Python
使用Python对MySQL数据操作
2017/04/06 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
django orm模块中的 is_delete用法
2020/05/20 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
中层干部岗位职责
2013/12/18 职场文书
委托书范本
2014/04/02 职场文书
公司合作协议书范本
2014/04/18 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
中学生思想品德评语
2014/12/31 职场文书
Python OpenCV实现图形检测示例详解
2022/04/08 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技