一种深拷贝的解决思路

Ocean 发布于2019-08-20 17:23 / 1368人阅读

摘要：用来实现数组的拷贝，先试试传入表示截取全部你家的我要修改成我的名字看到结果我又懵了，你这是几个意思啊，我死了两千多个脑细胞才想出来的思路，竟然还是会改变，查询的资料显示确实可以实现拷贝而不改变原数组的功能啊，难道看漏了。

背景

最近在做数据处理的过程中，遇到一个问题，如下：
后台传递过来一组数据 Array，每个数组元素里面又包含了子对象，我要对这组数据进行处理，但是不想影响到原数组，同时原数组可能会要进行多个方向的数据格式化，为了渲染不同的界面。

原始数据

let data = [
    {
        id: 1,
        name: "luoxue",
        age: 25
    },
    {
        id: 2,
        name: "kk",
        age: 22
    },
    {
        id: 3,
        name: "qiuxia",
        age: 22
    }
];

处理方案

1、直接用 = 赋值

let myData = data; // 我要的数据
let yourData = data; // 你要的数据
myData[0].name = "luoxue-xu"; // 我要修改成我的名字
yourData[0].name = "kk-z"; // 你要修改成你的名字
console.log(data[0].name); // kk-z

不管是对 myData 还是对 yourData 操作，都改变了原来的 data，我心慌啊，原数据怎么能乱动呢，要是它主人追究怎么办？我又弱又饿，跑不过也打不过，左思右想，有了第二种思路。

2、用 slice 来实现数组的拷贝，先试试

let myData = data.slice(0); // 传入0 表示截取全部
let yourData = data.slice(0); // 你家的
myData[0].name = "luoxue-xu"; // 我要修改成我的名字
console.log(data[0].name); // luoxue-xu

看到结果我又懵了，你这是几个意思啊，我死了两千多个脑细胞才想出来的思路，竟然还是会改变，查询的资料显示 slice 确实可以实现拷贝而不改变原数组的功能啊，难道看漏了。
再认真看了遍资料，有点思绪，slice 虽然返回的是一个新数组，但是元素如果是对象，该引用的还是引用，原来如此。
slice 相当于数组的浅拷贝，如果数组中的元素是基本类型，那就可以通过它来实现拷贝。

江湖走马，风也好，雨也罢 ------《道君》

3、用 JSON 转，先转字符串，再转回对象

let myData = JSON.parse(JSON.stringify(data)); // 我家的
let yourData = JSON.parse(JSON.stringify(data)); // 你家的
yourData[0].name = "kk-z"; // 你名字带走
console.log(data[0].name); // luoxue

咦，还有点靠谱的样子，竟然可以，这么简单，不会有什么坑吧，先用着试试，不过 jQuery.extend 也可以实现，难道它也是这样做的，不太可能，再思考思考。

4、自己写个深拷贝的函数 clone

const clone = (b) => {
  if(Array.isArray(b)) {
    // 数组拷贝
    let obj = [];
    for(let i = 0; i < b.length; i++) {
      obj[i] = clone(b[i]);
    }
    return obj;
  }else if(b instanceof Object) {
    // 对象拷贝
    let obj = {};
    for(let attr in b) {
      obj[attr] = clone(b[attr]);
    }
    return obj;
  }else {
    return b;
  }
}
let myData = clone(data); // 我家的
let yourData = clone(data); // 还是我家的
yourData[0].name = "luoxue-kk"; // 还是我家的
console.log(data[0].name); // 返回什么，不告诉你，虽然报错了.

有空可以研究一下 Object.assign 的使用。

云服务器 GPU云服务器一种新的图像识别算法一种游戏的服务器给个明确的思路数据分析的思路

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83544.html

JavaScript对象深拷贝/浅拷贝遇到的坑和解决方法

摘要：在以上讨论和研究结束后，同学向我推荐了一个库，测试了一下该库存在方法，实现深拷贝更为完整和精致，前文问题均没有在该方法内被发现，在这里提一波。如果本文对您有任何帮助或者您有任何想要提出的意见或问题，请在本文下方回复，诚挚欢迎各位参与讨论，望各位不吝指教。原载自己的小博客 JavaScript对象拷贝遇到的坑和解决方法 | 手柄君的小阁，所以无耻地算原创吧近期参与某集训，Java...

atinosun 2019-08-26 11:44 评论0 收藏0
深拷贝的终极探索（99%的人都不知道）

摘要：划重点，这是一道面试必考题，我靠这道题刷掉了多少面试者嘿嘿首先这是一道非常棒的面试题，可以考察面试者的很多方面，比如基本功，代码能力，逻辑能力，而且进可攻，退可守，针对不同级别的人可以考察不同难度，比如漂亮妹子就出题，要是个帅哥那就得上了，划重点，这是一道面试必考题，我靠这道题刷掉了多少面试者✧(≖ ◡ ≖✿)嘿嘿首先这是一道非常棒的面试题，可以考察面试者的很多方面，比如基本功，代...

qingshanli1988 2019-08-23 12:19 评论0 收藏0
好文 - 收藏集 - 掘金

摘要：好吧，本文的主题可能还深入剖析的深复制前端掘金一年前我曾写过一篇中的一种深复制实现，当时写这篇文章的时候还比较稚嫩，有很多地方没有考虑仔细。翻译 | 深入理解 CSS 时序函数 - 前端 - 掘金作者：Nicolas（沪江前端开发工程师）本文原创，转载请注明作者及出处。各位，赶紧绑住自己并紧紧抓牢了，因为当你掌握了特别有趣但又复杂的CSS时序函数之后，你将会真正体验到竖起头发般的...

fobnn 2019-08-29 12:59 评论0 收藏0
案例 - 收藏集 - 掘金

摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

张金宝 2019-08-20 17:44 评论0 收藏0
案例 - 收藏集 - 掘金

摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

huangjinnan 2019-08-29 12:54 评论0 收藏0