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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
range 标准化之获取
Aug 28 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
实例浅析js的this
Dec 11 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
使用typescript快速开发一个cli的实现示例
Dec 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使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python3.6数独问题的解决
2019/01/21 Python
基于python实现百度翻译功能
2019/05/09 Python
python excel转换csv代码实例
2019/08/26 Python
Python 实现数组相减示例
2019/12/27 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
Python基于当前时间批量创建文件
2020/05/07 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
会计系中文个人求职信
2013/12/24 职场文书
主管竞聘书范文
2014/03/31 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
高中学生自我评价范文
2014/09/23 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android