深拷贝的用法

在后续操作中发现遇到了bug,

    const newList = clone(recordList)
        .filter(r => r.type === this.type)
        .sort((a, b) => dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf());

这里由于clone后发现无法用sort和filter,报错
Parameter 'b' implicitly has an 'any' type.,上google看怎么解决问题的时候发现有人认为可以在tsconfig.json 中 添加"noImplicitAny": false,从而关闭这个的检查,而后我自己上了ts的官方看了文档,发现其实可以这样解决

function clone<T>(data: T): T {//data什么类型返回什么类型
  return JSON.parse(JSON.stringify((data)));
}

就是直接返回data的类型,从而使得不会因为隐式含有所有的类型而导致无法通过检查。

由于发现非常多的地方都用到了深拷贝,包括了Store里面的很多操作,所以我选择将这个操作封装成一个clone的操作,使得很多地方可以直接拿来用

function clone(data:any) {
  return JSON.parse(JSON.stringify((data)));
}
export default clone;

做项目的时候遇到问题

  saveRecord(){

  this.recordList.push(this.record)
    }

这个时候如果修改后面数据,前面也会出现变化。
这是为啥呢?
在我仔细研究了内存图的原理和查阅了一些资料我发现,这里push的时候每次都是依照原来的this.record进行push。这样就意味着后面push进入内存的实际地址没有改变,比如第一个地址是101,后面也都是101,所以后面的进行数值改变比如第一个push的时候push了a=2,那后面push的时候改成a=3,实际上并没有创建一个新的对象,而仅仅是改变了a的属性,所以前面push的也都变成了a=3
解决方法

  saveRecord(){
      const newRecord=JSON.parse(JSON.stringify(this.record))//深拷贝一个
  this.recordList.push(newRecord)
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容