妙用Object.keys()

来记录下 Object.keys() 的妙用

定义：静态方法Object.keys()返回给定对象自身的可枚举字符串键属性名称的数组。

先来举个栗子感受下：

const object1 = {
  a: 'somestring',
  b: 42,
  c: false,
  d: null
};

console.log(Object.keys(object1)); // Array ["a", "b", "c", "d"]

先来说说最近使用 Object.keys() 的背景：

1、需要开发一个图表大盘展示页，包含十几二十个图表，个别图表有下钻项可选择操作

2、与后端同学约定接口数据结构为所有图表数据对象平铺返回

"data": {
  "rate1": [
  	{
  		"date": "2024-01-01",
  		"value": 0.1234
  	},
  	{
  		"date": "2024-01-02",
  		"value": 0.567
  	}
  ],
  "rate2": [
  	{
  		"date": "2024-01-01",
  		"value": 0.1234
  	},
  	{
  		"date": "2024-01-02",
  		"value": 0.567
  	}
  ] 
}

3、操作带下钻项的图表时，接口仍然返回所有字段，但无关图表字段为null
4、于是就使用了 Object.keys() 对数据进行精准更新

// res即为接口返回的数据
const newItem = {};
Object.keys(res).filter(k => res[k]).forEach((v) => {
    newItem[v] = res[v];
 });
data = { ...originData, ...newItem };

假设操作某个图表时，接口返回:

"data": {
  "rate1": [
  	{
  		"date": "2024-01-01",
  		"value": 0.1234
  	},
  	{
  		"date": "2024-01-02",
  		"value": 0.567
  	}
  ],
  "rate2": null
}

• Object.keys(res) 得到 [“rate1”, “rate2”]
• Object.keys(res).filter(k => res[k]) 得到 [“rate1”]，这样就得到更新的那部分数据
• Object.keys(res).filter(k => res[k]).forEach((v) => { newItem[v] = res[v]; }); 就得到newItem
• data = { …originData, …newItem }; 就更新数据了

好了，就说到这吧。。。

下次再写一下在更新图表时遇到的问题：本意是只想更新一个表，但是其他图表也重新刷了一下，影响观感。