【上海校区】数组去重的110种方法 - 黑马程序员技术交流社区

黑马程序员技术交流社区

标题:

作者:

时间:

标题:

一、使用双重for循环

[JavaScript] 纯文本查看 复制代码

function unique(arr) {

  for (let i = 0; i < arr.length; i++) {

    for (let j = i+1; j < arr.length; j++) {

      if (arr == arr[j]) {

        arr.splice(j,1)

        j--

      }

    }

  }

  return arr

}

let arr = [1,1,'true','true', 'a', 'a',true,true,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0,{},{},[],[]];

console.log(unique(arr)) // [ 1, 'true', 'a', false, undefined, NaN, NaN, 'NaN', {}, {} ]

可以看见NaN没有被去除掉，两个{}都没去掉，因为{}是引用值，而却我们使用的是arr == arr[j]会发生类型转换，所以以下都为true：

1 == true
false== []
undefined == null
false == 0

要解决以上问题我们可以使用Object.is(arr, arr[j])的方法替换arr==arr[j]既可以去除NaN还可以防止发生类型转换。代码这里接不贴出了，大家可以自己写一下运行一下。
注：为了方便以下arr都使用该处的arr值
二、利用indexOf()使用indexOf()，可以判断一个数组中是否包含某个值，如果存在则返回该元素在数组中的位置，如果不存在则返回-1。

[JavaScript] 纯文本查看 复制代码
functon unique(arr) {
let res = []
    for (let i = 0; i < arr.length; i++) {
      if (res.indexOf(arr) === -1) {
      res.push(arr)
      }
    }
    return res
}
console.log(unique(arr)) //[ 1, 'true', 'a', true, false, undefined, null, NaN, NaN, 'NaN', 0, {}, {}, [], []]

这里我们新建一个数组来保存去重后的数组，如果该数组不包含元素就将该元素push到该数组中，可以发现这种方法任然没有去掉NaN、{}、[]。
三、利用includes()使用includes()方法也可以判断数组是否包含某个特定的元素，如果包含就返回true不包含就返回false。这和indexOf()方法有些类似，所以我们使用includes()进行数组去重和indexOf()的方法原理是一样的。
functon unique(arr) {
[JavaScript] 纯文本查看 复制代码
let res = []
for (let i = 0; i < arr.length; i++) {
      if (!res.includes(arr)) {
            res.push(arr)
      }
}
return res
}

四、利用filter()filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。并且filter()不会改变数组，也不会对空数组进行检测。filter()方法接收一个回调函数。
语法：
[JavaScript] 纯文本查看 复制代码
array.filter(function(item,index,arr), thisValue)

参数描述
item必须。当前元素的值
index可选。当前元素的索引值
arr可选。当前元素属于的数组对象代码实现
[JavaScript] 纯文本查看 复制代码
function unique(arr) {
return arr.filter((item,index, arr) => {
      return arr.indexOf(item) === index
})
}
console.log(unique(arr)) //[ 1, 'true', 'a', true, false, undefined, null, 'NaN', 0, {}, {}, [], [] ]

这里我们用判断indexOf(item)判断当前元素的索引是否等于当前index，如果相等就返回该元素。
五、使用对象的特点对象是一种以键值对存储信息的结构，并且不能有重复的键。

[JavaScript] 纯文本查看 复制代码
function unique(arr) {
  let obj = {}
  for (let i = 0; i < arr.length; i++) {
if (arr in obj) {
   obj[arr] ++
} else {
   obj[arr] = 10
}
  }
  return Object.keys(obj) // 以数组的形式返回键
}
console.log(unique(arr)) // [ '0', '1', 'true', 'a', 'false', 'undefined', 'null', 'NaN', '[object Object]', '']

这种方法的写出来有点问题，因为是用Object.keys(obj)来返回键的集合所以得到的都是字符串的形式。
六、使用setES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

[JavaScript] 纯文本查看 复制代码
function unique(arr) {
  return [...new Set(arr)]
}
console.log(unique(arr)) //[ 1, 'true', 'a', true, false, undefined, null, NaN, 'NaN', 0, {}, {}, [], [] ]

这是ES6最常用的方法，得到的效果也还不错。

文章转载自：https://juejin.im/post/5c7e0328f265da2dc538da03

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2