最近在作数据处理的过程当中,遇到一个问题,以下:
后台传递过来一组数据 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
的使用。引用