JavaScript 배열의 중복을 제거하는 5가지 방법에 대해 자세히 알아보세요.

이 기사에서는 es6 세트 중복 제거, 이중 for 루프 중복 제거, 중복 제거 인덱스 등을 포함하여 배열 중복 제거와 관련된 문제를 주로 소개하는 JavaScript에 대한 관련 지식을 제공합니다. 함께 살펴보도록 하겠습니다. 도움이 되기를 바랍니다. 모두에게.

[관련 권장 사항: JavaScript 비디오 튜토리얼, web front-end]

가장 간단한 방법, ES6 Set 중복 제거(가장 권장)

이 방법은 일상적인 개발에서 제가 가장 좋아하는 방법입니다. 사용 방법은 모든 중복 제거 중 가장 간단합니다. 그리고 저는 게으른 암환자입니다.

new Set은 ES6에 도입된 새로운 유형입니다. 배열과 다른 점은 Set 유형의 데이터는 반복되는 값을 가질 수 없다는 것입니다. 물론 배열의 일부 Set 메서드는 호출할 수 없습니다.

사용 방법: 실제로는 매우 간단합니다. 배열을 Set 데이터로 변환한 다음 다시 변환하여 중복 제거를 완료합니다.

    const arr = [1,1,2,2,3,3,4,4,5,5];
    const setData = Array.from(new Set(arr));
    console.log(setData);

Illustration

하지만 세트 중복 제거에는 참조 유형 데이터를 중복 제거할 수 없다는 단점이 있습니다. 예를 들어 객체 배열이 있습니다.

범례:

따라서 배열에 값 유형 데이터(예: 모든 문자열 또는 모든 숫자)가 포함된 경우 중복 제거를 위해 Set을 사용하는 것이 첫 번째 선택이어야 하며 이를 통해 많은 문제를 줄일 수 있습니다.

중복을 제거하는 가장 오래된 방법, double for 루프

오래 전에는 Set, map, filter가 없었을 때에는 double for 루프가 중복을 제거하는 거의 유일한 방법이었습니다.

//双重循环去重
const handleRemoveRepeat = (arr) => {
    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);
                j--;
                len--;
            }
        }
    }
    return arr;
};

범례:

여기에 흥미로운 점이 있습니다. 아마도 for 루프의 초기 표현식에서 두 가지가 선언된 이유를 잘 이해하지 못할 수도 있습니다. let i = 0;len = arr.length;

답을 드리겠습니다:

세 개의 원은 for 루프의 세 가지 표현인 초기 표현, 판단 표현, 자동 증가 표현을 나타냅니다. 그 중 초기식은 for 루프 시작 시 한 번 실행되고 이후에는 다시 실행되지 않으나, 판정식과 자동 증가식은 루프를 반복할 때마다 실행됩니다.

말이 잘 이해가 안 되시더라도 상관없어요. 제가 그림을 그렸어요.

후자의 원에 있는 콘텐츠가 루프에 빠지는 것을 발견했을 수도 있습니다.

하지만 이것이 초기 len = arr.length와 무슨 관련이 있나요?

처음에 정의된 경우 각 루프는 arr.length를 사용해야 합니다. 길이는 메서드에 따라 소비되지만 for 루프에서는 이 소비가 메서드에 의해 소비됩니다. . 루프를 10,000번 반복해야 하는 경우 length는 10,000번 실행됩니다.

가장 쓸모없는 가중치 제거 방법, indexOf 가중치 제거

indexOf는 여전히 비교적 간단하고 쓸모가 없습니다. 왜 쓸모없다고 하는가? indexOf 메소드가 실제로 위의 이중 for 루프보다 간단하다고 말하기는 어렵습니다. 간단하다고 가정해 보겠습니다. 그는 다시 시작하기 더 쉽게 만드는 Set 메서드가 없습니다. 그래서 쓸모가 없습니다.

//去重
const handleRemoveRepeat = (arr) => {
    let repeatArr = [];
    for (let i = 0,len = arr.length ; i < len; i++) 
     if (repeatArr.indexOf(arr[i]) === -1)  repeatArr.push(arr[i])
    return repeatArr;
}

범례:

마찬가지로, 위의 if와 for에는 중괄호가 없다는 것을 발견했을 수도 있습니다. yes; 필요한 경우가 아니면 추가로 {}를 추가할 필요가 없습니다.

이것이 읽을 수 없다고 생각할 수도 있지만 이것은 흥미로운 부분입니다. 이는 유틸리티에 숨겨져 있는 메서드입니다. 이는 비즈니스 로직과 관련이 없으며 매우 읽을 필요도 없습니다.

게다가 이렇게 쓰는 이유는 또 있습니다. 사람들에게 더 큰 시각적 효과를 줄 수 있기 때문이죠. 인간의 말로 표현하자면 -----매우 가식적입니다.

indexOf와 유사한 중복 제거 방법, include deduplication

Include를 사용한 중복 제거 방법은 indexOf와 매우 유사하다고 할 수 없으며 기본적으로 동일합니다. 달라진 것은 판단 방식뿐이다.

심사방법이 더 간단해요. 배열의 각 요소를 반복하고 새 배열을 사용하여 현재 배열에 배열 항목이 포함되어 있는지 확인합니다. 그렇지 않은 경우

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

Legend

includes 메서드를 추가하면 다른 시나리오에서도 여전히 매우 유용합니다. .

最有趣的去重方法，使用filter去重。

使用filter配合indexOf进行的去重过程，真的可以非常的简单且富含趣味性。

//去重
const handleRemoveRepeat = (arr) => arr.filter((item,index) => arr.indexOf(item,0) === index);

是的，没了，就一行。

图例

您是否没有反应过来？乍一看，不知道他是怎么完成去重的。

小问题，我为您解答疑惑。

indexOf的特性是返回被查找的目标中包含的第一个位置的索引

如图，下标为0和下标为4的位置存储的都是“1”。但是indexOf()只返回了0。因为indexOf的特性是返回被查找的目标中包含的第一个位置的索引。

同样的，我们可以利用这个特性。来完成去重，文字描述恐怕很难表达准确，您可以看看下面的这张图。

如果要去重对象数组怎么办？

去除对象数组的方式他并不是很稳定，这不像我们去重值类型数据的数组，上面的五种方法随便复制一种，往里面一调用就好了。绝对不会出问题。

但是对象数组去重，需要有一个去重条件，也就是根据哪个字段进行去重。

用双重循环去重举个例子：

图例

如上图，我们就是拿数据的id作为去重条件的。

像这样的对象数组就不能直接提供方法，因为每一个场景下的对象数组都不一定一样。我这是根据id去重，万一其他地方需要根据其他字段去重呢。

所以，如果您需要去重对象，根据上方的截图中的代码。使用双重for循环的方法，自己自定义一个可以满足您当前业务需求的去重方法。

【相关推荐：JavaScript视频教程、web前端】

위 내용은 JavaScript 배열의 중복을 제거하는 5가지 방법에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!