js中对象深层复制失败的原因以及解决办法（代码）

程序员文章站 2022-03-25 23:06:26

...

本篇文章给大家带来的内容是关于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['a'])
			bubbleSort(bc['b'])
			
			// 分别打印 json ab ,json bc ,发现经过排序之后 对 json bc排序之后，
			// json ab也被排序，此时意味着深层拷贝失败
			document.write('-----------------------'+'<br/>');
			document.write(JSON.stringify(ab));
			document.write('<br/>'+'-----------------------'+'<br/>');
			document.write(JSON.stringify(bc));
			
		</script>
	</head>
	<body>
		
	</body>
</html>

当时我的结果是这样的：

原Object 是： {a:[2,1,3,9,4],b:[8,5,3]}

js中对象深层复制失败的原因以及解决办法（代码）

后经过各种烧脑，终于发现其原因在此：

js中对象深层复制失败的原因以及解决办法（代码）

这个深层复制，如果复制的对象经过排序之后，会使复制失效，复制之后的对象排序之后的变化，依旧会复制到之前的最初始对象

所以只要换一张对象拷贝（复制）方法，就可以了，example 如下:

<!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't supported.");
            }
			
			bc = clone(ab);
			// 对json bc 排序
			bubbleSort(bc['a'])
			bubbleSort(bc['b'])
			
			// 分别打印 json ab ,json bc ,发现经过排序之后 对 json bc排序之后， json ab也被排序，此时意味着深层拷贝失败
			document.write('-----------------------'+'<br/>');
			document.write(JSON.stringify(ab));
			document.write('<br/>'+'-----------------------'+'<br/>');
			document.write(JSON.stringify(bc));
			
		</script>
	</head>
	<body>
		
	</body>
</html>

js中对象深层复制失败的原因以及解决办法（代码）

这次结果完美！