原生JS数组去重的多种方式

数组去重的方法

双重For循环去重(逻辑处理稍微复杂一点的去重方式)

let arr = [1, 2, 2, 3, 4, 5, 6, 1, 2, 3]

let len = arr.length // 保存数组长度

for (let i = 0; i < len; i++) { 
    // 第一层循环的目的是为了拿到数组中的每一项
    let index = i
    for (let j = i + 1; j < len; j++) { 
    // 第二层循环的目的是那第一层循环的每一项跟它后面的每个值进行对比 如果相同就删除后面的值,
        if (arr[i] === arr[j]) {
            arr.splice(j, 1) // splice方法通过下标删除数组中的项
        }
    }
}

console.log(arr) // [1,2,3,4,5,6]

IndexOf去重(通俗易懂)

        循环数组， 对数组中的每一项都使用indexOf检测新数组里是否有当前值，有的话会返回下标，没有返回-1，返回-1就代表这个值在新数组中不存在，需要向新数组中添加这个值

let arr = [1, 2, 2, 3, 4, 5, 6, 1, 2, 3] // 原数组
let len = arr.length // 数组长度
let newArr = [] // 用于去重的数组

// 这种使用空数组进行去重的方法比较通俗易懂 
arr.forEach(item => {
    if (newArr.indexOf(item) == -1) { 
// 使用indexOf检测空数组里是否有当前值,数组中不存在的话会返回-1,这种情况下我们就可以之间往数组里面添加内容了
        newArr.push(item)
    }
})

console.log(newArr) // [1, 2, 3, 4, 5, 6]

include去重(用法与indexOf相同)

let arr = [1, 2, 2, 3, 4, 5, 6, 1, 2, 3] // 原数组
let len = arr.length // 数组长度
let newArr = [] // 用于去重的数组

// 这种使用空数组进行去重的方法比较通俗易懂 
arr.forEach(item => {
    if (!newArr.includes(item)) { 
// 使用includes检测空数组里是否有当前值,数组中不存在的话会返回false,这种情况下我们就可以之间往数组里面添加内容了
        newArr.push(item)
    }
})

console.log(newArr) // [1, 2, 3, 4, 5, 6]

Set结构去重(较为简单)

let arr = [1, 2, 2, 3, 4, 5, 6, 1, 2, 3] // 原数组
// 这里使用了ES6新增的一种数据结构Set结构,Set结构最大的特点就是它里面的内容不会出现重复值
// 我们这里使用Set结构去重后,再使用ES6的拓展运算符...的方式将去重后的数据展开到数组里面
// 因为Set结构与数组并不是同一种数据类型,数组中支持的方法Set结构暂未开放
// 所以为了避免出现使用Set结构调用数组的方法产生的问题 再这里要把Set结构转换回数组并返回
let newArr = [...(new Set(arr))]

console.log(newArr) // [1, 2, 3, 4, 5, 6]

Array.reduce方法去重 

let list = '123123'.split('')
const newList = list.reduce((pre, cur) => {
    return pre.includes(cur) ? pre : pre.concat(cur)
}, [])
console.log(newList) // [1, 2, 3]