Set을 사용하여 JS 코드의 성능을 향상시키는 방법에 대한 자세한 설명

숫자, 문자열, 객체, 배열, 부울 등 기본적인 전역 객체에만 매달리는 개발자가 많을 거라 확신합니다. 많은 사용 사례에서는 이러한 기능이 필요합니다. 그러나 코드를 가능한 한 빠르고 확장 가능하게 만들고 싶다면 이러한 기본 유형만으로는 충분하지 않을 수도 있습니다.

이 글에서는 JS의 Set 개체가 코드를 더 빠르게 만드는 방법, 특히 확장성과 편의성을 높이는 방법에 대해 설명합니다. Array 및 Set 작동 방식에는 중복되는 부분이 많습니다. 그러나 Set을 사용하면 코드 실행 속도 측면에서 Array보다 유리합니다. Set对象如何让代码更快— 特别扩展性方便。 Array 和Set工作方式存在大量的交叉。但是使用Set会比Array在代码运行速度更有优势。

Set 有何不同

最根本的区别是数组是一个索引集合，这说明数组中的数据值按索引排序。

const arr = [A, B, C, D];
console.log(arr.indexOf(A)); // Result: 0
console.log(arr.indexOf(C)); // Result: 2

相比之下，set是一个键的集合。set不使用索引，而是使用键对数据排序。set 中的元素按插入顺序是可迭代的，它不能包含任何重复的数据。换句话说，set中的每一项都必须是惟一的。

主要的好处是什么

set 相对于数组有几个优势，特别是在运行时间方面：

• 查看元素：使用indexOf()或includes()检查数组中的项是否存在是比较慢的。
• 删除元素：在Set中，可以根据每项的的 value 来删除该项。在数组中，等价的方法是使用基于元素的索引的splice()。与前一点一样，依赖于索引的速度很慢。
• 保存 NaN：不能使用indexOf()或 includes() 来查找值 NaN，而 Set 可以保存此值。
• 删除重复项：Set对象只存储惟一的值,如果不想有重复项存在，相对于数组的一个显著优势，因为数组需要额外的代码来处理重复。

时间复杂度？

数组用来搜索元素的方法时间复杂度为0(N)。换句话说，运行时间的增长速度与数据大小的增长速度相同。

相比之下，Set用于搜索、删除和插入元素的方法的时间复杂度都只有O(1)，这意味着数据的大小实际上与这些方法的运行时间无关。

Set 究竟有多快？

虽然运行时间可能会有很大差异，具体取决于所使用的系统，所提供数据的大小以及其他变量，但我希望我的测试结果能够让你真实地了解Set的速度。 我将分享三个简单的测试和我得到的结果。

准备测试

在运行任何测试之前，创建一个数组和一个 Set，每个数组和 Set 都有100万个元素。为了简单起见，我从0开始，一直数到999999。

let arr = [], set = new Set(), n = 1000000;
for (let i = 0; i < n; i++) {
  arr.push(i);
  set.add(i);
}

测试1：查找元素

我们搜索数字123123

let result;
console.time('Array'); 
result = arr.indexOf(123123) !== -1; 
console.timeEnd('Array');
console.time('Set'); 
result = set.has(123123); 
console.timeEnd('Set');

• Array: 0.173ms
• Set: 0.023ms

Set 速度快了7.54倍

测试2：添加元素

console.time('Array'); 
arr.push(n);
console.timeEnd('Array');
console.time('Set'); 
set.add(n);
console.timeEnd('Set');

• Array: 0.018ms
• Set: 0.003ms

Set 速度快了6.73倍

测试3：删除元素

最后，删除一个元素，由于数组没有内置方法，首先先创建一个辅助函数：

const deleteFromArr = (arr, item) => {
  let index = arr.indexOf(item);
  return index !== -1 && arr.splice(index, 1);
};

这是测试的代码：

console.time('Array'); 
deleteFromArr(arr, n);
console.timeEnd('Array');
console.time('Set'); 
set.delete(n);
console.timeEnd('Set');

• Array: 1.122ms
• Set: 0.015ms

Set 速度快了74.13倍

总的来说，我们可以看到，使用Set 极大地改善运行时间。再来看看一些Set有用的实际例子。

案例1:从数组中删除重复的值

如果想快速地从数组中删除重复的值，可以将其转换为一个 Set。这是迄今为止过滤惟一值最简洁的方法:

const duplicateCollection = ['A', 'B', 'B', 'C', 'D', 'B', 'C'];
// 将数组转换为 Set
let uniqueCollection = new Set(duplicateCollection);
console.log(uniqueCollection) // Result: Set(4) {"A", "B", "C", "D"}
// 值保存在数组中
let uniqueCollection = [...new Set(duplicateCollection)];
console.log(uniqueCollection) // Result: ["A", "B", "C", "D"]

案例2：谷歌面试问题

问题：

给定一个整数无序数组和变量 sum，如果存在数组中任意两项和使等于 sum 的值，则返回true。否则,返回false。例如，数组[3,5,1,4]和 sum = 9，函数应该返回true，因为4 + 5 = 9。

解答

解决这个问题的一个很好的方法是遍历数组，创建 Set

Set의 차이점은 무엇인가요

가장 근본적인 차이점은 배열이 인덱스 컬렉션이라는 것입니다. 즉, 배열의 데이터 값이 인덱스별로 정렬된다는 의미입니다. 🎜

const findSum = (arr, val) => {
  let searchValues = new Set();
  searchValues.add(val - arr[0]);
  for (let i = 1, length = arr.length; i < length; i++) {
    let searchVal = val - arr[i];
    if (searchValues.has(arr[i])) {
      return true;
    } else {
      searchValues.add(searchVal);
    }
  };
  return false;
};

🎜반면에 set는 키 모음입니다. set는 인덱스를 사용하지 않지만 키를 사용하여 데이터를 정렬합니다. set의 요소는 삽입 순서대로 반복 가능하며 중복 데이터를 포함할 수 없습니다. 즉, 세트의 각 항목은 고유해야 합니다. 🎜

주요 이점은 무엇입니까

🎜set는 특히 런타임 측면에서 배열에 비해 여러 가지 장점이 있습니다. 🎜

• 요소 보기 : indexOf() 또는 includes()를 사용하여 배열의 항목이 존재하는지 확인하는 것이 더 느립니다.
• 요소 삭제: 설정에서 값을 기준으로 각 항목을 삭제할 수 있습니다. 배열에서 동등한 방법은 요소 기반 인덱싱을 사용하는 splice()입니다. 이전 요점과 마찬가지로 인덱스에 의존하는 것은 느립니다.
• NaN 저장: indexOf() 또는 includes()를 사용하여 NaN 값을 찾을 수 없습니다. code> > 및 <code>Set을 사용하면 이 값을 저장할 수 있습니다.
• 중복 항목 삭제: Set 개체는 고유한 값만 저장합니다. 중복 항목이 존재하지 않도록 하려면 배열에 비해 상당한 이점이 있습니다. 중복을 처리하려면 추가 코드가 필요합니다.

시간복잡도?

🎜배열의 요소를 검색하는 데 사용되는 방법의 시간 복잡도는 0(N)입니다. 즉, 런타임은 데이터 크기와 동일한 속도로 증가합니다. 🎜🎜반대로 요소 검색, 삭제, 삽입을 위한 Set 메서드의 시간 복잡도는 O(1)에 불과합니다. 즉, 데이터 크기가 실제로 이러한 메소드의 실행 시간과는 아무런 관련이 없습니다. 🎜

얼마나 빨리 설정되나요?

🎜실행 시간은 사용된 시스템, 제공되는 데이터의 크기 및 기타 변수에 따라 크게 달라질 수 있지만, 제 테스트 결과를 통해 ​​설정에 대한 현실적인 아이디어를 얻을 수 있기를 바랍니다. 속도. 세 가지 간단한 테스트와 제가 얻은 결과를 공유하겠습니다. 🎜

테스트 준비

🎜 테스트를 실행하기 전에 배열과 세트, 각 배열과 세트에는 100만 개의 요소가 있습니다. 간단하게 설명하기 위해 0부터 시작하여 최대 999999까지 계산하겠습니다. 🎜

const findSum = (arr, sum) =>
  arr.some((set => n => set.has(n) || !set.add(sum - n))(new Set));

테스트 1: 요소 찾기

🎜 123123🎜rrreee

• 배열: 0.173ms를 검색합니다. li>
• 세트: 0.023ms

🎜세트는 7.54배 빠릅니다🎜

테스트 2 : 요소 추가

rrreee

• 배열: 0.018ms
• Set: 0.003ms

🎜Set가 빠릅니다6.73 회 🎜

테스트 3: 요소 삭제

🎜마지막으로 요소를 삭제합니다. 배열에는 내장 메서드가 없으므로 먼저 도우미를 만듭니다. 함수: 🎜 rrreee🎜테스트 코드는 다음과 같습니다:🎜rrreee

• 배열: 1.122ms
• 설정: 0.015ms

🎜설정는 74.13배 빠릅니다 🎜🎜전체적으로 Set를 사용하면 런타임이 크게 향상되는 것을 볼 수 있습니다. Set이 유용한 몇 가지 실제 예를 살펴보겠습니다. 🎜

사례 1: 배열에서 중복 값 제거

🎜If 배열에서 중복된 값을 빠르게 제거하려면 Set으로 변환하세요. 이는 고유한 값을 필터링하는 가장 깔끔한 방법입니다. 🎜rrreee

사례 2: Google 인터뷰 질문🎜질문:🎜🎜정렬되지 않은 정수 배열과 sum 변수가 주어졌을 때, 배열에 두 개의 항목이 있고 합계가 sum 값, true를 반환합니다. 그렇지 않으면 false를 반환합니다. 예를 들어 [3,5,1,4] 및 sum = 9 배열의 경우 함수는 true를 반환해야 합니다. 4 + 5 = 9. 🎜🎜답변🎜🎜이 문제를 해결하는 좋은 방법은 배열을 반복하고 Set을 만들어 상대적 차이를 저장하는 것입니다. 🎜

当我们遇到3时，我们可以把6加到Set中, 因为我们知道我们需要找到9的和。然后，每当我们接触到数组中的新值时，我们可以检查它是否在 Set 中。当遇到5时，在 Set 加上4。最后，当我们最终遇到4时，可以在Set中找到它，就返回true。

const findSum = (arr, val) => {
  let searchValues = new Set();
  searchValues.add(val - arr[0]);
  for (let i = 1, length = arr.length; i < length; i++) {
    let searchVal = val - arr[i];
    if (searchValues.has(arr[i])) {
      return true;
    } else {
      searchValues.add(searchVal);
    }
  };
  return false;
};

简洁的版本：

const findSum = (arr, sum) =>
  arr.some((set => n => set.has(n) || !set.add(sum - n))(new Set));

因为Set.prototype.has()的时间复杂度仅为O(1)，所以使用 Set 来代替数组，最终使整个解决方案的线性运行时为O(N)。

如果使用 Array.prototype.indexOf()或Array.prototype.includes()，它们的时间复杂度都为 O(N)，则总运行时间将为O(N²)，慢得多！

原文地址：https://medium.com/@bretcameron/how-to-make-your-code-faster-using-javascript-sets-b432457a4a77

更多编程相关知识，请访问：编程入门！！

위 내용은 Set을 사용하여 JS 코드의 성능을 향상시키는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!