JavaScript中基于指定属性保留对象数组首个元素的最优去重方法

嘿，针对你要基于sno属性保留每个值对应首个元素的需求，用ES6的特性就能优雅高效地解决！这里有两种实用方案，其中第一种在性能和简洁性上表现最优：

方法一：使用Array.reduce() + Map（推荐） #

Map会保留键的插入顺序，刚好契合我们要保留首个出现元素的需求，而且整个过程只需要遍历数组一次，时间复杂度是O(n)，非常高效。

代码示例：

const ages = [
  {name: "Jan", age: "90", sno: "1"},
  {name: "Harry", age: "100", sno: "1"},
  {name: "Tan", age: "10", sno: "2"},
  {name: "Ron", age: "15", sno: "2"},
  {name: "Roh", age: "19", sno: "2"},
];

const uniqueAges = Array.from(
  ages.reduce((map, item) => {
    // 如果当前sno还没在Map里，就添加进去
    if (!map.has(item.sno)) {
      map.set(item.sno, item);
    }
    return map;
  }, new Map())
  .values() // 提取Map里的所有值
);

console.log(uniqueAges);
// 输出：[{name: "Jan", age: "90", sno: "1"}, {name: "Tan", age: "10", sno: "2"}]

原理很简单：遍历数组时用Map记录已经处理过的sno，只把首次出现的对象存入Map，最后把Map的值转换为数组就得到了去重后的结果。

方法二：使用Array.filter() + Set #

如果你更喜欢更直观的写法，也可以用filter配合Set来跟踪已出现的sno，同样是O(n)的时间复杂度：

const ages = [
  {name: "Jan", age: "90", sno: "1"},
  {name: "Harry", age: "100", sno: "1"},
  {name: "Tan", age: "10", sno: "2"},
  {name: "Ron", age: "15", sno: "2"},
  {name: "Roh", age: "19", sno: "2"},
];

const seenSno = new Set();
const uniqueAges = ages.filter(item => {
  if (!seenSno.has(item.sno)) {
    seenSno.add(item.sno);
    return true;
  }
  return false;
});

console.log(uniqueAges);
// 输出：[{name: "Jan", age: "90", sno: "1"}, {name: "Tan", age: "10", sno: "2"}]

这个方法里，filter遍历数组时，用Set记录已经见过的sno，只保留首次出现的元素。

两种方法对比 #

• 第一种reduce+Map的优势在于可以直接构建结果集合，不需要额外维护一个外部的Set变量，代码更紧凑，在处理超大数组时性能表现也很稳定。
• 第二种filter+Set的写法更直观易懂，新手更容易理解和上手。

你可以根据自己的代码风格和场景选择合适的方法，两种都能完美满足你的需求！

内容的提问来源于stack exchange，提问作者Adam