Javascript

Javascript深浅拷贝

Javascript有六种基本数据类型(也就是简单数据类型),它们分别是:Undefined,Null,Boolean,Symbol,Number和String。还含有一种复杂数据类型,就是对象(object)
注意Undefined和Null的区别,Undefined类型只有一个值,就是undefined,Null类型也只有一个值,也就是null
Undefined其实就是已声明未赋值的变量输出的结果
null其实就是一个不存在的对象的结果

    var c;
    console.log(c)//undefined
    console.log(document.getElementById('wsscat'))//没有id为wsscat的节点,输出null

简单的数据类型和复杂的数据类型有以下重要的区别

对于简单数据类型

它们值在占据了内存中固定大小的空间,并被保存在栈内存中。当一个变量向另一个变量复制基本类型的值,会创建这个值的一个副本,还有就是不能给基本数据类型的值添加属性

 	var a = 1;
    var b = a;
    a.attr = 'wsscat';
    console.log(a.attr)//undefined

上面代码中a就是简单数据类型(Number),b就是a的副本,它们两者都占有不同位置但相等的内存空间

对于复杂的数据类型

复杂的数据类型即引用类型,它的值是对象,保存在堆内存中,包含引用类型值的变量实际上包含的并不是对象本身,而是一个指向该对象的指针。从一个变量向另一个变量复制引用类型的值,复制的其实是指针,因此两个变量最终都指向同一个对象。

	 var obj = {
        name:'wsscat',
        age:0
    }
    var obj2 = obj;
    obj2['c'] = 5;
    console.log(obj);//Object {name: "wsscat", age: 0, c: 5}
    console.log(obj2);Object {name: "wsscat", age: 0, c: 5}

我们可以看到obj赋值给obj2后,当我们更改其中一个对象的属性值,两个对象都发生了改变,究其原因局势因为obj和obj2这两个变量都指向同一个指针,赋值只是复制了指针,所以当我们改变其中一个的值就会影响另外一个变量的值

浅拷贝

其实这段代码就是浅拷贝,有时候我们只是想备份数组,但是只是简单让它赋给一个变量,改变其中一个,另外一个就紧跟着改变,但很多时候这不是我们想要的

    var obj = {
        name:'wsscat',
        age:0
    }
    var obj2 = obj;
    obj2['c'] = 5;
    console.log(obj);//Object {name: "wsscat", age: 0, c: 5}
    console.log(obj2);Object {name: "wsscat", age: 0, c: 5}

披着深拷贝的浅拷贝

数组
对于数组我们可以使用slice()和concat()方法来解决上面的问题

	var arr = ['wsscat', 'autumns', 'winds'];
    var arrCopy = arr.slice(0);
    arrCopy[0] = 'tacssw'
    console.log(arr)//['wsscat', 'autumns', 'winds']
    console.log(arrCopy)//['tacssw', 'autumns', 'winds']

	var arr = ['wsscat', 'autumns', 'winds'];
    var arrCopy = arr.concat();
    arrCopy[0] = 'tacssw'
    console.log(arr)//['wsscat', 'autumns', 'winds']
    console.log(arrCopy)//['tacssw', 'autumns', 'winds']

对象
对象我们可以定义一个新的对象并遍历新的属性上去实现深拷贝

  	var obj = {
        name:'wsscat',
        age:0
    }
    var obj2 = new Object();
    obj2.name = obj.name;
    obj2.age = obj.age
    obj.name = 'autumns';
    console.log(obj);//Object {name: "autumns", age: 0}
    console.log(obj2);//Object {name: "wsscat", age: 0}
  • 克隆出来的新数组和新对象只是换了个容器,具体内部的对象指向未变

     let fn1=function(){
         a=1
       }
       let fn2=function(){
         b=2
       }
       let obj1={
         a:1,
         fn1
       }
       let obj2={
         a:1,
         fn2
       }
      let arr1=[obj1,obj2]
      console.log(arr1)
      let arr2=arr1.concat([])
      console.log(arr2)
      let arr3=arr1.slice(0);
      console.log(arr3)
      console.log(arr1[0]===arr2[0])  //false
      console.log(arr3===arr1)  //true
    

深拷贝

最简单的深拷贝是

		JSON.stringify()     JSON.parse()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值