JS中淺度克隆和深度克隆的區(qū)別是什么

小編給大家分享一下JS中淺度克隆和深度克隆的區(qū)別是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

JavaScript中克隆分為兩種：淺度克隆和深度克隆，都是先對(duì)值遍歷一遍判斷是原始值還是引用值，原始值直接復(fù)制，引用值先判斷是對(duì)象還是數(shù)組再進(jìn)行克隆

原始值：像Undefined，Null，Boolean，Number和String值被稱(chēng)為原始值

引用值：像對(duì)象數(shù)組函數(shù)等值稱(chēng)為引用值

淺度克隆

主要是將數(shù)據(jù)的地址賦給對(duì)應(yīng)的變量但并沒(méi)有將具體的值賦值給對(duì)應(yīng)的變量，變量會(huì)隨著數(shù)據(jù)的改變而改變

 <script>
    var obj={
      name:"張三",
      age:18,
      sex:"male",
       grade:[' Math:90','English:88','Chinese:80']
    }
    var obj1={}
    function clone(origin,target){
      var target=target||{};
      for(var prop in origin){
        target[prop]=origin[prop];
      }//防止用戶(hù)不傳target對(duì)象，給了參數(shù)就直接用，不給就當(dāng)空對(duì)象，
     return target;
    }
    clone(obj,obj1);
  </script>

結(jié)果

obj1將obj的值克隆過(guò)來(lái)了，當(dāng)給obj的grade添加值時(shí)，obj1的grade的值也隨之改變了

深度克隆

是將數(shù)據(jù)賦值給相對(duì)應(yīng)的變量，所以產(chǎn)生了一個(gè)新的數(shù)據(jù)也就有了新的地址，原數(shù)據(jù)的改變不會(huì)影響新數(shù)據(jù)

<script type="text/javascript">
var obj={
      name:"張三",
      age:18,
      sex:"male",
       grade:[' Math:90','English:88','Chinese:80']
    }
    var obj1={}
    function deepClone(origin,target){
	var target=target||{},
	toStr=Object.prototype.toString,//簡(jiǎn)化代碼
	arrStr="[Object Array]";
	for(var prop in origin){//從原始 origin 拷貝到 target
    		if(origin.hasOwnProperty(prop)){///先判斷是不是原型上的屬性，如果是false 就是原型上的
    	   {
      	if(typeof(origin[prop])!== "null" && typeof (origin[prop]) =='object')
      	{
    			if(toStr.call(origin[prop])==arrStr){
    				target[prop]=[];
    			}//數(shù)組對(duì)象
    			else{
    				target[prop]={};
    			}//對(duì)象
//
    			deepClone(origin[prop],target[prop]);
    		}
    		else{
    			target[prop]=origin[prop];
    		}
    	}
    }
     return target;
 }
	</script>

結(jié)果

obj1將obj的值克隆過(guò)來(lái)了，當(dāng)給obj的grade添加值時(shí)，obj1的grade的值不會(huì)改變

看完了這篇文章，相信你對(duì)JS中淺度克隆和深度克隆的區(qū)別是什么有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！