如何不区分大小写移除JavaScript数组中的重复项（保留首次出现）

这是个很常见的数组处理需求，针对你给出的['A', 'b', 'c', 'C', 'C', 'D']数组，我们需要实现不区分大小写去重，且仅保留每个元素的首次出现，最终得到['A', 'b', 'c', 'D']。下面是两种实用的实现方式：

方法一：使用Set快速去重（推荐） #

利用Set的唯一性特性，结合数组的filter方法，我们可以高效完成需求：

const originalArr = ['A', 'b', 'c', 'C', 'C', 'D'];
const seen = new Set();
const result = originalArr.filter(item => {
  // 将当前元素转为小写，作为判断重复的依据
  const lowerCaseItem = item.toLowerCase();
  if (!seen.has(lowerCaseItem)) {
    seen.add(lowerCaseItem);
    return true; // 保留该元素
  }
  return false; // 过滤重复元素
});

console.log(result); // 输出: ['A', 'b', 'c', 'D']

思路说明： #

• 核心逻辑：统一将元素转为小写（或大写），确保大小写不同的相同字符被视为重复项
• 效率优势：Set的has和add操作时间复杂度接近O(1)，整体遍历的时间复杂度是O(n)，处理大数组也很高效
• 保留首次出现：遍历过程中只在元素第一次出现时将其加入结果数组，后续重复项直接过滤

方法二：使用普通对象记录已出现元素 #

如果你更习惯用对象来跟踪状态，这种方式同样可行：

const originalArr = ['A', 'b', 'c', 'C', 'C', 'D'];
const seen = {};
const result = [];

for (const item of originalArr) {
  const lowerCaseItem = item.toLowerCase();
  // 检查该元素（小写形式）是否已被记录
  if (!seen[lowerCaseItem]) {
    seen[lowerCaseItem] = true; // 标记为已出现
    result.push(item); // 将原元素加入结果数组
  }
}

console.log(result); // 输出: ['A', 'b', 'c', 'D']

思路说明： #

• 用对象的键来存储已出现元素的小写形式，值标记是否已处理
• 遍历原数组时，仅当元素未被标记过，才将其加入结果数组并标记
• 这种方式兼容性很好，适合所有支持ES6+的环境

关键注意点 #

• 如果你需要区分大小写的反向需求（比如保留大写的C而不是小写的c），只需要调整遍历逻辑，但你的需求是保留首次出现，所以当前逻辑完全匹配
• 确保转换大小写的方法正确：toLowerCase()和toUpperCase()都可以，只要统一使用其中一种即可

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