基本的数组类具有.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>
)
}
效果很好,但是我需要包装列表而不是仅仅能够链接方法调用,这太糟糕了。
有更好的解决方案吗?
最佳答案
您可以将函数添加到应用程序中的数组原型(prototype)中(请注意,有些建议不要这样使用: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;
};
然后在 typescript 中创建一个接口(interface),如下所示:
.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)=>{
[...]
})