JavaScript数组去重的五种方法 | indexOf | new Set() | reduce includes | Object.keys

JavaScript数组去重的五种方法

方式一：new Set()

ES6 提供了新的数据结构 Set。它类似于数组（不是数组），但是成员的值都是唯一的，没有重复的值。

方式一代码示例：

let arr = [1,2,3,4,5,5,6,7,8,9,9,10,10]
let result = [...new Set(arr)]
//或者
// let result = Array.from(new Set(arr))
console.log(result) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
1
2
3
4
5

补充：Array.from() 用于将类数组对象和可遍历（iterable）对象转换为数组。

• 可遍历对象：字符串、和ES6中新增的数据结构 Set和 Map。

• 代码示例：

// 1.类数组对象
let arrLike = {
    '0':'a',
    '1':'b',
    '2':'c',
    length:3
}
let arr = Array.from(arrLike)
console.log(arr) //['a','b','c']

// 2.可遍历对象，如字符串
let str = 'hello'
let arr1 = Array.from(str)
console.log(arr1)  // ['h', 'e', 'l', 'l', 'o']
1
2
3
4
5
6
7
8
9
10
11
12
13
14

方式二：indexOf()

indexOf() 用于判断数组或字符串中是否含有某个元素，若有，则返回该元素第一次出现的索引值。若没有，则返回-1。

方式二代码示例：

let arr = [1,2,3,4,5,5,6,7,8,9,9,10,10]
let result = []
arr.forEach(item => {
    if(result.indexOf(item) == -1){
        result.push(item)
    }
})
console.log(result) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
1
2
3
4
5
6
7
8

方式三：对象属性值不可重复

1. Object.keys()：返回一个由一个给定对象的自身可枚举属性的键名组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。由于对象的键名都是字符串，因此数组中的元素都是字符串。

2. Array.prototype.map()：创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

方式三代码示例：

let arr = [1,2,3,4,5,5,6,7,8,9,9,10,10]
let result = { 
				
} 
arr.forEach((item,index)=>{
    result[arr[index]]='value'
})
result = Object.keys(result).map(item => ~~item)
console.log(result) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
1
2
3
4
5
6
7
8
9

方式四：reduce()+includes()

reduce函数可用来遍历一个数组，包含两个参数：

1. 回调函数reducer，一个reducer中包含四个参数：

• previousValue：上一次调用回调函数时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。
• currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
• currentIndex：数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。
• array：用于遍历的数组。

2. initialValue 可选参数

• 作为第一次调用回调函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。

返回值：使用reduce的回调函数reducer的返回结果作为reduce函数的最终返回值。

reduce函数参考：reduce函数

方式四代码示例：

let arr = [1,2,3,4,5,5,6,7,8,9,9,10,10]
let init = []
let result = arr.reduce((pre,item)=>{
    return pre.includes(item)?pre:[...pre,item]
},init)
console.log(result) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
1
2
3
4
5
6

！！注意这里条件表达式的:后面不能写pre.push(item)，因为数组的push()/pop()/shift()/unshift()四个方法虽然是会改变原来的数组，但是这四个方法返回值都是被改变后的数组的长度，而不是新的数组！！！

方式五：filter()

arr.filter() 用于过滤一个数组，filter方法位于Array.prototype原型对象上，可以通过实例对象直接调用。它可以用于遍历数组中的每一个元素，过滤每一个符合条件的值，这个方法会返回一个新的数组，且不会影响到原数组。

• 代码示例：

let arr =[1,2,3,4,6,8,90,5,65,7865,657]
//过滤出数组中的偶数
let result = arr.filter(item=>{
    return item % 2 == 0
})
console.log(result) // [2, 4, 6, 8, 90]
1
2
3
4
5
6

方式五代码示例：

let arr = [1,2,3,4,5,5,6,7,8,9,9,10,10]
let result = arr.filter((item,index)=>{
    return arr.indexOf(item) == index
})
console.log(result) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
1
2
3
4
5

小结

以上便是JavaScript中的数组去重的五种常见方法，有任何不足欢迎在评论区补充。