剖析数组元素去重的神兵利器——Set方法与Reduce妙用

2023-10-20 04:12:29

一、Set方法：简洁至上，一语道破

Set方法是JavaScript内置对象，其成员必须是唯一的，恰好满足数组元素去重的需求。使用Set方法去重，代码简洁明了，一语道破。

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // 输出：[1, 2, 3, 4, 5]

二、Reduce方法：巧用累加，轻松去重

Reduce方法是JavaScript数组内置方法，可将数组中的元素逐个累加，最终返回一个累积值。巧妙利用Reduce方法的累加特性，即可实现数组元素去重。

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = numbers.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);
console.log(uniqueNumbers); // 输出：[1, 2, 3, 4, 5]

三、实例拓展：去重实践，代码演练

去除字符串数组中的重复字符

const names = ['Alice', 'Bob', 'Charlie', 'Alice', 'Bob'];
const uniqueNames = [...new Set(names)];
console.log(uniqueNames); // 输出：[ 'Alice', 'Bob', 'Charlie' ]

保留对象数组中唯一键值对

const objects = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Charlie' }];
const uniqueObjects = objects.reduce((acc, curr) => {
  if (!acc.some(obj => obj.id === curr.id)) {
    acc.push(curr);
  }
  return acc;
}, []);
console.log(uniqueObjects); // 输出：[ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]