javascript - 数组映射并跳过未定义的动态对象属性

Question

试图弄清楚如何在“地图”函数中创建动态对象。映射基于大型 json 对象，我正在尝试找到一种减小最终数组大小的方法。理想情况下不要添加具有未定义值的属性。即，如果'offst: undefined'，则跳过此属性，但添加其他具有适当int 值的属性。是否可以在不再次遍历数组的情况下做这样的事情？Array 有超过 150k 个条目，因此性能损失会很大。

this.mapData = this.mapData
                .map((e) => ({
                    p: e.p,
                    lat: e.lat,
                    lng: e.lng,
                    y: Object.keys(e.values)[0],
                    ct: Object.values(e.values)[0].ct, // add ct: only if not undefined
                    cp: Object.values(e.values)[0].cp,
                    w: Object.values(e.values)[0].wp,
                    offst: Object.values(e.values)[0].offst,
                    onst: Object.values(e.values)[0].onst,
                    ertn: Object.values(e.values)[0].ertn,
                    ertl: Object.values(e.values)[0].ertl,
                    dst: Object.values(e.values)[0].dst,
                    ft: Object.values(e.values)[0].ft,
                }))
                .filter((item) => item.chargersTotal !== 0);

            return this.mapData;

示例 json 数据：

[
   {
      "p":"BA1 2RU",
      "lat":"51.38934",
      "lng":"-2.364467",
      "values":{
         "2019":{
            "ct":0.0
            "dst":5.0
            "onst":1.0
         }
      }
   },
   {
      "p":"BA10 0AA",
      "lat":"51.112275",
      "lng":"-2.453865",
      "values":{
         "2019":{
            "offst":1.0,
            "ct":1.0
         }
      }
   },
   {
      "p":"BA10 0AB",
      "lat":"51.112463",
      "lng":"-2.454067",
      "values":{
         "2019":{
            "ct":0.0
         }
      }
   }
]

标签： javascriptarraysvue.js

Answer 1

使用省略号合并Object.values(e.values)[0]到您要返回的对象中。然后它只会合并存在的属性。

this.mapData = this.mapData
  .map((e) => {
    let firstKey = Object.keys(e.values)[0];
    let firstVal = e.values[firstKey];
    return {
      p: e.p,
      lat: e.lat,
      lng: e.lng,
      y: firstKey,
      ...firstVal
    };
  })
  .filter((item) => item.chargersTotal !== 0);