Javascript js如何检查数组中的两个对象值是否在一起

如果我有数组：

let messages = [
  {
    username: 'john',
    message: 'hi'
  },
  {
    username: 'john',
    message: 'there'
  },
  {
    username: 'bob',
    message: 'hello'
  },
  {
    username: 'john',
    message: 'whats up'
  }
]

如果我有如下信息：

---

在vuejs中，如何组合具有相同用户名的消息并呈现彼此下方的文本？

不要在视图中使用它，请使用

计算的

来获取所需的数据。然后可以使用

标记来控制显示哪些元素，这样就不需要将元素包装到单个DOM元素中

下面是一个示例，它显示了为

计算的

生成数组的直接方法，然后可以对该数组进行迭代

Vue.createApp({
数据（）{
返回{
信息：[{
用户名：“john”，
留言：“嗨”
},
{
用户名：“john”，
信息：“有”
},
{
用户名：“bob”，
留言：“你好”
},
{
用户名：“john”，
留言：“怎么了？”
}
]
}
},
计算：{
byUser（）{
常数arr=[]；
让tempName=null；
设tempGroup={}
this.messages.forEach（m=>{
if（tempName！==m.username）{
临时组={
用户名：m.username，
信息：[]
}
arr.push（临时组）；
}
tempGroup.messages.push（m.message）；
tempName=m.username；
})
返回arr；
}
}
}).mount（“应用程序”）

{{m.username}

{{message}}

您现在是如何编写上述代码的？我有一个消息组件，它接收消息道具，并使用消息数组中的v-for来呈现消息。我试图实现的是，在不一致中，来自同一用户的消息不会使用用户名呈现，而是相互添加。因此，在数组中循环，如果上一项相同，则将内容推入该项。或者更改循环以确定前一个标题是否相同，请不要显示它。请提供一个示例？