当前位置: 首页 > 编程笔记 >

javascript中clone对象详解

徐涵亮
2023-03-14
本文向大家介绍javascript中clone对象详解,包括了javascript中clone对象详解的使用技巧和注意事项,需要的朋友参考一下

  开发中,打断对象间的引用关系,只想下个副本的情况无处不在,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中克隆对象的信息。我确实在StackOverflow上发现了一个问题(由相同的@JohnResig回答),他指出,使用jQuery,您可以做到 clone对象。我尝试了一下,但这只复制了数组中对象的引用。所以如果我 nodeArray [0]和clonedNodesArray

  • 本文向大家介绍Javascript中arguments对象详解,包括了Javascript中arguments对象详解的使用技巧和注意事项,需要的朋友参考一下 在上篇文章中我们讨论了javascript中的默认参数,这篇文章,我们来讨论下javascript的arguments参数对象。 如下例的一个函数,我们如何根据传入参数的不同来做不同的处理呢? 幸运的是,javascript有一个argum

  • 本文向大家介绍JavaScript Array对象详解,包括了JavaScript Array对象详解的使用技巧和注意事项,需要的朋友参考一下 本文介绍了Js的Array 数组对象,具体内容如下 目录 1. 介绍:介绍 Array 数组对象的说明、定义方式以及属性。 2. 实例方法:介绍 Array 对象的实例方法:concat、every、filter、forEach、indexOf、join、

  • 本文向大家介绍详解JavaScript RegExp对象,包括了详解JavaScript RegExp对象的使用技巧和注意事项,需要的朋友参考一下 什么是 RegExp? 正则表达式描述了字符的模式对象。 当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。 简单的模式可以是一个单独的字符。 更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。 您可以规

  • 本文向大家介绍详解JavaScript中的函数、对象,包括了详解JavaScript中的函数、对象的使用技巧和注意事项,需要的朋友参考一下 JS中的函数声明方式 方式一 function 函数名(){ 函数体 } 方式二 var 函数名=function(){ 函数体 } 方式三 var 函数名=new Function(“函数体”); 执行方式 函数名(); JS中的对象 类似Java中的一些系

  • 本文向大家介绍详解JavaScript函数对象,包括了详解JavaScript函数对象的使用技巧和注意事项,需要的朋友参考一下 函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 注释:   形参不需要加上类型;   return语句为可选,没有return语句的函数返回undefined;  局部变量与全局变量   在函数内声明:局部变量   在函数外声明:全局变量   向一个新