JavaScript 배열 중복 제거 방법 요약(코드 포함)

이 기사는 JavaScript 배열 중복 제거 방법(코드 포함)을 요약한 것입니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

어레이 중복 제거는 여전히 일상적인 개발에서 자주 사용되며, 인터넷에서 쉽게 접할 수 있는 주제이기도 합니다. 따라서 많은 사람들이 어레이 중복 제거에 대해 언급하고 있기 때문에 이 글을 쓰는 목적은 정리하고 정리하는 것입니다. 진심으로, 당신은 얼마나 알고 있나요? 아니면 개발 중에 중복 항목을 제거해야 하는 경우 더 나은 솔루션을 생각할 수 있습니까?

이번에는 가장 적절한 배열 중복 제거 방법을 알아보겠습니다. 호환성뿐만 아니라 성능과 코드 우아함도 고려해야 합니다.

나의 학습 경로는 Yan Yu(github: mqyqingfeng)의 학습 방법을 따라하는 것입니다. Yan Yu와 같은 뛰어난 사람들이 주도해 주셔서 감사합니다. 그래서 더 많이 연습하고 결과를 얻습니다. 나는 미래의 길에서 나 자신이 될 수 있기를 바랍니다.

1. 시작하기

function unique(origin) {
    var result = [];
    for(var i = 0; i < origin.length; i++) {
        var arrayItem = origin[i];

        for(var j= 0; j< result.length; j++) {
            var resultItem = result[j];
            
            // 如果在结果数组循环中找到了该元素，则跳出循环，进入下一个源数组元素的判断
            if(resultItem === arrayItem) {
                break;
            }
        }
        
        // 如果把结果数组循环完都没有找到该元素，就将该元素压入结果数组中
        if(j === result.length) {
            result.push(arrayItem);
        }
    }
    return result;
}

var array = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;1&#39;, 0, &#39;c&#39;, 1, &#39;&#39;, 1, 0];
console.log(unique(array));  // ["a", "b", "c", "1", 0, 1, ""]

위 코드는 배열 중복 제거를 달성하는 가장 간단한 방법입니다. 장점은 호환성이 뛰어나다는 것입니다. 단점은 for 루프가 2개이고 시간 복잡도가 O(n^2)라는 것입니다. , 성능이 좋지 않습니다.

2. 배열의 indexOf 속성

배열의 indexOf 속성은 IE8 이하 버전에서만 이 방법을 지원하지 않습니다. 상대적으로 말하자면, IE8과 호환될 필요가 없다면 indexOf를 사용하여 요소가 배열에 있는지 확인해보세요.

function unique(origin){
    var result = [];
    for(var i = 0; i< origin.length; i++) {
        var item = origin[i];
        if(result.indexOf(item) === -1) {
            result.push(item);
        }
    }
    return result;
}

3. 배열의 필터 속성

배열의 filter() 메서드는 새 배열의 요소가 조건을 충족하는 지정된 배열의 모든 요소를 ​​확인합니다.

filter의 콜백에는 세 개의 매개변수가 있으며, 세 번째 매개변수는 현재 요소가 속한 배열 객체이므로 indexOf 속성을 계속 사용할 수 있습니다.

function unique(origin) {
    var result = origin.filter(function (item, index, array){
        // 获取元素在源数组的位置，只返回那些索引等于当前元素索引的值。
        return array.indexOf(item) === index;
    });
    return result;
}

filter는 IE9와 호환됩니다. 이 방법에는 for 루프가 없으며 주로 filter 및 indexOf 속성을 사용하므로 코드가 비교적 우아합니다.

4. Object

function unique(origin) {
    var result = [];
    var hashTable = {};
    for(var i = 0; i< origin.length; i++) {
        // 如果键对应的值，为真，意味着对象的键中已经有重复的键了。
        if(!hashTable[origin[i]]) {
        // 将元素作为对象的键，默认键对应的值为 true, 
            hashTable[origin[i]] = true;
            
            // 如果对象中没有这个键，则将这个元素放入结果数组中去。
            result.push(origin[i]);
        }
    }
    return result;
}

의 키 값을 사용합니다. 이 솔루션의 이벤트 복잡도는 O(n)이지만, 객체의 키는 기본적으로 문자열 유형입니다. 이것은 무엇을 의미합니까? 1' 은 키가 동일하므로 위 방법은 문자열과 숫자가 혼합된 중복 제거에는 적합하지 않습니다.

그래서 우리는 요소의 유형을 객체의 키에 넣습니다:

function unique(origin) {
    var result = [];
    var hashTable = {};
    for(var i = 0; i< origin.length; i++) {
        var current = origin[i];
        // 字符串拼接元素的类型和元素
        var key = typeof(current) + current;
        if(!hashTable[key]) {
            hashTable[key] = true;
            result.push(current);
        }
    }
    return result;
}

5. 배열의 정렬 방법

function unique(origin) {
    return origin.concat.sort().filter(function(item, index, array) {
        // !index 表示第 0 个元素应该被返回。
        return !index || item !== origin[index-1]
    })
}

function unique(array) {
    array.sort(); // 排序字符串
    array.sort(function(a, b) {
        return a-b; // 排序数字
    })
    
    for(let i=0; i<array.length; i++) {
        if(array[i] === array[i+1]) {
            array.splice(i, 1);
            i--; // 应该将前一个数删除，而不是删除后一个数。是因为元素被删除之后，后面元素的索引会迁移，所以要 i--;
        }
    }
    return array;
}

정렬 방법의 장점은 정렬을 사용하고 다음 요소를 반환한다는 것입니다. 이전 것과 같지 않습니다. 비교적 간단하고 직관적입니다. 단점은 요소의 원래 정렬 위치가 변경된다는 것입니다.

6. ES6 Set

ES6은 배열과 유사하지만 구성원의 값이 고유하고 중복된 값이 없는 새로운 데이터 구조인 Set을 제공합니다. Set에 값을 추가하면 유형 변환이 발생하지 않으므로 5와 '5'는 서로 다른 두 값입니다. Set은 "==="와 유사한 알고리즘을 사용하여 두 값이 동일한지 여부를 내부적으로 확인하지만 차이점은 NaN이 내부적으로 NaN과 동일한 것으로 간주된다는 것입니다.

Set은 배열로 변환될 수 있습니다. 중복 제거 구현이 쉽습니다

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

7. ES6 Map

ES6에는 새로운 Map 데이터 결과가 추가되었으며, 이전 객체 키 값 솔루션은 has 및 set 메소드를 통해 쉽게 최적화될 수 있습니다.

function unique(origin){
    const map = new Map()
    return origin.filter((item) => !map.has(item) && map.set(item, true))
}

8. 유형 판단

몇 가지 일반적인 데이터 유형은 감지할 수 없는 === 및 indexOf입니다. 예: === 和 indexOf 是无法检测的，举个例子：

console.log({} === {})  // false;

console.log(NaN === NaN)  // false;

console.log(/a/ === /a/);  // false;

console.log(1 === new String('1'))  // false;

var arr = [NaN];
console.log(arr.indexOf(NaN)); // -1

所以在判断的时候，如果数据里有 NaN 和对象时要避免使用 indexOf 和 ===rrreee

그래서 판단할 때 때때로, 데이터에 NaN과 개체가 있으면 indexOf 및 ===를 사용하지 마세요.

앞서 Set에서 언급했듯이 Set 메서드는 NaN을 제거할 수 있습니다.

요약

인터넷에서 데이터 중복 제거에 대해 읽는 것이 지겹지만, 그래도 이를 실천하고 요약하는 전용 기사를 쓰고 싶습니다. 내 작업에 더 많은 아이디어가 있으면 좋을 것 같습니다. 공유하고 결과물을 즐기는 사람들에게 감사드립니다.

🎜

위 내용은 JavaScript 배열 중복 제거 방법 요약(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!