循环数组并合并具有相同键/值对的元素答案

【问题标题】：Loop over array and merge elements with same key/value pair循环数组并合并具有相同键/值对的元素
【发布时间】：2021-10-22 07:29:58
【问题描述】：

我有一个对象数组：

array = [
    {
        age: 5,
        name: foo
    },
    {
        age: 5,
        name: bar
    },
    {
        age: 8,
        name: baz
    }
]

我这样循环数组：

<div v-for="(arr, index) in array" :key="index">
    <h5>age: {{ arr.age }}</h5>
    <ul>
        <li>{{ arr.name }}</li>
    </ul>
</div>

呈现如下：

<div>
    <h5>age: 5</h5>
    <ul>
        <li>foe</li>
    </ul>
</div>
<div>
    <h5>age: 5</h5>
    <ul>
        <li>bar</li>
    </ul>
</div>
<div>
    <h5>age: 8</h5>
    <ul>
        <li>baz</li>
    </ul>
</div>

但是我希望具有相同年龄的数组像这样合并：

<div>
    <h5>age: 5</h5>
    <ul>
        <li>foe</li>
        <li>bar</li>
    </ul>
</div>
<div>
    <h5>age: 8</h5>
    <ul>
        <li>baz</li>
    </ul>
</div>

如果年龄键/值对相同，我正在考虑制作一个单独的对象并合并数组的内容。我怎样才能得到这个？

【问题讨论】：

你回答了你自己的问题“我怎样才能得到这个？”：“如果年龄键/值，则制作一个单独的对象并合并数组的内容对是相同的”。 Merge JavaScript objects in array with same key
您确定您粘贴了正确的代码吗？那是array 似乎错了，为什么它有对象键？
你说得对，我现在改成正确的了

标签： javascript arrays vue.js

【解决方案1】：

尝试如下 sn-p:

new Vue({
  el: '#demo',
  data() {
    return {
      array: [{age: 5, name: 'foo'}, {age: 5, name: 'bar'}, {age: 8, name: 'baz'}]
    }
  },
  computed: {
    newArr() {
      const uniques = [...new Set(
      this.array.map(x => JSON.stringify(((o) => ({
            age: o.age,
        }))(x))))
      ].map(JSON.parse);
      this.array.forEach(a => {
          let idx = uniques.findIndex(u => u.age === a.age)
          if(!uniques[idx].name) uniques[idx].name = []
          uniques[idx].name.push(a.name)
      })
      return uniques
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
   <div v-for="(arr, index) in newArr" :key="index">
    <h5>age: {{ arr.age }}</h5>
    <ul>
        <li v-for="(name, i) in arr.name" :key="i">{{ name }}</li>
    </ul>
</div>
</div>

【讨论】：

【解决方案2】：

你可以解析你的对象来构建一个你喜欢的对象然后构建你的模板

array = [
  {
    age: 5,
    name: "foo"
  },
  {
    age: 5,
    name: "bar"
  },
  {
    age: 8,
    name: "baz"
  }
];
var newarr = {};
array.map((e) => {
  if (!newarr[e.age]) newarr[e.age] = [];
  newarr[e.age].push(e.name);
});

for (const [key, value] of Object.entries(newarr)) {
  console.log(`${key}`);
  for (const v of value) {
  console.log(`${v}`);
  }
  console.log("==========================");
}

【讨论】：