JavaScript数组去重总结

墨蓝 2023-06-03 03:55 39阅读 0赞

1.  indexOf判断去重
2.  sort排序后去重
3.  for+for+splice去重
4.  Array.form+Set去重（ES6常用）
5.  \[...new Set(arr)\]
6.  利用对象的属性不能相同
7.  利用reduce+includes

--------------------

**1、for循环+indexOf**

1.1 数组遍历-最直观，最好理解

创建一个新数组newArr，遍历arr的过程中，利用[indexOf][]判断当前数字在新数组是否已存在，不存在就放如newArr，如果存在了就不处理，继续遍历。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
      var newArr = []
      for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
          newArr.push(arr[i])
        }
      }
      console.log(newArr) // 结果：[2, 8, 5, 0, 6, 7]

1.2 判断数组下标

这个方法与第一个方法类似，还是利用[indexOf][]，区别是使用的是[indexOf][]返回首次出现的位置。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
    var newArr = []
    for (var i = 0; i < arr.length; i++) {
        if (arr.indexOf(arr[i]) === i) {
            newArr.push(arr[i])
        }
    }
    console.log(newArr) // 结果：[2, 8, 5, 0, 6, 7]

类似上面的，还可以使用[includes][]、[filter][]等。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
    var newArr =[];
    for(var i = 0; i < arr.length; i++) {
        if(!newArr.includes( arr[i])) {
        //includes 检测数组是否有某个值
            newArr.push(arr[i]);
        }
    }
    console.log(newArr) // 结果：[2, 8, 5, 0, 6, 7]

**2、[sort][]排序后去重**

用到了[sort][]排序。排序后，重复的数字挨在一起，前后比较，把不相同的放入新数组newArr里面。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
    arr.sort()
    var newArr = [arr[0]]
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== newArr[newArr.length - 1]) {
            newArr.push(arr[i])
        }
    }
    console.log(newArr) // 结果：[0, 2, 5, 6, 7, 8]

**3、for+for+[splice][]去重**

双层for循环嵌套+[splice][]删除重复的后一项。

**4、[Array.form][]\+[Set][]去重（ES6常用）**

ES6的方法，代码少，很好用，缺点是不能识别对象。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
    let newArr = Array.from(new Set(arr))
    console.log(newArr) // 结果：[2, 8, 5, 0, 6, 7]

**5、\[...new Set(arr)\]**

第四种方法的简化。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
    let newArr = [...new Set(arr)] 
    console.log(newArr) // 结果：[0, 2, 5, 6, 7, 8]

**6、利用对象的属性不能相同**

6.1定义一个对象obj，以arr的值为obj的key，判断key是否已经存在。

6.2利用[hasOwnProperty][]，与利用对象原理相同。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
    var obj = {}
    var newArr = []
    for(item of arr) {
        if (obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)) {
            newArr.push(item)
        }
    }
    console.log(newArr) // 结果：[2, 8, 5, 0, 6, 7]

** 7、利用[reduce][]\+includes**

利用[reduce][]累加器，其原理类似for+includes。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
    var newArr = arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
    console.log(newArr) // 结果：[2, 8, 5, 0, 6, 7]

--------------------

参考

1.  [js数组去重五种方法][js]
2.  [JavaScript数组去重（12种方法，史上最全）][JavaScript_12]
3.  [JavaScript数组去重—ES6的两种方式][JavaScript_ES6]
4.  [ES6][]

转载于:https://www.cnblogs.com/Nightsky-Dec/p/11374886.html

[indexOf]: https://www.w3school.com.cn/jsref/jsref_indexOf.asp
[includes]: https://www.runoob.com/jsref/jsref-includes.html
[filter]: https://www.runoob.com/jsref/jsref-filter.html
[sort]: https://www.runoob.com/jsref/jsref-sort.html
[splice]: https://www.runoob.com/jsref/jsref-splice.html
[Array.form]: http://es6.ruanyifeng.com/#docs/array%23Array-from
[Set]: http://es6.ruanyifeng.com/#docs/set-map
[hasOwnProperty]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
[reduce]: https://www.runoob.com/jsref/jsref-reduce.html
[js]: https://yq.aliyun.com/articles/691153
[JavaScript_12]: https://segmentfault.com/a/1190000016418021
[JavaScript_ES6]: https://www.cnblogs.com/zhishaofei/p/9036943.html
[ES6]: http://es6.ruanyifeng.com