js数组去重的几种常用方法(好用!)

在日常开发中,经常要处理一下接口数据,数组去重是处理数据的高频操作。
这里简单介绍一些常用的好方法。

一、数组元素是基本数据类型

	const arr = [1, 2, 3, 4, 1, 2, 3, 4, 1, 1, 5, 2, 4]
  1. 利用ES6的新的数据结构 Set
	const uniqueArr = (arr) => Array.from(new Set(arr))
  1. 利用对象
	const uniqueArr = (arr) => {
		let result = []
        let obj = {}
        arr.forEach(c => {
            if (!obj[c]) {
                result.push(c)
                obj[c] = true
            }
        })
        return result
	}
  1. 利用 filter
	const uniqueArr = (arr) => arr.filter((c, i) => arr.indexof(c) === i)
  1. 利用 reduce (forEach 和 map 同理)
	const uniqueArr = (arr) => {
		return arr.reduce((pre, cur) => {
			if (!pre.includes(cur)) {
				pre.push(cur)
			}
			return pre
		}, [])
	}
	const uniqueArr = (arr) => {
        return arr.reduce((pre, cur) => {
            if (!pre.some(c => c === cur)) {      // 这里的 some 改用 find 也可以
                pre.push(cur)
            }
            return pre
        }, [])
    }
	const uniqueArr = (arr) => {
        let result = []
        arr.forEach(c => {
            if (!result.includes(c)) {
                result.push(c)
            }
        })
        return result
    }

执行 uniqueArr(arr) ,返回结果如下:
js数组去重的几种常用方法(好用!)_第1张图片

二、数组元素是引用数据类型(对象)

	const arr = [
        { id: 3, name:'桃子' },
        { id: 1, name:'苹果' },
        { id: 3, name:'桃子' },
        { id: 1, name:'苹果' },
        { id: 1, name:'苹果' },
        { id: 2, name:'雪梨' },
        { id: 4, name:'蜂蜜' },
        { id: 1, name:'苹果' },
        { id: 2, name:'雪梨' },
    ]

注意:当数组元素是对象时,无法使用 ES6 的 Set 去达到数组去重的目的。 (以下方法中 prop 参数表示以数组元素的某个属性为基准进行过滤重复对象)

  1. 利用对象
	const uniqueArr = (arr, prop) => {
		let result = []
        let obj = {}
        arr.forEach(c => {
            if (!obj[c[prop]]) {
                result.push(c)
                obj[c[prop]] = true
            }
        })
        return result
	}
  1. 利用 reduce (forEach 和 map 同理)
    const uniqueArr = (arr, prop) => {
        return arr.reduce((pre, cur) => {
            if (!pre.some(c => c[prop] === cur[prop])) {	// 这里的 some 改用 find 也可以
                pre.push(cur)
            }
            return pre
        }, [])
    }

执行 uniqueArr(arr, ‘name’) ,返回结果如下:
js数组去重的几种常用方法(好用!)_第2张图片

三、组合通用

	const uniqueArr = (arr, prop) => {
		if (!prop) {
			return Array.from(new Set(arr))
		} else {
			return arr.reduce((pre, cur) => {
	            if (!pre.some(c => c[prop] === cur[prop])) {
	                pre.push(cur)
	            }
	            return pre
	        }, [])
		}
	}

点个赞吧!

你可能感兴趣的:(js基础,javascript)