Web前端必做笔记之一:对象拷贝(二) 浅拷贝
<div id="app">
<form @submit.prevent = "insert">
<input type="text" v-model="student.name">
<input type="text" v-model="student.age">
<button>添加</button>
</form>
<ul>
<li v-for = "item in list">
姓名:{{item.name}}
年龄:{{item.age}}
</li>
</ul>
</div>
script>
new Vue({
el: '#app',
data: {
student:{
name:'',
age:''
},
list:[]
},
methods:{
insert(){
console.log('hello world');
this.list.push(this.student);
}
}
})
</script>
首先我在输入框中写入小明和他的年龄,然后点添加,就可以看到添加成功了,我再添加三个,可以无限添加的,这是没有问题的,现在呢我把这个小明改成’小红’,然后我们会看到下面所有的小明都变成了小红,那为啥都变成了小红呢?
我们建立了一个数组叫做list[],我们往里面添加了东西,添加的student这个对象,我们往里面添加的都是这个student对象,而对象是存储在堆内存中,
他们都指向相同的一个对象,都是小明,这就是我们为啥改一个都变,
如何解决这个问题,我们可以给这个student做个克隆,或者说是拷贝完成之后,让这些对象不是一个对象
<script>
//拷贝一个对象:让两个变量指向两个对象
//如何拷贝
let obj = {
name:"小明",
age:2
}
let newObj = {};
for(let i in obj){
console.log(obj[i]); //小明,2
newObj[i] = obj[i]; //这样就实现了一个拷贝
}
obj.name ="小红"; //把这个obj的姓名改成小红,看看是否拷贝了两个,拷贝成功就是一个小红一个小明
console.log(obj); //小红
console.log(newObj); //小明
</script>
//封装一个函数
function copy(obj){ //拷贝我穿进来的obj
let newObj = {};
for(let i in obj){
console.log(obj[i]);
newObj[i] = obj[i]; //这样就实现了一个拷贝
}
return newObj;
} //这样就实现了一个对象的拷贝
let newObject = copy(obj);
console.log(obj); //小红
console.log(newObject); //小明
<script>
//让vue中有个拷贝的函数
new Vue({
el: '#app',
data: {
student:{
name:'',
age:''
},
list:[]
},
methods:{
insert(){
console.log('hello world');
// this.list.push(this.student);
this.list.push(
this.copy(this.student)); //这样传的就是个student的副本
},
copy(obj){ //拷贝的方法
let newObj = {};
for(let i in obj){
console.log(obj[i]);
newObj[i] = obj[i];
}
return newObj;
}
}
})
</script>