가끔 애플리케이션을 구축할 때 성능이 핵심이거나 적어도 중요한 동인이 되는 경우가 있습니다. 특히 대규모 데이터 세트나 실시간 요구 사항을 처리할 때는 더욱 그렇습니다. JavaScript에서 가장 일반적인 작업 중 하나는 컬렉션에 일부 값이 존재하는지 확인하는 것입니다. 가장 자주 사용되는 두 가지 대안은 Array.includes()와 Set.has()입니다. 둘 다 작동하지만 실제로는 Set.has()가 Array.includes보다 더 잘 작동합니다. 그 이유를 자세히 알아보고 언제 어떤 대안을 사용해야 할지 결정해 보겠습니다.
사용이 매우 간단해 보이지만 구현 방식이 다른 두 가지 메서드, 즉 Array.includes()와 Set.has()가 있습니다.
Array.includes()
includes() 메소드는 주어진 값이 배열 내에 존재하는지 확인합니다.
O(n)의 시간 복잡도를 활용하므로 배열의 길이가 길수록 값 확인에 더 오랜 시간이 걸립니다.
Array.includes()가 처음부터 끝까지(또는 값을 찾을 때까지) 배열을 검색하는데, 배열이 클수록 시간이 오래 걸리기 때문입니다.
Set.has()
Set의 has() 메소드는 주어진 값이 존재하는지 확인하지만 훨씬 더 빠르게 수행됩니다.
Set.has()는 상수 시간 조회 또는 O(1) 시간 복잡도를 허용하는 해시 테이블 기반 구조를 사용합니다.
배열과 달리 집합은 고유한 값을 처리하도록 만들어졌으므로 내부에 중복된 값이 없으며 조회 시간이 더 길어집니다.
Set.has()를 사용하면 JavaScript는 세트에 항목 수에 관계없이 한 번의 직접 작업으로 항목을 찾을 수 있습니다. 예를 들어 백만 개가 포함된 집합에 값이 있는지 확인하는 동안 Set.has()에 소요되는 시간은 10을 확인하는 것과 정확히 같습니다.
반면에 Array.includes()는 관심 있는 항목을 찾거나 맨 끝에 도달할 때까지 각 요소를 왼쪽에서 오른쪽으로 순차적으로 검사합니다. 즉, 크기가 길수록 확인 시간이 걸리며, 특히 항목이 거의 끝에 가까워지고 문제의 항목이 없는 경우에는 더욱 그렇습니다.
다음은 예를 자세히 살펴보는 것입니다.
const bigArray = Array.from({ length: 1000000 }, (_, i) => i);
const bigSet = new Set(bigArray);
const valueToFind = 999999;
// Array.includes (O(n)) - Slower for large arrays
console.time("Array.includes");
bigArray.includes(valueToFind);
console.timeEnd("Array.includes");
// Set.has (O(1)) - Faster for large sets
console.time("Set.has");
bigSet.has(valueToFind);
console.timeEnd("Set.has");
이것을 실행하면 Set.has()가 대규모 배열에서 Array.includes()보다 훨씬 뛰어난 성능을 발휘한다는 것을 알 수 있습니다. 실제로 이러한 차이는 더 부드러운 애니메이션, 더 빠른 로드 시간 또는 서버의 리소스 사용량 감소로 이어질 수 있습니다.
이것은 모두 달성하려는 목표에 따라 다릅니다. 간략한 요약은 다음과 같습니다.
다음과 같은 경우 Set.has()를 사용하세요.
다음과 같은 경우 Array.includes()를 사용하세요.
차단된 단어 목록을 기준으로 이름을 필터링하는 사용자 검색 기능을 구현한다고 상상해 보세요. 차단된 단어가 수백 개이고 자주 검색하는 경우 차단된 단어에 대한 설정을 사용하면 각 검색 확인이 더 빨라질 수 있습니다.
const bigArray = Array.from({ length: 1000000 }, (_, i) => i);
const bigSet = new Set(bigArray);
const valueToFind = 999999;
// Array.includes (O(n)) - Slower for large arrays
console.time("Array.includes");
bigArray.includes(valueToFind);
console.timeEnd("Array.includes");
// Set.has (O(1)) - Faster for large sets
console.time("Set.has");
bigSet.has(valueToFind);
console.timeEnd("Set.has");
작은 경우에도 세트는 작업을 효율적이고 예측 가능하게 유지하는 데 도움이 됩니다. 또한 차단 단어 목록이 늘어나더라도 이미 확장 가능한 솔루션을 보유하고 있는 것입니다.
성능: Set.has()는 O(1) 시간 복잡도를 제공하므로 대규모 컬렉션의 경우 O(n)을 사용하는 Array.includes()보다 훨씬 빠릅니다
적합성: 세트는 고유한 값을 위해 설계되었으므로 자연스럽게 조회에 최적화됩니다. 배열은 중복 값이 있는 경우 더 유연하지만 존재 여부를 확인하는 속도는 더 느립니다.
확장성: 데이터가 증가함에 따라 Set.has()는 계속해서 좋은 성능을 발휘하는 반면 Array.includes()는 느려집니다.
Set.has()와 Array.includes() 중에서 선택할 때 데이터 세트의 크기와 특성을 아는 것이 항상 중요합니다. Array.includes()는 작은 데이터 세트에는 완벽하게 적합하지만 Set.has()는 속도가 중요한 상황에서 귀중한 도구입니다. 올바른 데이터 구조는 코드를 크게 변경하지 않고도 JavaScript 애플리케이션을 더 빠르고 효율적으로 최적화하는 데 도움이 될 수 있습니다.
그러므로 무언가가 있는지 확인할 때마다 스스로에게 물어봐야 합니다. 그것이 어레이에 대한 작업인지, 아니면 세트의 힘을 사용할 수 있는지? 이를 올바르게 수행하는 것이 애플리케이션에 필요한 차이일 수도 있습니다.
위 내용은 항목을 찾는 데 Set.has()가 Array.includes()보다 빠른 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
