一种深拷贝的解决思路

背景

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

原始数据

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

处理方案

一、直接用 = 赋值函数

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,我心慌啊,原数据怎么能乱动呢,要是它主人追究怎么办?我又弱又饿,跑不过也打不过,冥思苦想,有了第二种思路。code

二、用 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 至关于数组的浅拷贝,若是数组中的元素是基本类型,那就能够经过它来实现拷贝。字符串

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

三、用 JSON 转,先转字符串,再转回对象console

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 也能够实现,难道它也是这样作的,不太可能,再思考思考。后台

四、本身写个深拷贝的函数 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 的使用。引用

相关文章
相关标签/搜索