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基础回顾,小练习(克隆对象,数组)
JS中实现数组和对象的深拷贝和浅拷贝的更多相关文章
- JS中遍历数组、对象的方式
1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...
- js 中数组或者对象的深拷贝和浅拷贝
浅拷贝 : 就是两个js 对象指向同一块内存地址,所以当obj1 ,obj2指向obj3的时候,一旦其中一个改变,其他的便会改变! 深拷贝:就是重新复制一块内存,这样就不会互相影响. 有些时候我们定义 ...
- JS 数组以及对象的深拷贝总结
javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法 前言 在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝.如下图演示: 如上,arr的修改,会影响arr2的值,这 ...
- javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法
前言 for,slice(0),concact() 在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝.如下图演示: 如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不 ...
- JS 数组、对象的深拷贝
博客地址:https://ainyi.com/72 JavaScript 程序中,对于简单的数字.字符串可以通过 = 赋值拷贝 但是对于数组.对象.对象数组的拷贝,就有浅拷贝和深拷贝之分 浅拷贝就是当 ...
- JS中,JSON 和 对象互转,数组和字符串的转换?
JSON 与 J对象转化 要实现从对象转换为 JSON 字符串,使用 JSON.stringify() 方法: 如下: var json = JSON.stringify({a: 'Hello', b ...
- JS中的数组复制问题
JS中的数组复制问题 前言 首先提到复制,也就是拷贝问题,就必须要明确浅拷贝和深拷贝. 浅拷贝:B由A复制而来,改变B的内容,A也改变 深拷贝:B由A复制而来,改变B的内容,A的内容不会改变 总的来说 ...
- JS中Array数组的三大属性用法
原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...
- JS中的内置对象简介与简单的属性方法
JS中的数组: 1.数组的概念: 数组是在内存中连续存储的多个有序元素的结构,元素的顺序称为下标,通过下标查找对应元素 2.数组的声明: ①通过字面量声明var arr1 = [,,,,] JS中同一 ...
随机推荐
- Android APK 签名 (转发)
Cordova 3.5 为 Android APK 签名,生成可发布的 APK 程序文件 任侠 2014-06-07 00:04 移动开发 抢沙发 16,288 views 目录 [隐藏] ...
- CentOS7 服务器 JDK+TOMCAT+MYSQL+redis 安装日志
防火墙配置(参考 CentOS7安装iptables防火墙) 检查是否安装iptables #先检查是否安装了iptables service iptables status #安装iptables ...
- cmd输出的日志里有中文乱码的解决办法
在命令行使用adb logcat命令直接输出日志中文内容显示乱码,原因是中文系统中cmd命令行窗口默认的编码是GBK,而LogCat打印的日志是UTF-8编码,所以adb logcat命令输出的中文内 ...
- iOS 删除已经配置的类库和移除CocoaPods
引言 我们使用CocoaPods非常高效地将一些第三方类库导入到我们的项目中,但是不由得产生一个疑问:如果发现某个类库不适用,甚至是整个CocoaPods我们都不想再在项目中持有,那么我们要怎么把这些 ...
- addEventListener、attachEvent、cancelBubble兼容性随笔
一.前言 1. element.addEventListener(eventType, handler, capture); (1)参数eventType是要注册句柄的事件类型名. (2)参数hand ...
- Salesforce + AngularJS + Bootstrap
也可以分成三步: 1. 添加css和js引用: <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3. ...
- cefsharp开发实例1
做了几年.NET开发,基本都是搞WEB居多,以前也搞过一个winform项目,虽然很把界面拼接出来了,但是感觉有点痛苦,改动的时候又要改动一大堆代码.最近又要搞个桌面软件,试着搜索了下html做界面方 ...
- 更高效地提高redis client多线程操作的并发吞吐设计
Redis是一个非常高效的基于内存的NOSQL数据库,它提供非常高效的数据读写效能.在实际应用中往往是带宽和CLIENT库读写损耗过高导致无法更好地发挥出Redis更出色的能力.下面结合一些redis ...
- [.net 面向对象编程基础] (22) 事件
[.net 面向对象编程基础] (22) 事件 事件(Event)是学习.net面向对象编程很重要的一部分,在学习事件之前,我们实际上已经在很多地方使用了事件,比如控件的click事件等,这些都是. ...
- 解决Win7 软件图标不显示--Win7图标异常,快捷方式不显示解决方法
电脑症状:WIN7的系统,桌面上的图标显示的不正常,快捷方式显示的是未知程序.看不到程序默认图标,快捷方式图标不显示. 解决方法:删除程序图标缓存即可. 将下面的内容复制到记事本保存为“Repai ...