ES6에서 어레이 중복을 제거하는 두 가지 방법 이해

이 글에서는 ES6에서 배열 중복을 제거하는 두 가지 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

관련 권장 사항: "javascript 비디오 튜토리얼"

ES6에서 배열 중복을 제거하는 두 가지 방법

방법 1:

function unique(arr) {
    const res = new Map();
    return arr.filter((a) => !res.has(a) && res.set(a, 1))
}

그렇습니다. 해보자 설명하다 왜.

Map object

Map은 ES6에서 제공하는 새로운 데이터 구조입니다.
지도 객체는 키-값 쌍을 저장합니다. 모든 값(객체 또는 기본 요소)을 키 또는 값으로 사용할 수 있습니다.

다음 표에는 Map 개체의 메서드가 나열되어 있습니다.

Method	Description
clear	모든 키/값 쌍을 삭제하고 반환 값은 없습니다.
delete	키를 삭제하고 true를 반환합니다. 삭제에 실패하면 false를 반환합니다.
forEach	각 요소에 대해 지정된 작업을 수행합니다.
get	지도 객체 키에 해당하는 값을 반환합니다.
has	키가 현재 지도 객체에 있는지 여부를 나타내는 부울 값을 반환합니다.
set	Map 객체에 대한 키/값 키/값 쌍을 설정합니다.

Map 객체에는 Map 객체의 키/값 쌍 수를 반환하는 크기 속성도 있습니다.

array

filter() 메소드의 filter() 메소드는 새로운 배열을 생성하며, 새로운 배열의 요소는 모두 확인하여 지정된 배열의 조건을 만족하는 요소입니다.

구문:

array.filter(function(currentValue,index,arr), thisValue)

매개변수 설명:

Arrow 함수

return arr.filter((a) => !res.has(a) && res.set(a, 1))
//上面的代码可以改成这样
return arr.filter(function(a){
    return !res.has(a) && res.set(a, 1);
});

1. 화살표 함수는 코드 작성 시 더 간결한 구문을 갖습니다.
2. 이것은 바인딩되지 않습니다.

자세히 알아보려면 여기를 클릭하세요

방법 1 분석

function unique(arr) {
    //定义常量 res,值为一个Map对象实例
    const res = new Map();
    
    //返回arr数组过滤后的结果，结果为一个数组
    //过滤条件是，如果res中没有某个键，就设置这个键的值为1
    return arr.filter((a) => !res.has(a) && res.set(a, 1))
}

방법 2:

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

이 방법에는 더 적은 코드가 필요합니다. 이는 놀라운 일입니다.
array

Array.from() 메소드의 from 메소드는 유사 배열 또는 반복 가능 객체(Array, Map, Set, String, TypedArray, 인수 객체 등 포함)에서 새 배열 인스턴스를 생성합니다

구문:

Array.from(arrayLike[, mapFn[, thisArg]])

Parameters	Description
arrayLike	필수, 실제 배열로 변환하려는 유사 배열 객체 또는 반복 가능 객체.
mapFn	선택사항, 이 매개변수를 지정하면 최종 생성된 배열이 이 함수에 의해 처리된 후 반환됩니다.
thisArg	선택사항, mapFn 함수 실행 시 this의 값입니다.

샘플 코드:

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

Array.from('foo');
// ["f", "o", "o"]

Set 개체

Set 개체를 사용하면 기본 값이든 개체 참조이든 상관없이 모든 유형의 고유한 값을 저장할 수 있습니다.
Set 객체는 값의 모음이며 삽입 순서대로 해당 요소를 반복할 수 있습니다.
세트의 요소는 한 번만 나타납니다. 즉, 세트의 요소는 고유합니다.

구문: ​​

new Set([iterable]);

매개변수:
iterable, 반복 가능한 객체(Array, Map, Set, String, TypedArray, 인수 객체 등 포함)를 전달하면 해당 요소가 모두 새 객체에 추가됩니다. 세트. 이 매개변수가 지정되지 않거나 해당 값이 널인 경우 새 세트는 비어 있습니다.

다음 표에는 Set 객체의 메서드가 나열되어 있습니다.

Method	Description
add	값을 추가하고 Set 개체 자체를 반환합니다.
clear	모든 키/값 쌍을 삭제하고 반환 값은 없습니다.
delete	키를 삭제하고 true를 반환합니다. 삭제에 실패하면 false를 반환합니다.
forEach	각 요소에 대해 지정된 작업을 수행합니다.
has	키가 현재 Set 객체에 있는지 여부를 나타내는 부울 값을 반환합니다.

Set对象和Map对象一样，都有一个size属性，他返回Set对象的值的个数。

方法二 分析

function unique(arr) {
    //通过Set对象，对数组去重，结果又返回一个Set对象
    //通过from方法，将Set对象转为数组
    return Array.from(new Set(arr))
}

总结

这次说的两个方法，真的很简单，主要就是靠ES6里的新东西，难度不大，代码简单，主要就是多用用就好了。

---

经人提醒，再补充一种，[...new Set(arr)]  

不懂 ...  的朋友，可以看这里 js扩展运算符

更多编程相关知识，请访问：编程学习！！

위 내용은 ES6에서 어레이 중복을 제거하는 두 가지 방법 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!