美文网首页
深拷贝的用法

深拷贝的用法

作者: 郑馋师 | 来源:发表于2020-03-04 10:26 被阅读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)
        }
    

    相关文章

      网友评论

          本文标题:深拷贝的用法

          本文链接:https://www.haomeiwen.com/subject/itdafhtx.html