vue 一个数组 根据里面的 id字段去重，然后反一个新list

时间：2024-10-10 12:20:14

在 Vue.js 中处理数组并根据某个特定字段（如 id）进行去重，可以使用 JavaScript 的一些内置方法来实现。这里提供一种简单的方法，利用 Set 结构和 Array.prototype.map 方法结合来创建一个新的无重复项的列表。

假设我们有一个对象数组如下：

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 1, name: 'Apple' }, // 重复的 id
  { id: 3, name: 'Cherry' }
];

我们的目标是去除具有相同 id 的重复对象，只保留第一次出现的对象。下面是实现这一功能的代码：

function uniqueBy(arr, key) {
  const seen = new Set();
  return arr.filter(item => {
    const k = item[key];
    return seen.has(k) ? false : seen.add(k);
  });
}

// 使用方法
const uniqueItems = uniqueBy(items, 'id');

console.log(uniqueItems);

这段代码定义了一个 uniqueBy 函数，它接受两个参数：一个是需要处理的数组 arr，另一个是用于去重的键名 key。函数内部使用了 Set 来追踪已经遇到过的键值，并通过 filter 方法来过滤掉那些键值已经存在于 Set 中的元素。

在 Vue 组件中使用

如果你希望在 Vue 组件中使用这个方法，可以在组件的方法或者计算属性中调用它。例如：

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 1, name: 'Apple' }, // 重复的 id
        { id: 3, name: 'Cherry' }
      ]
    };
  },
  computed: {
    uniqueItems() {
      const seen = new Set();
      return this.items.filter(item => {
        const k = item.id;
        return seen.has(k) ? false : seen.add(k);
      });
    }
  }
});

在这个例子中，uniqueItems 是一个计算属性，它会自动根据 items 数组的变化重新计算去重后的结果。这样，当 items 发生变化时，uniqueItems 也会相应地更新，确保始终返回最新的去重后的列表。

相关文章