JS当中的拷贝!!!

来源:互联网 发布:海康监控软件 编辑:程序博客网 时间:2024/05/21 21:34

**最近在复习前端的笔试和面试题目,看到了深拷贝和浅拷贝的问题,
在这里自己查点资料写下这一篇博客用来复习!**

第一:JS的数据类型

我猜会有很多小伙伴和我一样,在开始准备各大公司笔试面试的时候很大程度上都存在着基础不扎实的情况,比如看到经常看到的面试题之一:深拷贝和浅拷贝,可能很多同学看了一下其他朋友的代码然后记一下就过去了。知道了是怎么通过代码实现的,不过在这里我写一些东西顺便帮助自己复习复习,如有错误欢迎老师和同学们留言指正~首先,我们要知道JS的数据类型,像什么string,number,boolen等等,我们知道这些具体的类型,包括很多书上也会写!但其实这些类
型综合起来分为“值类型”和“引用类型”!
值类型是存储在栈内存中的!!! 比如:

var name = 'jozo';var city = 'guangzhou';var age = 22;

它们在内存中是这样的
这里写图片描述
引用类型的存储需要内存的栈区和堆区(堆区是指内存里的堆内存)共同完成,栈区内存保存变量标识符和指向堆内存中该对象的指针

var person1 = {name:'jozo'};var person2 = {name:'xiaom'};var person3 = {name:'xiaoq'};

它们在内存中是这样的:
这里写图片描述

OK!知道了这两种类型,下面我们就开始正题!!!

第二:拷贝

首先说一下什么是拷贝吧,很好理解就是类似于我们电脑中复制粘贴这么一个操作
为什么要拷贝?因为引用类型的存储需要内存的栈区和堆区(堆区是指内存里的堆内存)共同完成,栈区内存保存变量标识符和指向堆内存中该对象的指针**
1.对于值类型的拷贝
这个很好理解直接上代码

var a=10;b=a//直接赋值就行了

2.对于引用类型的拷贝
2.1首先是对数组的拷贝

            //对数组的拷贝可以用slice或者concat            var arr = ["one", "two", "three"];            //var arrto=arr.slice(0);            var arrto = arr.concat();            arrto[1] = "test";            console.log(arr)            console.log(arrto);

2.2对对象的拷贝
2.2.1浅拷贝(适用于简单对象)

            //对对象的拷贝------------浅拷贝            var obj = {                a: 10,                b: 20            };            function copy(obj) {                var newobj = {};                for(key in obj) {                    newobj[key] = obj[key]                }                return newobj;            }            obj2 = copy(obj);            console.log(obj2.a); //成功复制出obj的a              obj2.a = 555; //更改了obj2的a              console.log(obj2.a); //改变              console.log(obj.a); //不变,obj2的改变不影响obj,说明拷贝后的对象和之前的对象不存在公用一个引用

如上所示,浅拷贝可以帮我们完成很大一部分日常需要了,但是对于复杂一点的对象却无法深入!比如对于

var obj={      a:{          son1:'aa',  //obj对象里的a也是个对象          son2:'bb'      },      b:20  }; 

这样的对象,我们使用浅拷贝是不行的
2.2.2深拷贝

var obj={                a:{                    aa:10                },                b:11            };            function deepCopy(obj){                if(typeof obj!='object'){                    return obj;                }                var newobj={};                for(var i in obj){                    newobj[i]=deepCopy(obj[i])//使用递归一直拷贝                }                return newobj;            }            var obj2=deepCopy(obj);              console.log(obj.a.aa);//10              console.log(obj2.a.aa);//10 成功复制深层对象aa              obj2.a.aa=22;  //改变obj2的a的aa              console.log(obj2.a.aa);//  改变              console.log(obj.a.aa);//10  不变  

这里我们看到,其实深拷贝主要就是浅拷贝的递归!(必须加入递归终止条件)

原创粉丝点击