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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 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
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
Python 对输入的数字进行排序的方法
2018/06/23 Python
python 图片去噪的方法示例
2019/07/09 Python
Python argparse模块使用方法解析
2020/02/20 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
国贸专业自荐信范文
2014/03/02 职场文书
英语教师岗位职责
2014/03/16 职场文书
保研导师推荐信
2015/03/25 职场文书
2016年国培研修日志
2015/11/13 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js