使用hasOwnProperty去重JS数组时元素3重复的问题

你犯了一个逻辑错误：数组的hasOwnProperty方法检查的是数组的索引（键名），而不是数组中的元素值。

拿你的代码执行流程拆解，就能明白为什么3会重复出现：

• 初始output是空数组[]
• 遍历到第一个3时，output.hasOwnProperty(3)等价于检查数组是否有索引为'3'的位置——此时数组长度为1，只有索引'0'，判断为false，于是把3push进去，output变成[1,3]
• 继续遍历到第三个元素2，push后output变成[1,3,2]，此时数组的索引只有'0'、'1'、'2'
• 当再次遇到3时，output.hasOwnProperty(3)还是检查索引'3'——此时数组长度是3，不存在索引'3'，所以又把3push进去，导致output变成[1,3,2,3]

简单说，你要检查的是“元素值是否已经在数组里”，但hasOwnProperty帮你检查的是“数组有没有这个编号的索引位置”，完全不是一回事。

方法1：用额外对象记录已出现的元素 #

这是最接近你原有思路的修正方式，用对象存已经处理过的元素值，而非依赖数组索引判断：

var array = [1,3,2,1,3,4,5,6,7,3,5,6,4,3]
let output = []
let seen = {}

function removeDuplicates(array){
  for(let item of array){
    if(!seen.hasOwnProperty(item)){
      seen[item] = true
      output.push(item)
    }
  }
  return output
}
console.log(removeDuplicates(array)); // 输出 [1, 3, 2, 4, 5, 6, 7]

方法2：用ES6的Set（最简洁） #

Set本身会自动去重，直接转成数组即可：

var array = [1,3,2,1,3,4,5,6,7,3,5,6,4,3]
function removeDuplicates(array){
  return [...new Set(array)]
}
console.log(removeDuplicates(array)); // 输出 [1, 3, 2, 4, 5, 6, 7]

方法3：用数组的includes方法 #

直接检查元素是否已经在结果数组中：

var array = [1,3,2,1,3,4,5,6,7,3,5,6,4,3]
let output = []

function removeDuplicates(array){
  for(let item of array){
    if(!output.includes(item)){
      output.push(item)
    }
  }
  return output
}
console.log(removeDuplicates(array)); // 输出 [1, 3, 2, 4, 5, 6, 7]

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