首页 » 从数组中删除重复项

从数组中删除重复项

摘要：在本教程中，您将学习如何在 JavaScript 中从数组中删除重复项。

1) 使用 Set 从数组中删除重复项

一个 Set 是一个包含唯一值的集合。要从一个 数组 中删除重复项

  • 首先，将一个包含重复项的数组转换为一个 Set。新的 Set 将隐式删除重复元素。
  • 然后，将 set 转换回一个数组。

以下示例使用 Set 从数组中删除重复项

let chars = ['A', 'B', 'A', 'C', 'B'];
let uniqueChars = [...new Set(chars)];

console.log(uniqueChars);Code language: JavaScript (javascript)

输出

[ 'A', 'B', 'C' ]Code language: JSON / JSON with Comments (json)

2) 使用 indexOf() 和 filter() 方法从数组中删除重复项

indexOf() 方法返回数组中元素第一次出现的索引。例如

let chars = ['A', 'B', 'A', 'C', 'B'];
chars.indexOf('B');Code language: JavaScript (javascript)

输出

1

重复项是索引与其 indexOf() 值不同的项

let chars = ['A', 'B', 'A', 'C', 'B'];

chars.forEach((c, index) => {
    console.log(`${c} - ${index} - ${chars.indexOf(c)}`);
});
Code language: JavaScript (javascript)

输出

A - 0 - 0
B - 1 - 1
A - 2 - 0
C - 3 - 3
B - 4 - 1

要删除重复项，您可以使用 filter() 方法，仅包含索引与其 indexOf 值匹配的元素

let chars = ['A', 'B', 'A', 'C', 'B'];

let uniqueChars = chars.filter((c, index) => {
    return chars.indexOf(c) === index;
});

console.log(uniqueChars);
Code language: JavaScript (javascript)

输出

[ 'A', 'B', 'C' ]
Code language: JSON / JSON with Comments (json)

要查找重复值，您需要反转条件

let chars = ['A', 'B', 'A', 'C', 'B'];

let dupChars = chars.filter((c, index) => {
    return chars.indexOf(c) !== index;
});

console.log(dupChars);Code language: JavaScript (javascript)

输出

[ 'A', 'B' ]Code language: JSON / JSON with Comments (json)

3) 使用 forEach() 和 include() 从数组中删除重复项

include() 如果数组中存在元素，则返回 true，否则返回 false。

以下示例遍历数组的元素，并将不在其中的元素添加到新的数组中

let chars = ['A', 'B', 'A', 'C', 'B'];

let uniqueChars = [];
chars.forEach((c) => {
    if (!uniqueChars.includes(c)) {
        uniqueChars.push(c);
    }
});

console.log(uniqueChars);Code language: JavaScript (javascript)

输出

[ 'A', 'B', 'C' ]    Code language: JSON / JSON with Comments (json)

4) 按一个属性从对象数组中删除重复项

假设您有以下对象数组

const members = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'Johnny' },
  { id: 4, name: 'Alice' },
];Code language: JavaScript (javascript)

第一个元素的 id 与第三个元素相同。要从 people 数组中删除重复项，您可以使用以下方法

const unique = [...new Map(members.map((m) => [m.id, m])).values()];
console.log(unique);Code language: JavaScript (javascript)

输出

[
  { id: 1, name: 'Johnny' },
  { id: 2, name: 'Jane' },
  { id: 4, name: 'Alice' }
]Code language: JavaScript (javascript)

工作原理。

首先，使用 map() 方法从原始数组创建新的数组

members.map((m) => [m.id, m])Code language: JavaScript (javascript)

它返回一个包含数组的数组。每个嵌套数组包含 id 的值和相应的对象

[
  [ 1, { id: 1, name: 'John' } ],
  [ 2, { id: 2, name: 'Jane' } ],
  [ 1, { id: 1, name: 'Johnny' } ],
  [ 4, { id: 4, name: 'Alice' } ]
]Code language: JavaScript (javascript)

其次，通过创建新的 Map() 对象删除重复项

const newMap = new Map(newArray);
console.log(newMap);Code language: JavaScript (javascript)

输出

Map(3) {
  1 => { id: 1, name: 'Johnny' },
  2 => { id: 2, name: 'Jane' },
  4 => { id: 4, name: 'Alice' }
}Code language: PHP (php)

由于 Map 对象的键是唯一的，因此从包含数组的数组中创建 Map 会通过键（在本例中为 id）删除重复对象。

第三，通过调用 values() 方法获取 Map 条目的迭代器

const iterator = newMap.values();
console.log(iterator);Code language: JavaScript (javascript)

输出

[Map Iterator] {
  { id: 1, name: 'Johnny' },
  { id: 2, name: 'Jane' },
  { id: 4, name: 'Alice' }
}Code language: JavaScript (javascript)

最后，使用扩展运算符将迭代器转换为数组

const uniqueMembers = [...iterator];
console.log(uniqueMembers);Code language: JavaScript (javascript)

输出

[
  { id: 1, name: 'Johnny' },
  { id: 2, name: 'Jane' },
  { id: 4, name: 'Alice' }
]Code language: JavaScript (javascript)

将其整合在一起

const members = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'Johnny' },
  { id: 4, name: 'Alice' },
];

const newArray = members.map((m) => [m.id, m]);
const newMap = new Map(newArray);
const iterator = newMap.values();
const unique = [...iterator];

console.log(unique);Code language: JavaScript (javascript)

以下四行代码

const newArray = members.map((m) => [m.id, m]);
const newMap = new Map(newArray);
const iterator = newMap.values();
const unique = [...iterator];Code language: JavaScript (javascript)

…可以缩短为一行

const unique = [...new Map(members.map((m) => [m.id, m])).values()];Code language: JavaScript (javascript)

所以

const members = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'Johnny' },
  { id: 4, name: 'Alice' },
];

const unique = [...new Map(members.map((m) => [m.id, m])).values()];

console.log(unique);Code language: JavaScript (javascript)

以下 unique() 函数接受一个对象数组，并按属性返回唯一元素

const uniqueBy = (arr, prop) => {
  return [...new Map(arr.map((m) => [m[prop], m])).values()];
};Code language: JavaScript (javascript)

例如，您可以使用 uniqueBy() 函数按如下方式从 members 数组中删除重复元素

const members = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'Johnny' },
  { id: 4, name: 'Alice' },
];

const uniqueBy = (arr, prop) => {
  return [...new Map(arr.map((m) => [m[prop], m])).values()];
};

console.log(uniqueBy(members, 'id'));Code language: JavaScript (javascript)

5) 按多个属性从对象数组中删除重复项

以下 unique() 函数从对象数组中删除重复项。重复逻辑由一个 回调函数 指定


function unique(a, fn) {
  if (a.length === 0 || a.length === 1) {
    return a;
  }
  if (!fn) {
    return a;
  }

  for (let i = 0; i < a.length; i++) {
    for (let j = i + 1; j < a.length; j++) {
      if (fn(a[i], a[j])) {
        a.splice(i, 1);
      }
    }
  }
  return a;
}Code language: JavaScript (javascript)

工作原理。

首先，如果数组具有零个或一个元素，则返回同一个数组

if (a.length === 0 || a.length === 1) {
  return a;
}Code language: JavaScript (javascript)

其次，如果未传递回调，则返回输入数组

if (!fn) {
  return a;
}Code language: JavaScript (javascript)

第三，遍历输入数组的元素两次，并依次将第一个元素与其他元素进行比较。如果两个元素导致回调函数 (fn) 返回 true，则使用 splice() 方法从数组中删除该元素。

for (let i = 0; i < a.length; i++) {
  for (let j = i + 1; j < a.length; j++) {
    if (fn(a[i], a[j])) {
      a.splice(i, 1);
    }
  }
}Code language: JavaScript (javascript)

以下示例使用 unique() 函数通过 id 和 name 属性从 members 数组中删除重复项

function unique(a, fn) {
  if (a.length === 0 || a.length === 1) {
    return a;
  }
  if (!fn) {
    return a;
  }

  for (let i = 0; i < a.length; i++) {
    for (let j = i + 1; j < a.length; j++) {
      if (fn(a[i], a[j])) {
        a.splice(i, 1);
      }
    }
  }
  return a;
}

const members = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'John' },
  { id: 4, name: 'Joe' },
];

const uniqueMembers = unique(
  members,
  (a, b) => (a.id === b.id) & (a.name === b.name)
);

console.log(uniqueMembers);
Code language: JavaScript (javascript)

输出

[
  { id: 2, name: 'Jane' },
  { id: 1, name: 'John' },
  { id: 4, name: 'Joe' }
]Code language: JavaScript (javascript)

在本教程中，您已经学习了一些在 JavaScript 中从数组中删除重复项的技术。

本教程是否有帮助？
JavaScript Merge Objects
先前
JavaScript 合并对象
接下来
按类名选择元素
Selecting Elements By Class Name