javascript数组的深度复制例子

一般情况下,使用 “=” 可以实现赋值。但对于数组、对象、函数等这些引用类型的数据,这个符号就不好使了。

1. 数组的简单复制

1.1 简单遍历

最简单也最基础的方式,自然是循环处理。示例:

function array_copy(arr) {
    var out = [], i, len;
    if (out[i] instanceof Array === false){
     return arr;
    }
    for (i = 0, len = arr.length; i < len; i++) {
        if (out[i] instanceof Array){
            out[i] = deepcopy(arr[i]);
        } else {
         out[i] = arr[i];
        }
    };
    return a;
}
//测试
var arr1 = [1, 2, 3, 4],
 arr2 = array_copy(arr1);
console.log(arr1, arr2);
arr2[2] = 10;
console.log(arr1[2], arr2[2]);

1.2 变通的复制实现

经常出现在面试题中的取巧方法,是使用 slice 或 contcat 方法实现。示例:

var arr1 = [1, 2, 3, 4],
 arr2 = arr1.slice(0),
 arr3 = arr1.concat();
console.log(arr1, arr2, arr3);
arr2[2] = 10;
arr3[2] = 11;
console.log(arr1[2], arr2[2], arr3[2]);

2. 数组的深度复制

普通的一维数组且值为非引用类型,使用上述方法是没有问题的,否则就比较麻烦了。深度复制需要考虑数组值为各种引用类型的情况。

2.1 使用 JSON 方法

JSON.stringify(array) 然后再 JSON.parse()。示例:

var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],
 arr2 = JSON.parse(JSON.stringify(arr1));
console.log(arr1, arr2);
arr2[1] = 10;
arr2[3].a = 20;
console.log(arr1[1], arr2[1]);
console.log(arr1[3], arr2[3]);

此方法存在对古老浏览器的兼容性问题。如确需要作兼容,可引入如下兼容文件解决:

注意:如果数组值为函数,上述方法还是不行的。

2.2 深度复制的完全实现

考虑到多维数组的嵌套,以及数组值为对象的情况,可以作如下原型扩展(当然写为普通函数实现也是可以的):

Object.prototype.clone = function () {
    var o = {};
    for (var i in this) {
        o[i] = this[i];
    }
    return o;
};
Array.prototype.clone = function () {
    var arr = [];
    for (var i = 0; i < this.length; i++)
    if (typeof this[i] !== 'object') {
        arr.push(this[i]);
    } else {
        arr.push(this[i].clone());
    }
    return arr;
};
//测试1 Object
var obj1 = {
    name: 'Rattz',
    age: 20,
    hello: function () {
        return "I'm " + name;
    }
};
var obj2 = obj1.clone();
obj2.age++;
console.log(obj1.age);
//测试2 Array
var fun = function(log) {console.log},
 arr1 = [1, 2, [3, 4], {a: 5, b: 6}, fun],
 arr2 = arr1.clone();
console.log(arr1, arr2);
arr2[2][1]= 'Mike';
arr2[3].a = 50;
arr2[4] = 10;
console.log(arr1, arr2);

2.3 使用 jQuery 的 extend 方法

如果你在使用 jQuery,那么最简单的方法是使用 extend 插件方法。示例:

var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],
 arr2 = $.extend(true, [], arr1);
console.log(arr1, arr2);
arr2[1] = 10;
console.log(arr1, arr2);

 

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索数组
, 数据
, 对象
, 函数
, 基础
类型
javascript 数组复制、js数组深度复制、数组深度复制、js对象数组 深度复制、javascript例子,以便于您获取更多的相关知识。

时间: 2024-08-01 14:06:19

javascript数组的深度复制例子的相关文章

JavaScript 数组的深度复制解析_javascript技巧

对于javascript而言,数组是引用类型,如果要想复制一个数组就要动脑袋想想了,因为包括concat.slice在内的函数,都是浅层复制.也就是说,对于一个二维数组来说,用concat来做复制,第二维的数组还是引用,修改了新数组同样会使旧数组发生改变.     于是乎,想要写一个深度复制的函数,来帮助做组数的深度复制. 一般情况下,使用 "=" 可以实现赋值.但对于数组.对象.函数等这些引用类型的数据,这个符号就不好使了. 1. 数组的简单复制 1.1 简单遍历 最简单也最基础的方

Javascript数组去重项的例子

在写Javascript的时候经常遇到数组去重的问题,一直在基于jQuery写代码,在遇到数组需要去重的时候经常使用$.unique方法,由于开发测试环境是chrome浏览器,所以并没有察觉到自己已经错了这么久,直到昨天才发现$.unique在IE中是存在一些问题.   查看了jQuery的API,原来$.unique只处理删除DOM元素数组,而不能处理字符串或者数字数组.看了下jQuery源码,$.unique使用了Sizzle.uniqueSort的方法,好像在chrome/Firefox中

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

在代码复用模式里面有一种叫做"复制属性模式"(copying properties pattern).谈到代码复用的时候,很有可能想到的是代码的继承性(inheritance),但重要的是要记住其最终目标--我们要复用代码.继承性只是实现代码复用的一种手段,而不是唯一的方法.复制属性也是一种复用模式,它跟继承性是有所不同的.这种模式中,对象将从另外一个在对象中获取成员,其方法是仅需将其复制即可.用过jQuery的都知道,它有一个$.extend()方法,它的用途除了扩展第三方插件之外,

深度解析javascript中的浅复制和深复制

     在谈javascript的浅复制和深复制之前,我们有必要在来讨论下js的数据类型.我们都知道有 Number,Boolean,String,Null,Undefined,Object五种类型.而Object又包含Function,Array 和Object自身.前面的五种类型叫做基本类型,而Object是引用类型.可能有人就要问,为什么要分基本类型和引用类型呢?后面你就会明白的.      我们首先来看看浅复制和深复制的简洁定义: 深复制:直接将数据复制给对应的变量 浅复制:将数据的地

javascript数组操作

 这篇文章主要介绍了javascript数组操作,包括创建.元素的访问.元素删除.数组的拷贝等操作,还有其它示例,需要的朋友可以参考下 1.数组的创建    代码如下: var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);

javascript数组操作总结和属性、方法介绍

 这篇文章主要介绍了javascript数组操作总结,例如数组的创建.添加.删除.合并等操作方法,同时总结了属性和操作函数.方法等,需要的朋友可以参考下 一.数组的操作   1.数组的创建   代码如下: var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...

JavaScript数组所有API全解密

全文共13k+字,系统讲解了JavaScript数组的各种特性和API. 数组是一种非常重要的数据类型,它语法简单.灵活.高效. 在多数编程语言中,数组都充当着至关重要的角色,以至于很难想象没有数组的编程语言会是什么模样.特别是JavaScript,它天生的灵活性,又进一步发挥了数组的特长,丰富了数组的使用场景.可以豪不夸张地说,不深入地了解数组,不足以写JavaScript. 截止ES7规范,数组共包含33个标准的API方法和一个非标准的API方法,使用场景和使用方案纷繁复杂,其中有不少浅坑.

JavaScript数组常用操作技巧汇总_javascript技巧

本文实例汇总了JavaScript数组的常用操作技巧.分享给大家供大家参考.具体如下: 前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法.这里无非是对原生js的数组操作多了一些包装. 这里主要汇总一下JavaScript数组操作的常用API.相信对大家解决程序问题很有帮助. 一.性质JavaScript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数.然而,这些数字索引

Javascript数组Array方法解读_基础知识

接上一篇<Javascript数组Array基础介绍>,这一篇详细介绍Array的所有方法. 所有数组的方法都定义在Array.prototype上,而Array.prototype本身也是一个数组. array.concat() 浅复制一份当前数组,并把接收到的参数附加到新数组的末尾.原数组不改变. 语法 array.concat(value1, value2, ..., valueN) 参数为需要合并的数组或非数组值 var arr1 = [1, 2, 3]; var obj = {ani