JS中实现数组和对象的深拷贝和浅拷贝

数组的拷贝

  > 数组的深拷贝,两层
var arr = [[1,2,3],[4,5,6],[7,8,9]];

var arr2 = [];
循环第一层数组
for(var i=0,len=arr.length;i<len;i++){  循环第二层数组
    for(var k=0,lens=arr[i].length;k<lens;k++){    把每一个数组的内容添加到数组2中
        arr2.push(arr[i][k]);
    }
}

console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(arr===arr2); //false
  > 数组的浅拷贝,一层
var arr = [1,2,3,4,5,6,7,8];
var arr2 = [];
for(var i=0,len=arr.length;i<len;i++){
    arr2.push(arr[i]);
}

console.log(arr2);
console.log(arr===arr2);
  > 数组的深拷贝,三层
    var arr = [[1,2,3,[4,5]],[[6,7,8,9]],10,11];
    var arr2 = [];
    // 第一层循环
    for(var i=0,len=arr.length;i<len;i++){

     // 如果第一层不是数组则直接拷贝到数组2中
     if(typeof arr[i]!=="object"){
       arr2.push(arr[i]);
     }

// 第二层
        for(var k=0,len1=arr[i].length;k<len1;k++){
            // 判断第二层是否是数组,这里简单的判断力一下是不是对象,没有做处理。
            if(typeof arr[i][k]==="object"){
                // 如果是数组,继续循环此数组。
                for(var j=0,len2=arr[i][k].length;j<len2;j++){
                    arr2.push(arr[i][k][j]);
                }
            }else{
                // 不是数组就按照正常情况执行。
                arr2.push(arr[i][k]);
            }

        }
    }

    console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 9,10,11]
    console.log(arr===arr2); //false    
  > 数组的深拷贝,无限层,正则版 1.0
    var arr = [[1,2,3,[4,5]],[[6,7,8,9]],10,11,12,13,[14,[15,16,17,[18,[19,[20]]]]]];
    var arr2 = [];
    // 先把数组转换成字符串,然后将字符串里面的[]删除
    var str = arr.toString().replace(/\[|\]/,"");
    console.log(str); //1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20

    // 将字符串转换成数组。
    arr2 = str.split(",");
    console.log(arr2); //["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"]
    console.log(arr===arr2); //false

  // 这样做的话简单了不少,而且扩展性比较强,但是现在出现了个bug,就是我们原本数组里面的是数字,现在变成了字符串,下面我们来解决一下这个问题。

  > 数组的深拷贝,无限层,正则版 2.0
    var arr = [[1,2,3,[4,5]],[[6,7,8,9]],10,11,12,13,[14,[15,16,17,[18,[19,[20]]]]],"a"];
    var arr2 = [];
    // 先把数组转换成字符串,然后将字符串里面的[]删除
    var str = arr.toString().replace(/\[|\]/,"");
    console.log(str); //1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20

    // 将字符串转换成数组。
    arr2 = str.split(",");
    for(var i=0,len=arr2.length;i<len;i++){
            // 判断是否可以转换成数字,如果可以则转换,否则不转换。
            arr2[i] = parseFloat(arr2[i])||arr2[i];

    }
    console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, "a"]
    console.log(arr===arr2); //false

  虽然这里解决了上面的问题,但实际上还是有些问题的,就是如果arr1里面的数字原本就是字符串那么这个就有问题了,因为这个我们设置的是只要它可以转换成数字都将被转换。如果要解决这个问题的话,我们在将数组转换成字符串之前就要进行判断里面的内容是数字还是字符串,但是如果这样的话,我们用正则的方式将会变的非常麻烦,因为技术有限,只能解决到这里,如果你有好的方法,还请告知一下。

对象的克隆和数组的克隆差不多,这里就不再说了,另外以前还写了一篇关于克隆方面的文章,有兴趣的话可以参考一下。

JS基础回顾,小练习(克隆对象,数组)

时间: 2024-10-09 20:09:33

JS中实现数组和对象的深拷贝和浅拷贝的相关文章

js中遍历数组、对象的方式

1.标准的for循环遍历数组 var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,array[i]); } 2.for in 遍历对象 for in 以任意顺序遍历一个对象的可枚举属性. 因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for 循环 (或者使用 Array.prototype.forEach() 或 for...of 循环) . 一般常用来遍历非数组的对

JS中的数组与对象

一.数组: 1.数组的基本慨念:       数组是在内存空间中连续存储的一组有序数据的集合      元素在数组中的顺序,成为下标.可以使用下标访问数组的每个元素 2.如何声明一个数组     ① 使用字面量声明:       在JS中,同一数组,可以存储各种数据类型        例如:var reg = [1,"换个影子",true,{},null,func];  //调用数组中的函数:reg[5]();     ②  使用new关键字声明: var reg = new Arra

javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法

javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法 前言 在js中,数组和对象的复制假设使用=号来进行复制.那仅仅是浅拷贝. 例如以下图演示: 如上.arr的改动,会影响arr2的值,这显然在绝大多数情况下,并非我们所须要的结果. 因此,数组以及对象的深拷贝就是javascript的一个基本功了. 数组的深拷贝 条条大道通罗马,实现数组的深拷贝.是有好几种方法的.举比例如以下: for 循环实现数组的深拷贝 for循环是很好用的.假设不知道高级方法.通过for循环可以完毕我们

js中的数组对象排序

一.普通数组排序 js中用方法sort()为数组排序.sort()方法有一个可选参数,是用来确定元素顺序的函数.如果这个参数被省略,那么数组中的元素将按照ASCII字符顺序进行排序.如: var arr = ["a", "b", "A", "B"]; arr.sort(); console.log(arr);//["A", "B", "a", "b"

JS中,JSON 和 对象互转,数组和字符串的转换?

JSON 与 J对象转化 要实现从对象转换为 JSON 字符串,使用 JSON.stringify() 方法: 如下: var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}' 要实现从 JSON 转换为对象,使用 JSON.parse() 方法: 如下: var obj = JSON.parse('{&q

JS中的内置对象简介与简单的属性方法

JS中的数组: 1.数组的概念: 数组是在内存中连续存储的多个有序元素的结构,元素的顺序称为下标,通过下标查找对应元素 2.数组的声明: ①通过字面量声明var arr1 = [,,,,] JS中同一数组可以储存多种不同的数据类型(但,同一数组一般只用于存放同种数据类型) 例如var arr1 = [1,"2",true,{"name":"啦啦啦"},[1,2]]; ②通过new关键字声明:var arr2 = new Array(参数); &g

JS中的内置对象

JS中的数组 1.数组的基本概念? 数组是在内存空间中连续存储的一组有序数据的集合. 元素在数组中的顺序,称为下标.可以使用下标访问数组的每个元素. 2.如何声明一个数组? ① 使用字面量声明:var arr = []; // 声明了一个空数组 [注]在JS中,同一数组,可以存储各种数据类型 ② 使用new关键字声明:var arr = new Array(参数); 参数:a. 省略 表示创建一个空数组: b. 整数 表示声明一个length为指定长度的数组. 但是这个length可以随时可变可

JavaScript学习-js中的数组/Boolean类/字符串String类

JavaScript学习 [js中的数组] 1.数组的概念:是在内存中连续储存对个有序元素的结构 元素的顺序称为下标,通过下标查找对象元素. 2.数组的声明: ① 字面量声明:var arr1 = []; js中,同一数组,可以储存多种不同的数据类型: 例如: var arr1 = [1,"2",true,{"name":"hahhah"},[1,2]] ② new关键字声明: var arr2 = new Arry(参数) >>&g

js中对数组的操作-------Day49

今天碰到了一个问题:easyui的使用中,datagrid表格的高度如何改变(设定成一个固定的高度),看了半天文档,也从网上查了些,还楞是没弄出来,有点小郁闷,这easyui在某些情况情况下确实好用了,可要随意调整实在是有些麻烦啊. 做不出就先放放,回家了就换个心情. 昨天在回放拖拽轨迹的实现中,对数组的应用成了关键的一步,于是特意查看了一些javascript对数组的操作,这里来记录下: "增删改查"这四个字相信都不陌生,我们绝大多数的工作都是在进行这些操作,而这些操作却有一个大前提