JavaScript的一个深拷贝的例子——递归函数的实现

今天学到了JS的关于深拷贝和浅拷贝的例子,有些体会。

在JavaScript中,变量的拷贝分为两种,一种是值拷贝,一种是内存地址拷贝,意思是当赋值给变量的只是一个简单的基本数值时,变量与变量之间的储存空间是相互独立,两个变量之间的改变不会相互影响,而当赋值给变量的是一个对象或数组的时候,变量与变量之间的存储空间将会指向同一个内存空间,当某一个变量改变时,内存空间的值也会改变。

//值拷贝
var i = 4;
var j = i;
//内存地址拷贝
var m = {name:‘xxx‘};
var n = m;

浅拷贝,只是简单的变量赋值,如果赋值的变量是引用类型的对象,变量之间会共享一个内存空间,每个变量的修改都会影响内存空间里的值;深拷贝,也就是实现将引用类型的数据值拷贝到另一个新创建的储存空间里。

//浅拷贝
var obj1 = {name = ‘xxx‘};
var obj2 = obj1;//指向同一个内存地址
//深拷贝
var obj1 = {name = ‘xxx‘};
var obj2 = {};//创建一个新空间
obj2.name = obj1.name;//存放name的数值

这是一个比较简单的对象的拷贝,再来看一个比较复杂的:

var people = {
         name:‘xxx‘,                                                  //基本数值
         friends:[‘people1‘,‘people2‘,‘peopple3‘],           //数组
         info:{                                                           //对象
               phone:‘133xxxxxxxx‘,
               age:‘18‘,
               sex:‘man‘
         }
}
        

如果这种复杂的对象只是简单的赋值给另一个变量的,那就是浅拷贝,这样我们会遇到一些问题:

var man1 = people;
var man2 = people;man1.name = ‘李四‘; //man2的名字也变成李四
man1.friends[0] = ‘张三‘;//man2的第一个朋友也变成了‘张三‘
man1.info.age = ‘20‘;//man2的年龄也变成了20

所以我们需要将每个数组和变量都进行复制。我们可以封装一个函数,用来深拷贝:

function(obj,copy){
         for(var i in obj){
               copy[i] = obj[i];//复制obj中的每一个项
         }
         return copy;
}

这样写还是有问题就是当obj中的某个属性任然是引用类型的变量时,依然会指向同一个内存空间。所以我们就可以用递归的方法,让是对象的属性再通过遍历来赋值。

function deepCopy(obj,copy){
           for(var i in obj){
                     if(typeOf obj[i] == ‘object‘){       //判断是否为对象
                               deepCopy(obj[i],copy[i]);//回调深拷贝函数
                     }
                     else{
                               copy[i] = obj[i];             //不是对象直接复制
                     }
           }
           return copy;
}                                                                                    

这样就能将所有的数据都拷贝到另一个储存空间里。

时间: 2024-11-05 09:30:46

JavaScript的一个深拷贝的例子——递归函数的实现的相关文章

Javascript 中的回调函数和递归函数简单实际分析学习

Javascript 中的回调函数和递归函数简单实际分析学习 1 回调函数 所谓回调函数简单理解就是将一个函数做为参数传递给其他的函数供其使用.(只是在js中,因为其它的语言中有指针这个概念). 举一个简单的例子,当我们在统计账单的时候就要整理材料这些,然后就需要计算器,计算器我们想象成为一个可以实现计算的函数.统计账单是另外的另一个函数,当统计账单的时候就会需要计算器这个函数的支持,其实这就是一个简单的回调.可以按这个理解. 下来我借用网上的一个例子: //先定义一个函数fun1 functi

关于javascript中的深拷贝问题

一直在尝试为javascript找一个快捷可靠的对象深拷贝的方法,昨天突发奇想,把对象push到一个空数组里,然后对改数组通过concat()或slice()进行 拷贝,然后取出数组的第一个元素复制给变量,这个变量岂不就是深拷贝的对象么.说干就干,上代码 var a = { b: { c: 1 } }; var arr = []; arr.push(a); var x = arr.slice(0); arr[0].b = 12; console.log(x[0].b); 若成功的话,控制台里是对

HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03

工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列举出来,估计做完上面这个颜色表,估计人都废了. 为了解决这个重复性的问题,我们必须引入另一种语言:JavaScript 为何学习 JavaScript? JavaScript 是 web 开发者必学的三种语言之一: HTML 定义网页的内容 CSS 规定网页的布局 JavaScript 对网页行为进

HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04

工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 目前,我们已经将一些行和列插入到表格中,并设置单元格的背景颜色,显示 RGB 值等. 例 7:最后,我们需要将表头插入到表格中.基于上一个例子,我们再加入一些 JavaScript 代码. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title

HTML &amp; CSS &amp; JavaScript 从一个表格到一个灰阶颜色表 01

工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简介 HTML <!DOCTYPE> 标签 HTML <html> 标签 HTML <head> 标签 HTML <meta> 标签 HTML <title> 标签 HTML <body> 标签 例 1:一个简单的 HTML 表格,包含三行

HTML &amp; CSS &amp; JavaScript 从一个表格到一个灰阶颜色表 02

工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子,对表格的内容做一些修改. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>颜色表</title> 6 </head>

用javascript实现一个2048游戏

早就想自己写一个2048游戏了,昨晚闲着没事,终于写了一个如下图,按方向键开始玩吧.如果觉得操作不方便,请直接打开链接玩吧:http://gujianbo.1kapp.com/2048/2048.html 附上源代码链接:https://github.com/gujianbo/js2048 个人博客地址:http://gujianbo.1kapp.com/ 新浪微博:http://weibo.com/gujianbobo 欢迎读者交流讨论并提出宝贵意见. 用javascript实现一个2048游

javascript删除一个html元素节点代码实例

javascript删除一个html元素节点代码实例:本章节介绍一下如何利用原生javascript实现删除一个指定的html元素.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&

Android Handler的一个简单使用例子

在前面 开启一个线程Thread并用进度条显示进度 这篇文章里,我们用线程实现了这么一个简单的功能,就是点击按钮,加载进度条.但是有没有发现,点击一次之后,再次点击就会没效.我们可是需要每次点击都要显示下一张图片的.永盈会娱乐城 这里就需要引入 Android 的消息机制了,简单来说,就是 Handler.Looper 还有 Message Queue的使用.这里我们用一个简单的例子来说明 Handler 的使用,就是每次点击按钮,给消息队列发送一个数字 5.还是在 PaintingActivi