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

Posted 2023-02-22

【中文标题】js如何检查数组中的两个对象值是不是在一起

【英文标题】：js how to check two objects values in an array are togetherjs如何检查数组中的两个对象值是否在一起

【发布时间】：2021-02-03 15:07:35

【问题描述】：

如果我有数组：

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

如果我收到如下消息：

在渲染出来的 vuejs 中，我如何将具有相同用户名的消息合并并在彼此下渲染文本？

【问题讨论】：

那么你现在如何处理上面的代码？

我有一个 Message 组件，它接收一个 message 属性并使用消息数组中的 v-for 来呈现它。

我想要达到的效果就像不和谐，来自同一用户的消息不会使用用户名呈现，而是相互添加。

所以循环遍历数组，如果前一项相同，则将内容推入该数组。或者您更改循环以确定上一个标题是否相同，不要显示它。

你能举个例子吗？

【参考方案1】：

不要在视图中使用它，使用computed 来获取您想要的数据。然后，您可以使用<template> 标签来控制显示哪些元素，这样您就不需要将元素包装到单个 DOM 元素中。

下面的示例显示了为computed 生成数组的直接方法，然后可以对其进行迭代。

Vue.createApp(
  data() 
    return 
      messages: [
          username: 'john',
          message: 'hi'
        ,
        
          username: 'john',
          message: 'there'
        ,
        
          username: 'bob',
          message: 'hello'
        ,
        
          username: 'john',
          message: 'whats up'
        
      ]
    
  ,
  computed: 
    byUser() 
      const arr = [];
      let tempName = null;
      let tempGroup = 
      this.messages.forEach(m => 
        if (tempName !== m.username) 
          tempGroup = 
            username: m.username,
            messages: []
          
          arr.push(tempGroup);
        
        tempGroup.messages.push(m.message);
        tempName = m.username;
      )
      return arr;
    
  

).mount("#app")

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>

<div id="app" class="container">
  <template v-for="(m, i) in byUser">
    <h2>
       m.username 
    </h2>
    
    <p v-for="message in m.messages">
       message 
    </p>
    
    <hr>
  </template>
</div>