如何在本机反应中过滤对象数组？

Posted 2023-02-22

【中文标题】如何在本机反应中过滤对象数组？

【英文标题】：How to filter array of objects in react native?

【发布时间】：2018-04-02 10:39:45

【问题描述】：

我想将此数据数组过滤为州和城市数组。如何使用 lodash 或任何其他更好的方法而不是 for 循环和维护额外的数组来实现这一点。

data: [
     id: 1, name: Mike, city: philps, state: New York,
     id: 2, name: Steve, city: Square, state: Chicago,
     id: 3, name: Jhon, city: market, state: New York,
     id: 4, name: philps, city: booket, state: Texas,
     id: 5, name: smith, city: ***field, state: Florida,
     id: 6, name: Broom, city: old street, state: Florida,
]

哪个用户点击了state，出现状态列表。

state: New York, count: 2,
state: Texas, count: 1,
state: Florida, count: 2,
state: Chicago, count: 1,

当用户单击特定状态时，会出现该状态的cities 列表。例如。当用户点击纽约州时，

id:1, name: Mike, city: philps
id:3, name: Jhon, city: market

【问题讨论】：

What is the most efficient method to groupby on a javascript array of objects?的可能重复

【参考方案1】：

您可以使用native javascript 执行此操作，方法是应用filter 方法，该方法接受callback 提供的函数作为参数。

let data = [  id: 1, name: 'Mike', city: 'philps', state:'New York',  id: 2, name: 'Steve', city: 'Square', state: 'Chicago',  id: 3, name: 'Jhon', city: 'market', state: 'New York',  id: 4, name: 'philps', city: 'booket', state: 'Texas',  id: 5, name: 'smith', city: '***field', state: 'Florida',  id: 6, name: 'Broom', city: 'old street', state: 'Florida', ]

data = data.filter(function(item)
   return item.state == 'New York';
).map(function(id, name, city)
    return id, name, city;
);
console.log(data);

另一种方法是使用arrow 函数。

let data = [  id: 1, name: 'Mike', city: 'philps', state:'New York',  id: 2, name: 'Steve', city: 'Square', state: 'Chicago',  id: 3, name: 'Jhon', city: 'market', state: 'New York',  id: 4, name: 'philps', city: 'booket', state: 'Texas',  id: 5, name: 'smith', city: '***field', state: 'Florida',  id: 6, name: 'Broom', city: 'old street', state: 'Florida', ]

data = data.filter((item) => item.state == 'New York').map((id, name, city) => (id, name, city));
console.log(data);

【讨论】：

我在数组对象中有一些空的。如何删除并需要使用这些值。这里需要显示除空之外的所有内容。 let data = [ id: , name: '', city: '', state:'', id: 2, name: 'Steve', city: 'Square', state: 'Chicago', id ：3，名称：'Jhon'，城市：'市场'，州：'纽约'， id：4，名称：'philps'，城市：'booket'，州：'德克萨斯'， id： 5、名称：'smith'，城市：'***field'，州：'佛罗里达'，id：6，名称：'Broom'，城市：'老街'，州：'佛罗里达'，]data = data .filter((item) => item.state == 'New York').map((id, name, city) => (id, name, city));console.log(data);

let data = [ id: , name: '', city: '', state:'', id: 2, name: 'Steve', city: 'Square', state: 'Chicago', id: 3, name: 'Jhon', city: 'market', state: 'New York', id: 4, name: 'philps', city: 'booket', state: 'Texas', id: 5, name: 'smith', city: '***field', state: 'Florida', id: 6, name: 'Broom', city: 'old street', state: 'Florida', ]data = data.filter((item) => item.state == 'New York').map((id, name, city) => (id, name, city));console.log(data);

【参考方案2】：

使用 lodash，您可以将 _.filter 与对象一起使用为 _.matchesiteratee 简写，以使用给定的键/值对过滤对象和

使用_.countBy 和_.map 来获取状态计数。

var data = [ id: 1, name: 'Mike', city: 'philps', state: 'New York' ,  id: 2, name: 'Steve', city: 'Square', state: 'Chicago' ,  id: 3, name: 'Jhon', city: 'market', state: 'New York' ,  id: 4, name: 'philps', city: 'booket', state: 'Texas' ,  id: 5, name: 'smith', city: '***field', state: 'Florida' ,  id: 6, name: 'Broom', city: 'old street', state: 'Florida' ];

console.log(_.filter(data,  state: 'New York' ));
console.log(_
    .chain(data)
    .countBy('state')
    .map((count, state) => ( state, count ))
    .value()
);

.as-console-wrapper  max-height: 100% !important; top: 0; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

【讨论】：

对于状态计数，它打印出数据数组作为结果。

输出完全正确，如 sinppet 中所示。但我不一样。

第二个控制台。获取数据作为结果

您可以添加value() 来获得渲染结果，而无需使用lodash 方法。

【参考方案3】：

Simply Follow 过滤功能 例如

return data.filter(data => data.state == "New York" && count === 2);

【参考方案4】：

使用Array.prototype.filter、Array.prototype.map、Array.prototype.reduce 和解构非常简单：

//filter by particular state
const state = /*the given state*/;
const filtered = data
.filter(e => e.state == state)//filter to only keep elements from the same state
.map(e => 
  const id, name, city = e;
  return id, name, city;
);//only keep the desired data ie id, name and city

//get states array
const states = data
.reduce((acc, elem) => 
  const state_names = acc.map(e => e.state);//get all registered names

  if(state_names.includes(elem.state))//if it is already there
    const index = acc.find(e => e.state==elem.state);
    acc[index] = state: acc[index].state, count: acc[index].count+1;//increment it's count
    return acc;
  else//otherwise
    return [...acc, state: elem.state, count: 1];//create it
, []);

cf this jsfiddle 看看它的实际效果。