js--拷贝

最新推荐文章于 2024-08-28 14:56:42 发布

Laohei0101

最新推荐文章于 2024-08-28 14:56:42 发布

阅读量451

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/Laohei0101/article/details/118670037

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中对象拷贝的概念，包括浅拷贝和深拷贝的实现方式，并通过实例展示了如何在Vue中应用。重点讲解了浅拷贝的实现，通过for循环和函数封装，以及深拷贝的实现，利用递归处理复杂对象。同时，提到了JSON.stringify和JSON.parse方法作为深拷贝的一种实现。最后，文章指出在Vue中使用拷贝避免数据共享问题的重要性。

摘要由CSDN通过智能技术生成

今天说一下js中的一个重要知识点就是拷贝。如有错误请大家指教，共同努力。在学习拷贝之前一定要把js中的原始类型数据和引用类型数据搞清楚，这样才会对拷贝理解的更透彻，话不多说直接开始啦。
一、为什么要用拷贝呢？我们先来看一下一个简单的实例

<body>
	<div id = "app">
		<form @submit.prevent="insert">
			<input type="text" v-model="student.name">  //通过v-model来实现数据的双向绑定
			<inoput type="text" v-model="student.age">
			<button>添加</button>
		</form>
		<ul>
			<li v-for = "item in list">
				<p>学生：{{ item.name}}</p>
				<p>年龄：{{item.age }}</p>
			</li>
		<ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<script>
		new Vue({
			el:"#app", // 挂载到app上
			data:{
				student:{
				name:"",
				age:""
				},
				list:[]   //list空的数组来存放学生的数据
			},
			methods:{
				insert(){
					this.list.push(this.student); // 往数组中添加数据
				}
			}
		})
	</script>
</body>

上面的代码实现的效果如下图。但是出现一个问题就是当我们改变输入框中的内容的时候下面的数据也随着一起都改变了，这不是我们想要的结果，我们想要的是能够添加不同的数据的时候显示出来。先说说为什么会出现这样的情况呢？主要是引用数据存放在堆中，当我们输入值的时候只是改变了对象的值，但是对象指向的值的方向没有改变。就会出现这样的情况。具体专业的表达自己还有所欠缺，请大家多多改正。好了，接下来就说怎末解决了，那就需要用到拷贝了
在这里插入图片描述
二、对象拷贝—浅拷贝：也就是如果数值是原始类型，就都拷贝过来。但是引用类型的数值无法拷贝过来。
1、在浅拷贝中先实现拷贝一个对象，让两个变量指向两个对象

<script>
	let obj = {
		name:"小明"，
		age:12
	}
	
	let newObj = {};
	for ( let i in obj){
		//console.log(i)  //这个时候输出的是name和age
		//console.log(obj[i]) // 这个时候输出的是小明和12
		//下面需要把这个对象拷贝一个副本
		newObj[i] = obj[i]
	}
	obj.name = "小红"；
	console.log(obj);  // 这样输出的是小红
	console.log(newObj)  //这样输出的姓名是小明，其他两者都一样
</script>

2、通过一个函数来实现对上面拷贝的封装

let obj = {
	name:"小明",
	age:12
}
function copy(obj){
		let newObj = {};
		for(let i in obj ){
		newObj[i] = obj[i]
	}
		return newObj
}
const newObj = copy(obj);
console.log(obj);  //这样输出的是小红
console.log(newObj);  //这样输出的是小明，其他都一样

3、将封装的对象拷贝应用在vue中

<body>
	<div id = "app">
		<form @submit.prevent="insert">
			<input type="text" v-model="student.name">  //通过v-model来实现数据的双向绑定
			<inoput type="text" v-model="student.age">
			<button>添加</button>
		</form>
		<ul>
			<li v-for = "item in list">
				<p>学生：{{ item.name}}</p>
				<p>年龄：{{item.age }}</p>
			</li>
		<ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<script>
		new Vue({
			el:"#app", // 挂载到app上
			data:{
				student:{
				name:"",
				age:""
				},
				list:[]   //list空的数组来存放学生的数据
			},
			methods:{
				insert(){
					this.list.push(
						this.copy(this.student)  //用copy push 一个this.student的拷贝，也就是传的不是student而是student的副本
					); 
				},
				copy(obj){
					let newObj = {};
					for(let i in obj){
						newObj[i] = obj[i]
					}
						return newObj;
				}
			}
		})
	</script>
</body>

三、对象拷贝–深拷贝。上面说了原始类型的拷贝用浅拷贝，那么引用类型的拷贝怎末办呢？这就需要深拷贝了，通过深拷贝来实现对对象的拷贝。在学习深拷贝的时候先来看一下什么是递归，这个在深拷贝中需要用
1、递归：简单通俗讲就是自己调用自己。来看一个计数器的实例

function fun(n){
	if( n === 1){
		return 1;
	}else{
		return n + fun( n - 1)
	}
}
let result = fun(4);
console.log(result); //10

2、实现深拷贝，应用的实例就是小明和小刚都有女朋友，但是呢如果还是和之前那样的话两个人的女朋友是一个人，所以要解决这个问题就要通过深拷贝来实现。

<script>
	const student1 = {
		name:"小明",
		age:12,
		girlfriend:{
			name:"小红"
		}
	}；
	//深拷贝
	function copy(obj){
		let newObj = {};
		for(let i in obj){
			//如果是对象的话就再拷贝一次，也就是深拷贝
			//如果不是对象的话就直接拷贝，也就是浅拷贝
			if( obj[i] instanceof Object){  //先判断传进来的这个值是不是对象
			//是对象的话递归再拷贝
				newObj[i] = copy(obj[i])
			}else{
				newObj[i] = obj[i];
			}
		}
		return newObj;
	}
	const student2 = copy(student1);
	student1.girlfriend.name = "小花";
	console.log(obj);
	console.log(newObj)
</script>

输出的结果如下图。两个小明名字相同，但不是同一个人
在这里插入图片描述
3、深拷贝在vue中的使用

<body>
	<div id = "app">
		<form @submit.prevent="insert">
			<input type="text" v-model="student.name">  //通过v-model来实现数据的双向绑定
			<inoput type="text" v-model="student.age">
			<inoput type="text" v-model="student.girlfriend.name">
			<button>添加</button>
		</form>
		<ul>
			<li v-for = "item in list">
				<p>学生：{{ item.name}}</p>
				<p>年龄：{{item.age }}</p>
				<p>女朋友：{{item.girlfriend.name }}</p>
			</li>
		<ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<script>
		new Vue({
			el:"#app", // 挂载到app上
			data:{
				student:{
				name:"",
				age:"",
				girlfriend:{
					name:""
				}
				},
				list:[]   //list空的数组来存放学生的数据
			},
			methods:{
				insert(){
					this.list.push(
						this.copy(this.student)  //用copy push 一个this.student的拷贝，也就是传的不是student而是student的副本
					); 
				},
				copy(obj){
					let newObj = {};
					for(let i in obj){
					//如果获得的值是对象就再拷贝一次，如果获得的值不是对象的话就直接浅拷贝
					if(obj[i] instanceof Object){  //来判断获得的值是否是对象
						newObj[i] =this. copy(obj[i]); //如果是对象的话就再拷贝一次
					}else{
						newObj[i] = obj[i]
					}
						return newObj;
				}
			}
		})
	</script>
</body>

最终的效果如图所示
在这里插入图片描述
四、json拷贝
1、json是什么？json就是前后台数据交互的数据格式，说白了，json的翻译就是javascript的对象表示法，就是js对象
2、通过json来实现深拷贝

   <script>
          const student1 = {
            name:"小明",
            age:12,
            girlfriend:{
                name:"小红"
            }
        }
        //深拷贝
        function copy(obj){
            
            let str = JSON.stringify(obj);//通过json下的stringify()方法将对象转化成字符串
            let newObj = JSON.parse(str); //将转化后的字符串再转化为对象，这个时候的对象是转化后的对象，和之前的对象不一样
            return newObj;
           
        }
        const student2 = copy(student1);
        student1.girlfriend.name = "小花" ;
        console.log(student1);
        console.log(student2);
    </script>

效果一样.
在这里插入图片描述
好了今天就分享到这了，如果有错误的地方或者需要改进的地方希望小伙伴提出来，咱们共同努力。