Lodash深层过滤器和地图嵌套对象

时间:2019-11-28 09:49:47

标签: javascript vue.js lodash

我有下面的对象,该对象当前正在许多功能中循环通过,以获取具有名称的项目或设置新值。目前,我正在使用lodash _.foreach和._map来完成这两个动作。我知道lodash具有_.filter之类的功能,但是我无法使其与我拥有的对象一起使用。

let data =  [
  {
     "panels" : [
        {
          "title": "Panel 1",
          "items" : [
              {
                 "name": item1,
                 "value": 1
              }
              {
                 "name": item2,
                 "value": 2
              }
           ]
         },
         {
            "title": "Panel 2",
             "items" : [
              {
                 "name": item3,
                 "value": 3
              }
              {
                 "name": item4,
                 "value": 5
              }
           ]
         }
     ]
  }

  {
     "panels" : [
        {
          "title": "Panel 3"
          "items" : [
              {
                 "name": item5,
                 "value": 5
              }
              {
                 "name": item6,
                 "value": 6
              }
           ]
        }
     ]
  }  

  {
     "panels" : [
        {
          "title": "Panel 4"
          "items" : [
              {
                 "name": item7,
                 "value": 7
              }
              {
                 "name": item8,
                 "value": 8
              }
           ]
        }
     ]
  }    
]


 // Get item from the object with given name
 getItem: function(name) {
   let item = false;
   _.forEach(data, function (group) {
       _.forEach(group.panels, function (panel) {
           _.forEach(panel.items, function (item) {
               if (item.name == name) {
                   filterItem = item;
                   return false;
               }
            });
       });
   }); 
   return item ;
 },

 //Set item new value
 updateItemValue (name, value) {
    _.map(data, function(group) {
        _.map(group.panels, function(panel) {
            _.map(panel.items, function(item) {
                if( item.name === name ) {                      
                   item.value = value;                   
                }
            });
        });
    });
 }

还有其他方法可以更有效地实现这一目标吗?

1 个答案:

答案 0 :(得分:1)

您可以对for...of使用嵌套的destructuring循环。如果item提供了name,请返回该项目。对updateItemValue也应用相同的方法

const data=[{panels:[{title:"Panel 1",items:[{name:"item1",value:1},{name:"item2",value:2}]},{title:"Panel 2",items:[{name:"item3",value:3},{name:"item4",value:4}]}]},{panels:[{title:"Panel 3",items:[{name:"item5",value:5},{name:"item6",value:6}]}]}];

function getItem(name) {
  for (const { panels } of data)
    for (const { items } of panels)
      for (const o of items)
        if (o.name === name)
          return o

  return; // if no match is found
}

function updateItemValue(name, value) {
  for (const { panels } of data)
    for (const { items } of panels)
      for (const o of items)
        if (o.name === name) {
          o.value = value
          return;
        }
}

console.log(getItem('item1'))
console.log(getItem('item2'))
console.log(getItem('doesntexist'))

updateItemValue('item3', 33) // update the value
console.log(getItem('item3')) // gets the updated value