TypeScript中的array.groupBy [英] array.groupBy in TypeScript

问题描述

基本数组类具有 .map ， .forEach ， .filter 和 .reduce ，但是 .groupBy 却明显缺席，无法执行

The basic array class has .map, .forEach, .filter, and .reduce, but .groupBy i noticably absent, preventing me from doing something like

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

        </div>
    )
}

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

I ended up implementing something myself:

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>
    )
}

很漂亮很好，但是我需要包装列表而不是仅仅能够聊天就太糟糕了

Works pretty well, but it is too bad that I need to wrap the list rather than just being able to chain method calls.

是否有更好的解决方案？

Is there a better solution?

推荐答案

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

you could add the function to the array prototype in your app (note some don't recomend this: Why is extending native objects a bad practice?):

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

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

Then create an interface in typescript like this:

.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)=>{
                    [...]
                })

这篇关于TypeScript中的array.groupBy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！