JS中浅度克隆和深度克隆有什么区别

清浅
Lepaskan: 2018-11-21 14:13:18
asal
4321 orang telah melayarinya

本文章分享的是JavaScript中一个重要的知识点克隆,具有一定的参考价值,希望对大家的学习有所帮助

JavaScript中克隆分为两种:浅度克隆和深度克隆,都是先对值遍历一遍判断是原始值还是引用值,原始值直接复制,引用值先判断是对象还是数组再进行克隆

原始值:像Undefined,Null,Boolean,Number和String值被称为原始值

引用值:像对象数组函数等值称为引用值

浅度克隆

主要是将数据的地址赋给对应的变量但并没有将具体的值赋值给对应的变量,变量会随着数据的改变而改变

 <script>
    var obj={
      name:"张三",
      age:18,
      sex:"male",
       grade:[&#39; Math:90&#39;,&#39;English:88&#39;,&#39;Chinese:80&#39;]
    }
    var obj1={}
    function clone(origin,target){
      var target=target||{};
      for(var prop in origin){
        target[prop]=origin[prop];
      }//防止用户不传target对象,给了参数就直接用,不给就当空对象,
     return target;
    }
    clone(obj,obj1);
  </script>
Salin selepas log masuk

结果

Image 12.jpg

obj1将obj的值克隆过来了,当给obj的grade添加值时,obj1的grade的值也随之改变了

深度克隆

是将数据赋值给相对应的变量,所以产生了一个新的数据也就有了新的地址,原数据的改变不会影响新数据

<script type="text/javascript">
var obj={
      name:"张三",
      age:18,
      sex:"male",
       grade:[&#39; Math:90&#39;,&#39;English:88&#39;,&#39;Chinese:80&#39;]
    }
    var obj1={}
    function deepClone(origin,target){
	var target=target||{},
	toStr=Object.prototype.toString,//简化代码
	arrStr="[Object Array]";
	for(var prop in origin){//从原始 origin 拷贝到 target
    		if(origin.hasOwnProperty(prop)){///先判断是不是原型上的属性,如果是false 就是原型上的
    	   {
      	if(typeof(origin[prop])!== "null" && typeof (origin[prop]) ==&#39;object&#39;)
      	{
    			if(toStr.call(origin[prop])==arrStr){
    				target[prop]=[];
    			}//数组对象
    			else{
    				target[prop]={};
    			}//对象
//
    			deepClone(origin[prop],target[prop]);
    		}
    		else{
    			target[prop]=origin[prop];
    		}
    	}
    }
     return target;
 }
	</script>
Salin selepas log masuk

结果

Image 13.jpg

obj1将obj的值克隆过来了,当给obj的grade添加值时,obj1的grade的值不会改变

总结:以上就是本篇文章所写的内容了,希望对大家学习有所帮助。


Atas ialah kandungan terperinci JS中浅度克隆和深度克隆有什么区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan