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 全局AJAX事件使用代码
Nov 05 Javascript
Express的路由详解
Dec 10 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
javascript编写简易计算器
May 06 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
简单了解常用的JavaScript 库
Jul 16 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实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
常用的js方法合集
2017/03/10 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python回调函数用法实例分析
2015/05/09 Python
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
独特的python循环语句
2016/11/20 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Python中安装easy_install的方法
2018/11/18 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
高三高考决心书
2014/03/11 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
自我推荐信怎么写
2015/03/24 职场文书
建国大业观后感600字
2015/06/01 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL