效果图:点击下边更多的频道可以进入我的频道
浅拷贝的原理:
- 浅拷贝只是拷贝一层,更深层次对象级别的
只拷贝引用(地址)
浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原对象属性值的一份精准拷贝,如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。
async addChannelFn(channelObj){
this.userChannelList.push(channelObj)
//把最新的数组,发送给后台
// console.log('this.userChannelList',this.userChannelList)
// 数组里对象字段 -> 转换
//推荐频道不能传递-删除出不是推荐频道剩下的频道对象
// let newArr =this.userChannelList.filter(obj=>obj.id !==0)
// newArr.forEach((obj,index)=>{
// //delte 对象.属性 可以删除键值对
// delete obj.name
// obj.seq=index
// })
// const res13= await updateChannelsAPI({channels:newArr})
// console.log("res13",res13)
//上面的代码出问题,新增时,名字被删除了
//原因: 所有数组里的对象,都是同一个内存地址,影响到ChannelEdit.vue 中对象
//解决方案:
const newArr =this.userChannelList.filter(obj => obj.id !==0)
const thenewArr=newArr.map((obj,index) => {
const newObj={...obj} //拷贝(浅拷贝)
delete newObj.name
newArr.seq=index
return newArr //map 方法把新对象收集起来形成一个新的数组
})
const res13= await updateChannelsAPI({channels:thenewArr})
console.log("res13",res13)
}
},