JS数组去重的十种方式

37 阅读2分钟

一、indexOf该方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

const unique1 = (arr) => {
    let newArray = []
    for (let i = 0; i < arr.length; i++) {
        if (newArray.indexOf(arr[i]) === -1) {
            newArray.push(arr[i])
        }
    }
    return newArray
}

二、includes 该方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。

const unique2 = (arr) => {
    let newArray = []
    for (let i = 0; i < arr.length; i++) {
        if (!newArray.includes(arr[i])) {
            newArray.push(arr[i])
        }
    }
    return newArray
}

三、filter 该方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

const unique3 = (arr) => {
    let newArray = arr.filter((item, index) => {
        return arr.indexOf(item) === index
    })
    return newArray
}

四、reduce该方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值

const unique4 = (arr) => {
    let newArray = arr.reduce((acc, v) => {
        return acc.includes(v) ? acc : [...acc, v]
    }, [])
    return newArray
}

五、SetES6中新增了数据类型set,set的一个最大的特点就是数据不重复。
Set函数可以接受一个数组(或类数组对象)作为参数来初始化,利用该特性也能做到给数组去重

const unique5 = (arr) => {
    const newArray = [...new Set(arr)]
    return newArray
}

六、Array.from 该方法可以将Set结构转换为数组

const unique6 = (arr) => {
    const newArray = Array.from(new Set(arr))
    return newArray
}

七、ES6的Map 创建一个空Map数据结构,遍历需要去重的数组,把数组的每一个元素作为key存到Map中

const unique7 = (arr) => {
    let map = new Map()
    let newArray = []
    for (let i = 0; i < arr.length; i++) {
        if (!map.has(arr[i])) {
            map.set(arr[i])
            newArray.push(arr[i])
        }
    }
    return newArray
}

八、双重for循环

const unique8 = (arr) => {
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1)
            }
        }
    }
    return arr
}

九、sort 该方法对数组的元素进行排序,并返回数组。

const unique9 = (arr)=> {
    let afterSort = arr.sort()
    let newArray = [afterSort[0]]
    for (let i = 1; i < afterSort.length; i++) {
        if (afterSort[i] !== afterSort[i - 1]) {
            newArray.push(afterSort[i])
        }
    }
    return newArray
}

十、forEach 该方法对数组的每个元素执行一次给定的函数。

const unique10 = (arr)=>{
    let newArray = []
    arr.forEach(element => {
        return newArray.includes(element) ? newArray : newArray.push(element)}
    );
    return newArray
}

引用:zhuanlan.zhihu.com/p/461488452