`
这不是我
  • 浏览: 15844 次
社区版块
存档分类
最新评论

关于javascript中数组的深度复制

阅读更多
    对于javascript而言,数组是引用类型,如果要想复制一个数组就要动脑袋想想了,因为包括concat、slice在内的函数,都是浅层复制。也就是说,对于一个二维数组来说,用concat来做复制,第二维的数组还是引用,修改了新数组同样会使旧数组发生改变。

    于是乎,想要写一个深度复制的函数,来帮助做组数的深度复制。

    直觉上,感觉可以使用递归的方法来做,所以方向确定为递归法。其实写这个函数也很简单,没多久就写了一个,如下:
       function deepCloneArray( array ) {
            var newArray = [];
            w.loopArray( array, function ( item ) {
                if ( w.is.Array( item ) == true ) {
                    var arrayItem = deepCloneArray( item );
                    newArray.push( arrayItem );
                }
                else if ( w.is.Object( item ) == true ) {
                    var newObject = new Object();
                    newArray.push( newObject );
                    w.loopObj( item, function ( key, value ) {
                        if ( w.is.Array( value ) == true ) {
                            var arrayItem = deepCloneArray( value );
                            newObject[key] = ( arrayItem );
                        }
                        else {
                            newObject[key] = value;
                        }
                    } );
                }
                else {
                    newArray.push( item );
                }
            } );
            return newArray;
        }

    用递归的方法深度复制一个javascript数组,数组中可以包含任何类型的数据,包括数字、对象、字符串等等。比如搞个这样一个数组:
        var array = [
            [1, 2, 3],
            {
                a : [12, {v : [9090, 9090]}, 32],
                b : "123"
            },
            78
        ];
    对于上面的数组,我们的代码也可以实现深度的复制,OK,看起来好像一切都很顺利的样子,但是其实对于深度复制,我们还有其他的方法,而且只有一行代码。思路就是先把对象转换成JSON格式,然后再转回对象格式,例如以下代码:
        var newArray = JSON.parse( JSON.stringify( array ) );

     同样是深度复制,第二个方法只用了一行代码,而且经过测试我们发现,第二种方法所用时间比第一种要快50%以上,这样问题就来了,代码又少,速度又快,那么我们能不能让第一种方法的速度接近第二种呢?毕竟如果按照现在的样子来看,第一种是没有任何优势可言的。进行优化,具体情况请听下回分解。
  
分享到:
评论

相关推荐

    JavaScript 数组的深度复制解析

     于是乎,想要写一个深度复制的函数,来帮助做组数的深度复制。 一般情况下,使用 “=” 可以实现赋值。但对于数组、对象、函数等这些引用类型的数据,这个符号就不好使了。 1. 数组的简单复制 1.1 简单遍历 最简单...

    用javascript对一个json数组深度赋值示例

    此外,如果对象中存在循环引用,这种简单的深度复制方法可能会导致无限递归。 总结一下,这个示例展示了如何使用JavaScript进行JSON数组的深度赋值,通过递归遍历和复制对象的每一个属性,包括嵌套的子对象,从而...

    JavaScript数组复制详解

    这样就实现了多维数组的深度复制。 最后,文章提醒,由于文章中的内容是通过OCR扫描得到,可能会有一些识别错误。因此,在理解时需要注意上下文,确保逻辑的连贯性。在实践中,如果遇到不清晰的地方,应当查找官方...

    JavaScript数组和对象的复制

    JavaScript中的数组和对象复制是一个重要的话题,特别是在处理复杂的数据结构时。本文主要讲解了JavaScript中基本类型和引用类型之间的区别,以及如何进行数组和对象的浅复制与深复制。 首先,JavaScript中的数据...

    怎么使用javascript深度拷贝一个数组

    在进行深度拷贝时,需要复制数组中的每一个元素,确保原始数据结构中的任何一个层级的数据修改都不会影响到拷贝后的结构。深度拷贝的常见方法有: 1. 使用JSON方法:通过`JSON.parse(JSON.stringify(array))`将数组...

    deep-copy-all:深度复制JavaScript数组和对象,包括自定义对象

    一种快速,紧凑且强大的方法来深度复制所有JavaScript数据类型 深度复制所有JavaScript对象深度克隆器是: 快速–在普通基准速度测试中排名很高 紧凑–约5k(最小) 强大–正确处理所有标准JavaScript数据类型...

    js 对象、数组赋值不指定路径(简洁写法).pdf

    为了解决这个问题,JavaScript提供了一些简洁的写法来实现深度复制,确保赋值时不改变原有对象或数组。以下是对给定内容的详细解释: 1. 对象的浅拷贝(Shallow Copy): 使用扩展运算符(`...`)可以实现对象的浅...

    JavaScript浅层克隆与深度克隆示例详解

    JavaScript中的浅层克隆与深度克隆是两种不同的对象复制方式,它们主要处理对象和数组这类引用类型的数据。这两种克隆方法的区别在于处理对象内部引用值的方式,即对堆内存中对象的复制程度。 1. **浅层克隆**: ...

    JS实现递归遍历数组,前端必会

    例如,你可以通过递归实现一个深度克隆函数,用于复制一个数组或对象,同时保留其嵌套结构。 需要注意的是,虽然递归在很多情况下非常有用,但如果不正确地使用,可能会导致栈溢出(stack overflow)问题,因为每次...

    一个用于对象深度克隆的同构和可配置javascript函数

    标题提到的"一个用于对象深度克隆的同构和可配置javascript函数"是指一个能够在浏览器环境和Node.js环境中通用(同构)的JavaScript函数,它提供了一种灵活的方式来深度复制复杂的数据结构,同时允许用户根据需求...

    JavaScript深度复制(deep clone)的实现方法

    JavaScript中的深度复制,也称为深克隆,是一种创建新对象的方法,这个新对象与原对象具有相同的属性和值,包括嵌套的对象和数组。在JavaScript中,深复制不同于浅复制,浅复制只复制对象的顶层属性,而不复制其内部...

    JavaScript数据结构的不可变操作

    2. **_.cloneDeep()**(Lodash库):深度复制对象,创建一个与原始对象结构相同但值不同的新对象。 3. **immer.js**:一个库,允许使用“修改后返回”的语法进行不可变更新,使得代码更简洁。 ### 总结 理解并掌握...

    JS 数组和对象的深拷贝操作示例

    在JavaScript中,深拷贝是创建一个新对象,这个新对象复制了原始对象的所有属性,并且对于包含的对象引用,深拷贝会递归地复制这些引用的对象,而不是仅仅复制引用。这样,修改原始对象不会影响到深拷贝后的对象。在...

    javascript克隆对象深度介绍

    JavaScript中的对象克隆,主要是指复制一个对象,得到一个新的对象,这个新对象具有与原对象相同的属性和值。在进行对象克隆的过程中,根据复制的深度,可以分为浅度克隆和深度克隆。 浅度克隆(Shallow Clone)仅...

    nanoclone只有145B实现深度克隆JavaScript对象

    标题提到的"nanoclone"是一个极简的JavaScript库,其核心代码只有145字节,但能实现深度克隆功能。这在追求轻量级解决方案的场景下显得尤为宝贵。 在JavaScript中,有多种实现深拷贝的方法。例如,可以使用JSON的...

    关于js数组去重的问题小结

    本文将介绍几种常见的JavaScript数组去重的方法,并对它们的优势和局限进行分析。 第一种方法是基于JavaScript中对象属性名唯一性的原理进行去重。由于对象的属性名是唯一的,可以利用这一特性,通过创建一个临时...

    JavaScript中引用vs复制示例详析

    深度复制对象需要更复杂的处理,例如使用`JSON.parse(JSON.stringify(obj))`,或者使用专门的库如lodash的`_.cloneDeep()`方法。这种方法会递归地复制对象及其所有嵌套的对象和数组。 4. **深拷贝与浅拷贝**: 浅...

Global site tag (gtag.js) - Google Analytics