JS小技巧之如何不用深拷贝来实现深拷贝效果

最近在业务中遇到个问题就是

　　　　　　--实现表格数据导出，但导出数据中有图片

因为在进入页面时拿到数据后初次渲染了表格，在vue中图片默认路径又是全局配置的，后端请求回来图片需要调用全局的图片路径

导出按钮触发后会在弹窗中生成表格，表格中渲染图片会存在两个问题↓

　　1、在导出组件中如果直接将后端返回的数据渲染上去，图片会因为路径（需要调用全局配置的方法）问题无法显示

　　2、如果将图片地址先调用全局方法后再传入组件，虽然弹窗中数据生成了正确路径，但页面中的数据也因此多加了一次默认路径，就导致了默认路径重复，会造成图片请求失败

一想到新生成数据会影响原数据，并且我又不想让原数据在某阶段发生改变，所以我第一时间想到了深拷贝数据

但是无奈用深拷贝之后虽然弹窗表格中图片显示正常，但页面表格中图片去显示加载失败→路径错误了！

左思右想之后忽然想到之前看过公司后端大佬的一个操作，然后大胆尝试了一波Look below↓

data(){
    oldData = [
        {
          name:'小王',
          age:20,
          photo:'/src/img/123456789.jpg'
        },
        {
          name:'小李',
          age:21,
          photo:'/src/img/453453453.jpg'
        },
        {
          name:'小张',
          age:22,
          photo:'/src/img/4534354378.jpg'
        },
      ]
},
// this.showPhoto()此函数就是我们全局配置的图片的默认路径
exportForm(){
  let data = this.oldData
      for(let i = 0;i < data;i++){
        //通过赋值给新属性来实现深拷贝效果
        data[i].newPhoto = this.showPhoto(data[i].photo)
      }  
}

这一招真的很实用，在公司业务几个地方都出现过，实用！！！

还有一个很重要的问题，就是我当时调用导出表格组件传入数据时需要传入表格数据和表头字段，但又因后端返回数据格式所以可能出现以下情况↓（自己封装的组件不一样，此问题仅供参考）

 

 像问题字段这样，如果只是文字的渲染没问题，但如果是图片渲染的话就会显示不出来

此时https://www.cnblogs.com/webway/p/15231898.html这个小技巧就实用了