js 数组去重

js 数组去重

该文章对常见的数组去重进行归纳和总结；其他包含普通数组去重和数组对象去重

一、数组去重

1、利用 ES6 中的 Set 方法去重

Set 为 ES6 新增的一个对象，允许存储任何类型（原始值或引用值）的唯一性

let arr = ['亚瑟', '安吉拉', '安吉拉', '后羿', '嬴政', '亚瑟']

function unique(arr) {
    return Array.from(new Set(arr))
}

console.log(unique(arr))		// ['亚瑟', '安吉拉', '后羿', '嬴政']

也可以简便为

let arr = ['亚瑟', '安吉拉', '安吉拉', '后羿', '嬴政', '亚瑟']

console.log(...new Set(arr))	// ['亚瑟', '安吉拉', '后羿', '嬴政']

2、 使用双重 for 循环，再利用数组的 splice 方法去重（ES5常用）

let arr = ['亚瑟', '安吉拉', '安吉拉', '后羿', '嬴政', '亚瑟']

function unique(arr) {
    for (let i = 0, len = arr.length; i < len; i++) {
        for (let j = i + 1, len = arr.length; j < len; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1)
                j--				// 每删除一个数j的值就减1
                len--			// j值减少时len也要相应减1（减少循环次数，节省性能）
            }
        }
    }
    return arr
}

console.log(unique(arr))		// ['亚瑟', '安吉拉', '后羿', '嬴政']

3、利用数组的 indexOf 方法去重

array.indexOf(item, statt) 返回数组中某个指定的元素的位置，没有则返回 -1

let arr = ['亚瑟', '安吉拉', '安吉拉', '后羿', '嬴政', '亚瑟']

function unique(arr) {
    let arr1 = []
    for (let i = 0, len = arr.length; i < len; i++) {
        if (arr1.indexOf(arr[i]) === -1) {
            arr1.push(arr[i])
        }
    }
    return arr1
}

console.log(unique(arr))		// ['亚瑟', '安吉拉', '后羿', '嬴政']

4、利用数组的 sort 方法去重（相邻元素对比法）

array.sort(function) 参数必须是函数，可选，默认升序

let arr = ['亚瑟', '安吉拉', '安吉拉', '后羿', '嬴政', '亚瑟']

function unique(arr) {
    arr = arr.sort()
    
    let arr1 = [arr[0]]
    for (let i = 1, len = arr.length; i < len; i++) {
        if (arr[i] !== arr[i - 1]) {
            arr1.push(arr[i])
        }
    }
    
    return arr1
}

console.log(unique(arr))		// ['亚瑟', '安吉拉', '后羿', '嬴政']

5、利用对象的属性不能相同的特点去重（不建议用，有缺陷）

用数组项作为对象的属性会自动去除相同的值

let arr = ['亚瑟', '安吉拉', '安吉拉', '后羿', '嬴政', '亚瑟']

function unique(arr) {
    let arr1 = []
    let obj = {}
    for (let i = 0, len = arr.length; i < len; i++) {
        if (!obj[arr[i]]) {
            arr1.push(arr[i])
            obj[arr[i]] = 1
        } else {
            obj[arr[i]]++
        }
    }
    return arr1
}

console.log(unique(arr))		// ['亚瑟', '安吉拉', '后羿', '嬴政']

6、利用数组的 includes 去重

arr.includes（指定元素（必填）, 指定索引值（可选，默认值为0）），有值返回 true，没有则返回 false

let arr = ['亚瑟', '安吉拉', '安吉拉', '后羿', '嬴政', '亚瑟']

function unique(arr) {
    let arr1 = []
    for (let i = 0, len = arr.length; i < len; i++) {
        if (!arr1.includes(arr[i])) {		// 检索arr1中是否含有arr中的值
            arr1.push(arr[i])
        }
    }
    return arr1
}

console.log(unique(arr))		// ['亚瑟', '安吉拉', '后羿', '嬴政']

7、利用数组的 filter 方法去重

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，array.filter(function(currentValue, index, arr), thisValue)

currentValue：当前元素的值（必选参数）、index：当前元素的索引值（可选）、arr：当前元素属于的数组对象（可选）、thisValue：对象作为该执行回调时使用，传递给函数，用作 “this” 的值，默认undefined（可选）

let arr = ['亚瑟', '安吉拉', '安吉拉', '后羿', '嬴政', '亚瑟']

function unique(arr) {
    return arr.filter(function(item, index) {
    	return arr.indexOf(item, 0) === index
    })
}

console.log(unique(arr))		// ['亚瑟', '安吉拉', '后羿', '嬴政']

8、利用函数递归去重

let arr = ['亚瑟', '安吉拉', '安吉拉', '后羿', '嬴政', '亚瑟']

function unique(arr) {
    let arr1 = arr
    let len = arr1.length
    arr1.sort((a,b) => {
        return a - b
    })
    
    function loop(index) {
        if (index >= 1) {
            if (arr1[index] === arr1[index - 1]) {
                arr1.splice(index, 1)
            }
            loop(index - 1)
        }
    }
    
    loop(len - 1)
    return arr1
}

console.log(unique(arr))		// ['亚瑟', '安吉拉', '后羿', '嬴政']

9、利用 ES6 中的 Map 方法去重

let arr = ['亚瑟', '安吉拉', '安吉拉', '后羿', '嬴政', '亚瑟']

function unique(arr) {
    let map = new Map()
    let arr1 = []
    for (let i = 0, len = arr.length; i < len; i++) {
        if (map.has(arr[i])) {
            map.set(arr[i], true)
        } else {
            map.set(arr[1], false)
            arr1.push(arr[i])
        }
    }
    return arr1
}

console.log(unique(arr))		// ['亚瑟', '安吉拉', '后羿', '嬴政']

10、利用 hasOwnProperty

let arr = ['亚瑟', '安吉拉', '安吉拉', '后羿', '嬴政', '亚瑟']

function unique(arr) {
    let obj = {}
    return arr.filter(function(item, index, arr) {
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}

console.log(unique(arr))		// ['亚瑟', '安吉拉', '后羿', '嬴政']

11、利用 reduce + includes

let arr = ['亚瑟', '安吉拉', '安吉拉', '后羿', '嬴政', '亚瑟']

function unique(arr) {
    return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], [])
}

console.log(unique(arr))		// ['亚瑟', '安吉拉', '后羿', '嬴政']

二、数据对象去重

1、使用 reduce 函数

let arr = [
    { id: 1, name: '亚瑟' }，
    { id: 2, name: '安吉拉' }，
    { id: 3, name: '后羿' }，
    { id: 1, name: '艾琳' }，
    { id: 3, name: '嬴政' }
]

function arrDistinctByProp(arr, prop) {
    let obj = {}
    return arr.reduce(function(preValue, item) {
        obj[item[prop]] ? '' : obj[item[prop]] = true && preValue.push(item)
        return preValue
    }, [])
}

// 根据id去重
let newArr = arrDistinctByProp(arr, 'id')

console.log(newArr)

2、使用 filter 函数

let arr = [
    { id: 1, name: '亚瑟' }，
    { id: 2, name: '安吉拉' }，
    { id: 3, name: '后羿' }，
    { id: 1, name: '艾琳' }，
    { id: 3, name: '嬴政' }
]

function arrDistinctByProp(arr, prop) {
    return arr.filter(function(item, index, self) {
        return self.findIndex(el => el[prop] == item[prop]) === index
    })
}

// 根据id去重
let newArr = arrDistinctByProp(arr, 'id')

console.log(newArr)