vue 移动端项目 利用浅拷贝的原理 实现频道的更新

效果图：点击下边更多的频道可以进入我的频道

 浅拷贝的原理: 

1. 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用（地址）

浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原对象属性值的一份精准拷贝，如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。 

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)
    }
  },