如何获取数组 React js 中的第一个唯一 ID 元素和最后一个唯一 ID 元素答案

【问题标题】：how can I get the first unique ID element and last unique ID element in an array React js如何获取数组 React js 中的第一个唯一 ID 元素和最后一个唯一 ID 元素
【发布时间】：2023-04-06 05:23:02
【问题描述】：

我有一个数据这个数据https://stackblitz.com/edit/react-26pgys 我如何过滤我可以获得第一个唯一 ID 和最后一个唯一 ID 的 json

我试过像这样过滤数据

let pp = this.state.data.filter(
            (ele, ind) => ind === this.state.data.findIndex(elem => elem.id === ele.id))

过滤所有唯一ID。

我希望数据结果是这样的

[{"id":"9000108","date":"2019-07-25","time":"17:49:23"},{"id":"9000108","date":"2019-07-25","time":"18:06:16"},{"id":"14947","date":"2019-07-25","time":"07:32:12"},{"id":"14947","date":"2019-07-31","time":"20:13:15"},{"id":"9000110","date":"2019-07-25","time":"07:25:10"},{"id":"9000110","date":"2019-07-31","time":"13:11:14"}, ....etc.]

【问题讨论】：

但是您的结果数据示例没有唯一 ID？
因此，由于这个问题涉及与时间相关的数据。那么对于每个 id，您希望记录的第一个项目的对象和记录的最后一个项目的对象正确吗？
当你说 'unique' id 时，你的意思是 id 只出现一次吗？
@rrd 是的，这就是我的想法

标签： javascript arrays json reactjs

【解决方案1】：

假设您的数据已经按时间顺序组织，您可以使用array.reduce() 来塑造您的数据。然后使用Object.values() 和array.flatMap() 创建您的唯一数组。

let dict = data.reduce((obj, item) => {
    if(!obj[item.id]){
        obj[item.id] = []
    }

    obj[item.id].push(item)

    return obj
}, {})

let unique = Object.values(dict).flatMap((arr) => {
    return [arr[0], arr[arr.length - 1]]
})

结果是一个包含 32 个项目的数组。每个唯一 ID 2 个。

【讨论】：

哇，兄弟，非常感谢！一百万年后我不会想到这一点！哈哈
@user3121362 不客气，兄弟！这是一个有趣的问题，我想你很快就能自己解决这样的问题:)

【解决方案2】：

您的问题似乎有点错误？可能，您的意思是这个东西-“如何在数组中获取具有相同 id 的第一条和最后一条记录？”。如果我是对的，这个问题不属于 React，而是属于 Native JavaScript。这是一个答案：

const formatted = this.state.data.reduce((acc, item) => {
    // Check if there are no items with this ID in accumulator still
    if (!acc.some(r => r.id === item.id)) {
        // Find all records with same ID
        const withSameId = records.filter(r => r.id === item.id);
        acc.push(withSameId[0]);

        if (withSameId.length > 1) {
            acc.push(withSameId[withSameId.length - 1]);
        }
    }
    return acc;
}, []);

您可以使用缓存之类的东西来优化这个脚本（我们可以使用 hashmap 来代替 acc.some，其中 key 是 id 来加快检查速度）。

【讨论】：

是的，你的问题是对的！你的回答太棒了！非常感谢
顺便说一句 records 将与 this.state.data 相同

【解决方案3】：

如果您的数据已排序，您可以通过保持对前一个 id 的引用来进行一次迭代 reduce。

const data = [{"id":"9000108","date":"2019-07-25","time":"17:49:23"},{"id":"9000108","date":"2019-07-25","time":"18:06:16"},{"id":"14947","date":"2019-07-25","time":"07:32:12"},{"id":"14947","date":"2019-07-25","time":"07:32:15"},{"id":"14947","date":"2019-07-25","time":"07:32:18"},{"id":"14947","date":"2019-07-25","time":"16:26:24"},{"id":"14947","date":"2019-07-25","time":"20:09:53"},{"id":"14947","date":"2019-07-25","time":"20:09:56"},{"id":"14947","date":"2019-07-25","time":"20:10:07"},{"id":"14947","date":"2019-07-25","time":"20:13:49"},{"id":"14947","date":"2019-07-26","time":"06:40:48"},{"id":"14947","date":"2019-07-26","time":"06:40:51"},{"id":"14947","date":"2019-07-26","time":"10:31:31"},{"id":"14947","date":"2019-07-31","time":"20:13:08"},{"id":"14947","date":"2019-07-31","time":"20:13:15"},{"id":"9000110","date":"2019-07-25","time":"07:25:10"},{"id":"9000110","date":"2019-07-25","time":"07:25:12"},{"id":"9000110","date":"2019-07-25","time":"08:38:56"},{"id":"9000110","date":"2019-07-25","time":"08:51:54"},{"id":"9000110","date":"2019-07-25","time":"09:29:29"},{"id":"9000110","date":"2019-07-30","time":"13:01:36"},{"id":"9000110","date":"2019-07-30","time":"13:09:02"},{"id":"9000110","date":"2019-07-30","time":"13:19:58"},{"id":"9000110","date":"2019-07-30","time":"13:20:55"},{"id":"9000110","date":"2019-07-30","time":"14:14:09"},{"id":"9000110","date":"2019-07-30","time":"14:18:46"},{"id":"9000110","date":"2019-07-30","time":"16:16:47"},{"id":"9000110","date":"2019-07-30","time":"16:19:42"},{"id":"9000110","date":"2019-07-30","time":"16:21:39"},{"id":"9000110","date":"2019-07-30","time":"16:47:15"},{"id":"9000110","date":"2019-07-30","time":"16:53:48"},{"id":"9000110","date":"2019-07-30","time":"17:45:57"},{"id":"9000110","date":"2019-07-30","time":"17:48:55"},{"id":"9000110","date":"2019-07-30","time":"17:53:56"},{"id":"9000110","date":"2019-07-30","time":"17:56:03"},{"id":"9000110","date":"2019-07-30","time":"17:58:37"},{"id":"9000110","date":"2019-07-30","time":"20:13:29"},{"id":"9000110","date":"2019-07-30","time":"20:13:45"},{"id":"9000110","date":"2019-07-31","time":"07:33:59"},{"id":"9000110","date":"2019-07-31","time":"07:34:01"},{"id":"9000110","date":"2019-07-31","time":"07:53:13"},{"id":"9000110","date":"2019-07-31","time":"09:01:26"},{"id":"9000110","date":"2019-07-31","time":"10:12:33"},{"id":"9000110","date":"2019-07-31","time":"11:22:43"},{"id":"9000110","date":"2019-07-31","time":"11:23:03"},{"id":"9000110","date":"2019-07-31","time":"11:24:15"},{"id":"9000110","date":"2019-07-31","time":"11:28:30"},{"id":"9000110","date":"2019-07-31","time":"11:42:59"},{"id":"9000110","date":"2019-07-31","time":"11:54:20"},{"id":"9000110","date":"2019-07-31","time":"13:10:53"},{"id":"9000110","date":"2019-07-31","time":"13:11:14"}];

let previousId = data[0].id;
const result = data.reduce((acc, e, i) => {
  if(previousId !== e.id) {
    acc.push(data[i - 1], e);
    previousId = e.id;
  }
  return acc;
}, [data[0]]);

// add the last item
result.push(data[data.length - 1]);

console.log(result);

【讨论】：

喜欢它！它完成了工作并且更清洁了谢谢！

【解决方案4】：

如果你有 lodash，你可以使用 findIndex 和 findLastIndex

const users = [
  { 'user': 'barney',  'active': true },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];

_.findIndex(users, function(o) { return o.active; });
// => 0
_.findLastIndex(users, function(o) { return o.active; });
// => 2

【讨论】：