深拷贝的用法

2020-03-04  本文已影响0人  郑馋师

在后续操作中发现遇到了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)
    }
上一篇下一篇

猜你喜欢

热点阅读