> 웹 프론트엔드 > JS 튜토리얼 > js 배열 중복 제거 방법의 성능 테스트 비교

js 배열 중복 제거 방법의 성능 테스트 비교

不言
풀어 주다: 2018-09-20 16:36:26
원래의
2380명이 탐색했습니다.

이 기사의 내용은 js 배열 중복 제거 방법의 성능 테스트 비교에 대한 것입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

1. 테스트 템플릿

어레이 중복 제거는 일반적인 문제이며 인터넷에 다양한 솔루션이 떠돌고 있습니다

이러한 솔루션의 성능을 테스트하기 위해 테스트 템플릿을 작성했습니다. , 배열 중복 제거에 소요되는 시간을 계산하는 데 사용됩니다

// distinct.js

let arr1 = Array.from(new Array(100000), (x, index)=>{
    return index
})

let arr2 = Array.from(new Array(50000), (x, index)=>{
    return index+index
})

let start = new Date().getTime()
console.log('开始数组去重')

function distinct(a, b) {
    // 数组去重
}

console.log('去重后的长度', distinct(arr1, arr2).length)

let end = new Date().getTime()
console.log('耗时', end - start)
로그인 후 복사

여기서 길이가 각각 10W와 5W인 두 개의 배열이 생성됩니다

그런 다음 independent() 메서드를 통해 두 배열을 병합하고 제거합니다. 중복된 항목의 양

크지도 작지도 않지만 이미 몇 가지 문제를 설명할 수 있습니다

2. Array.filter() + indexOf

이 방법의 아이디어 두 개의 Array를 결합하여 하나의 배열로 만든 다음 ES6의 Array.filter()를 사용하여 배열을 순회하고 indexOf와 결합하여 중복을 제외하는 것입니다

function distinct(a, b) {
    let arr = a.concat(b);    
    return arr.filter((item, index)=> {        
    return arr.indexOf(item) === index
    })
}
로그인 후 복사

이것이 배열입니다. 제가 불만을 제기한 중복 제거 방법은 매우 간단하지만 실용적인 성능인 것 같습니다. . .

예, 현실은 너무 잔인합니다. 길이가 15W인 배열을 처리하는 데 8427ms가 걸립니다

3 Double for 루프

가장 쉬운 방법은 다음과 같습니다. 외부 레이어는 요소를 반복하고 내부 루프는 중복이 있는지 확인합니다

중복된 값이 있는 경우 push() 또는 splice()를 사용할 수 있습니다

function distinct(a, b) {
    let arr = a.concat(b);
    for (let i=0, len=arr.length; i<len; i++) {
        for (let j=i+1; j<len; j++) {
            if (arr[i] == arr[j]) {
                arr.splice(j, 1);
                // splice 会改变数组长度,所以要将数组长度 len 和下标 j 减一
                len--;
                j--;
            }
        }
    }
    return arr
}
로그인 후 복사

하지만 이 방법은 메모리를 늘리면 효율성도 가장 낮습니다

4.for...of + include()

이중 for 루프의 업그레이드 버전으로, 외부 레이어가 대체됩니다. for...of 문 루프를 사용하여 내부 루프를 include()

먼저 빈 배열을 만듭니다. include()

function distinct(a, b) {
    let arr = a.concat(b)
    let result = []
    for (let i of arr) {
        !result.includes(i) && result.push(i)
    }
    return result
}
로그인 후 복사

이 방법은 filter + indexOf

for 루프를 사용하여 filter()의 내부 논리를 구현한 다음 indexOf()를 사용할 수도 있습니다. indexof를 포함하여 with

을 대체합니다. 기간은 비교적 근접

5입니다. 인접한 요소가 동일한지 비교하여 중복을 제거합니다

function distinct(a, b) {
    let arr = a.concat(b)
    arr = arr.sort()
    let result = [arr[0]]

    for (let i=1, len=arr.length; i<len; i++) {
        arr[i] !== arr[i-1] && result.push(arr[i])
    }
    return result
}
로그인 후 복사

이 방법은 정렬과 루프를 한 번만 수행하므로 위 방법보다 효율성이 높습니다

6 .new Set()

ES6에는 Set 데이터 구조가 추가되어 배열과 유사하지만 Set의 멤버는 고유합니다

이 기능을 기반으로 배열을 만드는 데 매우 적합합니다. Heavy

function distinct(a, b) {
    return Array.from(new Set([...a, ...b]))
}
로그인 후 복사

Set를 사용하여 15W의 데이터를 처리하는 데 얼마나 걸리나요?

야옹야옹? ? ? 57ms? ? 나는 눈이 부시지 않은가? ?

然后我在两个数组长度后面分别加了一个0,在 150W 的数据量之下...

居然有如此高性能且简洁的数组去重办法?!

七、for...of + Object

这个方法我只在一些文章里见过,实际工作中倒没怎么用

首先创建一个空对象,然后用 for 循环遍历

利用对象的属性不会重复这一特性,校验数组元素是否重复

function distinct(a, b) {
    let arr = a.concat(b)
    let result = []
    let obj = {}

    for (let i of arr) {
        if (!obj[i]) {
            result.push(i)
            obj[i] = 1
        }
    }

    return result
}
로그인 후 복사

当我看到这个方法的处理时长,我又傻眼了

15W 的数据居然只要 16ms ??? 比 Set() 还快???

然后我又试了试 150W 的数据量...

위 내용은 js 배열 중복 제거 방법의 성능 테스트 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿