>  기사  >  웹 프론트엔드  >  js(코드)의 객체 전체 복사 실패 이유 및 해결 방법

js(코드)의 객체 전체 복사 실패 이유 및 해결 방법

不言
不言원래의
2018-08-21 15:44:321281검색

이 글은 js에서 객체의 깊은 복사가 실패하는 이유와 해결책(코드)을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

js 경험해봐서 알지만 사실 좀 까다롭네요,

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<script type="text/javascript">
			// 排序算法
		   function bubbleSort(arr) {
			  var len = arr.length;
			  for (var i = 0; i < len; i++) {
			    for (var j = 0; j < len - 1 - i; j++) {
			      if (arr[j] > arr[j+1]) { //相邻元素两两对比
			        var temp = arr[j+1]; //元素交换
			        arr[j+1] = arr[j];
			        arr[j] = temp;
			      }
			    }
			  }
			  return arr;
			}
		    
		    // 定义一个json ab
			var ab = {a:[2,1,3,9,4],b:[8,5,3]}
			// 定义一个json bc
			var bc = {};
			// 将json ab 深拷贝给json bc
			for(var i in ab){
				bc[i]=ab[i];
			}
			
			// 对json bc 排序
			bubbleSort(bc[&#39;a&#39;])
			bubbleSort(bc[&#39;b&#39;])
			
			// 分别打印 json ab ,json bc ,发现经过排序之后 对 json bc排序之后,
			// json ab也被排序,此时意味着深层拷贝失败
			document.write(&#39;-----------------------&#39;+&#39;<br/>&#39;);
			document.write(JSON.stringify(ab));
			document.write(&#39;<br/>&#39;+&#39;-----------------------&#39;+&#39;<br/>&#39;);
			document.write(JSON.stringify(bc));
			
		</script>
	</head>
	<body>
		
	</body>
</html>

당시 결과는 이렇습니다.

The 원본 개체는 다음과 같습니다. # 🎜🎜# {a:[2,1,3,9,4],b:[8,5,3]}

# 🎜🎜##🎜 🎜# 온갖 두뇌 소모 끝에 마침내 이유를 찾았습니다:

# 🎜🎜#이 깊은 수준의 복사는 복사된 개체가 정렬되면 복사가 유효하지 않게 됩니다. 복사된 개체가 정렬된 후에도 변경 사항은 원래 원본 개체에 복사됩니다.

# 🎜🎜#그래서 객체 복사(복제) 방법만 바꾸면 예시는 다음과 같습니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<script type="text/javascript">
			// 排序算法
		   function bubbleSort(arr) {
			  var len = arr.length;
			  for (var i = 0; i < len; i++) {
			    for (var j = 0; j < len - 1 - i; j++) {
			      if (arr[j] > arr[j+1]) { //相邻元素两两对比
			        var temp = arr[j+1]; //元素交换
			        arr[j+1] = arr[j];
			        arr[j] = temp;
			      }
			    }
			  }
			  return arr;
			}
		    
		    // 定义一个json ab
			var ab = {a:[2,1,3,9,4],b:[8,5,3]}
			// 定义一个json bc
			var bc = {};
			// 将json ab 深拷贝给json bc
			/*for(var i in ab){
				bc[i]=ab[i];
			}*/
			
			 function clone(obj) {
                // Handle the 3 simple types, and null or undefined or function
                if (null == obj || "object" != typeof obj) return obj;

                // Handle Date
                if (obj instanceof Date) {
                    var copy = new Date();
                    copy.setTime(obj.getTime());
                    return copy;
                }
                // Handle Array or Object
                if (obj instanceof Array | obj instanceof Object) {
                    var copy = (obj instanceof Array)?[]:{};
                    for (var attr in obj) {
                        if (obj.hasOwnProperty(attr))
                            copy[attr] = clone(obj[attr]);
                    }
                    return copy;
                }
                throw new Error("Unable to clone obj! Its type isn&#39;t supported.");
            }
			
			bc = clone(ab);
			// 对json bc 排序
			bubbleSort(bc[&#39;a&#39;])
			bubbleSort(bc[&#39;b&#39;])
			
			// 分别打印 json ab ,json bc ,发现经过排序之后 对 json bc排序之后, json ab也被排序,此时意味着深层拷贝失败
			document.write(&#39;-----------------------&#39;+&#39;<br/>&#39;);
			document.write(JSON.stringify(ab));
			document.write(&#39;<br/>&#39;+&#39;-----------------------&#39;+&#39;<br/>&#39;);
			document.write(JSON.stringify(bc));
			
		</script>
	</head>
	<body>
		
	</body>
</html>

결과는 다음과 같습니다. 이번에는 완벽해!

관련 권장 사항:

php ci 프레임워크에서 CSS 및 js 파일을 로드하지 못하는 이유와 해결 방법,

# 🎜🎜 #

JavaScript 객체의 깊은 복사 및 얕은 복사 예에 대한 자세한 설명

위 내용은 js(코드)의 객체 전체 복사 실패 이유 및 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.