TypeScript 中的 array.groupBy

Question

基本数组类有

.map

、

.forEach

、

.filter

和

.reduce

，但是

.groupBy

我明显缺席，阻止我做类似的事情

const MyComponent = (props:any) => {
    return (
        <div>
            {
                props.tags
                .groupBy((t)=>t.category_name)
                .map((group)=>{
                    [...]
                })
            }

        </div>
    )
}

我最终自己实现了一些东西：

class Group<T> {
    key:string;
    members:T[] = [];
    constructor(key:string) {
        this.key = key;
    }
}


function groupBy<T>(list:T[], func:(x:T)=>string): Group<T>[] {
    let res:Group<T>[] = [];
    let group:Group<T> = null;
    list.forEach((o)=>{
        let groupName = func(o);
        if (group === null) {
            group = new Group<T>(groupName);
        }
        if (groupName != group.key) {
            res.push(group);
            group = new Group<T>(groupName);
        }
        group.members.push(o)
    });
    if (group != null) {
        res.push(group);
    }
    return res
}

所以现在我可以做

const MyComponent = (props:any) => {
    return (
        <div>
            {
                groupBy(props.tags, (t)=>t.category_name)
                .map((group)=>{
                    return (
                        <ul key={group.key}>
                            <li>{group.key}</li>
                            <ul>
                                {
                                    group.members.map((tag)=>{
                                        return <li key={tag.id}>{tag.name}</li>
                                    })
                                }
                            </ul>
                        </ul>
                    )
                })
            }

        </div>
    )
}

工作得很好，但是太糟糕了，我需要包装列表而不仅仅是能够链接方法调用。

有更好的解决办法吗？

Answer 1

您可以使用以下代码使用 Typescript 对内容进行分组。

const groupBy = <T, K extends keyof any>(list: T[], getKey: (item: T) => K) =>
  list.reduce((previous, currentItem) => {
    const group = getKey(currentItem);
    if (!previous[group]) previous[group] = [];
    previous[group].push(currentItem);
    return previous;
  }, {} as Record<K, T[]>);


// A little bit simplified version
const groupBy = <T, K extends keyof any>(arr: T[], key: (i: T) => K) =>
  arr.reduce((groups, item) => {
    (groups[key(item)] ||= []).push(item);
    return groups;
  }, {} as Record<K, T[]>);

所以，如果你有以下结构和数组：

type Person = {
  name: string;
  age: number;
};

const people: Person[] = [
  {
    name: "Kevin R",
    age: 25,
  },
  {
    name: "Susan S",
    age: 18,
  },
  {
    name: "Julia J",
    age: 18,
  },
  {
    name: "Sarah C",
    age: 25,
  },
];

您可以像这样调用它：

const results = groupBy(people, i => i.name);

在本例中，将为您提供一个带有字符串键和 Person[] 值的对象。

这里有几个关键概念：

1-您可以使用函数来获取密钥，这样您就可以使用 TS 推断功能，以避免每次使用该函数时都必须键入泛型。

2- 通过使用

K extends keyof any

类型约束，你告诉 TS 正在使用的键必须是可以作为键

string | number | symbol

的东西，这样你就可以使用 getKey 函数将 Date 对象转换为字符串示例。

3-最后，您将获得一个对象，其中包含键类型的键和数组类型的值。

Answer 2

一个好的选择可能是

lodash

。

npm install --save lodash
npm install --save-dev @types/lodash

只需导入它

import * as _ from 'lodash'

并使用即可。

示例

_.groupBy(..)
_.map(..)
_.filter(..)

Answer 3

您可以将该函数添加到应用程序中的数组原型中（请注意，有些人不推荐这样做：为什么扩展本机对象是一种不好的做法？）：

Array.prototype.groupBy = function(/* params here */) { 
   let array = this; 
   let result;
   /* do more stuff here*/
   return result;
};

然后在打字稿中创建一个界面，如下所示：

.d.ts 版本：

    interface Array<T>
    {
        groupBy<T>(func:(x:T) => string): Group<T>[]
    }

或者在普通的 ts 文件中：

declare global {
   interface Array<T>
   {
      groupBy<T>(func:(x:T) => string): Group<T>[]
   }
}

然后你可以使用：

 props.tags.groupBy((t)=>t.category_name)
     .map((group)=>{
                    [...]
                })

Answer 4

不要使用

groupby

，而是使用

reduce

。假设

product

是你的

array

let group = product.reduce((r, a) => {
console.log("a", a);
console.log('r', r);
r[a.organization] = [...r[a.organization] || [], a];
return r;
}, {});

console.log("group", group);

Answer 5

在 2021 年 12 月的 TC39 会议期间，引入新的

Array.prototype.groupBy

和

Array.prototype.groupByToMap

功能的提案已达到规范流程的第 3 阶段。

根据上面链接的自述文件，这两个函数应该是这样的：

const array = [1, 2, 3, 4, 5];

// groupBy groups items by arbitrary key.
// In this case, we're grouping by even/odd keys
array.groupBy((num, index, array) => {
  return num % 2 === 0 ? 'even': 'odd';
});

// =>  { odd: [1, 3, 5], even: [2, 4] }

// groupByToMap returns items in a Map, and is useful for grouping using
// an object key.
const odd  = { odd: true };
const even = { even: true };
array.groupByToMap((num, index, array) => {
  return num % 2 === 0 ? even: odd;
});

// =>  Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }

虽然不能 100% 保证它真的会以上述形式出现在 JavaScript 的未来版本中（该提案总是有可能被调整或删除，特别是出于兼容性原因），但它仍然是对很快就会在标准库中提供这个

groupBy

功能。

通过连锁反应，这也意味着这些功能也将在 TypeScript 中可用。

Answer 6

我需要一个不使用

any

的版本，并且由于我只需要对字符串值进行分组，所以我修改了 @kevinrodriguez-io 提供的解决方案：

const groupBy = <T extends Record<string, unknown>, K extends keyof T>(
  arr: readonly T[],
  keyProperty: K
) =>
  arr.reduce(
    (output, item) => {
      const key = String(item[keyProperty])
      output[key] ||= []
      output[key].push(item)
      return output
    },
    {} as Record<string, T[]>
  )

// Usage:
groupBy([{ foo: "bar" }], "foo")

这强制

keyProperty

参数是

的键并返回完全类型化的响应。

TypeScript 中的 array.groupBy

问题描述投票：0回答：6

6个回答

最新问题

TypeScript 中的 array.groupBy

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6