写项目时遇到一个需求,有一个地方需要展示最近三年的数据,但是后端返回的数据是所有年份的,因为其他地方需要展示全部数据,因此这里我也不能让后端改接口,只能自己处理数据。
但是最麻烦的是,数据返回的形式是对象,并且键名是年份数字。由于后端返回的数据是根据键名从小到大排序的,因此我只需要将数据对象最后三个键值对保留,前面的删除即可。第一次碰到这种需求,记录一下。
先贴上代码:
//将后端返回的数据处理,用对象的keys()方法取出键名
let key = Object.keys(data);
//将键名数组的长度存下来,不然后面遍历的时候如果直接写key.length,删除某一项后,长度发生变化,for循环遍历会出问题
let length = key.length;
//定义一个新对象,用于存放处理后的数据
let newData = {};
//数组的assign方法会将data拷贝到newData上
Object.assign(newData, data);
//遍历key数组,依次删除数组中的项,直到留下最后三个
for (let i = 0; i < length - 3; i++) {
//将删除的键名保存(数组的shift()方法会删除数组中的第一个元素,返回值是删除的元素)
let deleteKey = key.shift();
//用delete方法,删除对象中deleteKey值对应的键值对
delete newData[deleteKey];
}
console.log(newData)
console.log(data)
控制台输出:
至此,需求实现,但是其实我还是有一个疑问,根据我的认知,es6中对象的assign方法如果用于数组和对象只是一个浅拷贝的效果,只拷贝了地址,修改其中一个,另一个也会变化,但是我在删除newData中的项之后,打印出来看,发现原数据data并没有受到影响,纳了个闷(不过需求实现了,管他呢),有无大佬能解决我这个疑惑!!!