您的位置是:网站首页>Javascript编程Javascript编程

详解使用 Set 来提高JS代码性能的方法

少儿编程网2021-11-15 13:34:34Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介我确信有很多开发人员坚持使用基本的全局对象:数字,字符串,对象,数组和布尔值。对于许多用例,这些都是需要的。但是如果想让你的代码尽可能快速和可扩展,那么这些基本类型并不总是足够好。在本文中,我们将讨论JS中Set对象如何让代码更快—特别扩展性方便。Array和Set工作方式存在大量的交叉。但是使用S

KjP少儿编程网-https://www.pxcodes.com

我确信有很多开发人员坚持使用基本的全局对象:数字,字符串,对象,数组和布尔值。对于许多用例,这些都是需要的。 但是如果想让你的代码尽可能快速和可扩展,那么这些基本类型并不总是足够好。KjP少儿编程网-https://www.pxcodes.com

在本文中,我们将讨论JS 中Set对象如何让代码更快— 特别扩展性方便。 ArraySet工作方式存在大量的交叉。但是使用Set会比Array在代码运行速度更有优势。KjP少儿编程网-https://www.pxcodes.com

Set 有何不同

**根本的区别是数组是一个索引集合,这说明数组中的数据值按索引排序。KjP少儿编程网-https://www.pxcodes.com

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

相比之下,set是一个键的集合。set不使用索引,而是使用键对数据排序。set 中的元素按插入顺序是可迭代的,它不能包含任何重复的数据。换句话说,set中的每一项都必须是惟一的。KjP少儿编程网-https://www.pxcodes.com

主要的好处是什么

set 相对于数组有几个优势,特别是在运行时间方面:KjP少儿编程网-https://www.pxcodes.com

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

时间复杂度?

数组用来搜索元素的方法时间复杂度为0(N)。换句话说,运行时间的增长速度与数据大小的增长速度相同。KjP少儿编程网-https://www.pxcodes.com

相比之下,Set用于搜索、删除和插入元素的方法的时间复杂度都只有O(1),这意味着数据的大小实际上与这些方法的运行时间无关。KjP少儿编程网-https://www.pxcodes.com

Set 究竟有多快?

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

准备测试

在运行任何测试之前,创建一个数组和一个 Set,每个数组和 Set 都有100万个元素。为了简单起见,我从0开始,一直数到999999KjP少儿编程网-https://www.pxcodes.com

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

测试1:查找元素

我们搜索数字123123KjP少儿编程网-https://www.pxcodes.com

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.54KjP少儿编程网-https://www.pxcodes.com

测试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.73KjP少儿编程网-https://www.pxcodes.com

测试3:删除元素

**后,删除一个元素,由于数组没有内置方法,首先先创建一个辅助函数:KjP少儿编程网-https://www.pxcodes.com

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

这是测试的代码:KjP少儿编程网-https://www.pxcodes.com

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.13KjP少儿编程网-https://www.pxcodes.com

总的来说,我们可以看到,使用Set 极大地改善运行时间。再来看看一些Set有用的实际例子。KjP少儿编程网-https://www.pxcodes.com

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

如果想快速地从数组中删除重复的值,可以将其转换为一个 Set。这是迄今为止过滤惟一值**简洁的方法:KjP少儿编程网-https://www.pxcodes.com

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:谷歌面试问题

问题:KjP少儿编程网-https://www.pxcodes.com

给定一个整数无序数组和变量 sum,如果存在数组中任意两项和使等于 sum 的值,则返回true。否则,返回false。例如,数组[3,5,1,4]sum = 9,函数应该返回true,因为4 + 5 = 9KjP少儿编程网-https://www.pxcodes.com

解答KjP少儿编程网-https://www.pxcodes.com

解决这个问题的一个很好的方法是遍历数组,创建 Set保存相对差值。KjP少儿编程网-https://www.pxcodes.com

当我们遇到3时,我们可以把6加到Set中, 因为我们知道我们需要找到9的和。然后,每当我们接触到数组中的新值时,我们可以检查它是否在 Set 中。当遇到5时,在 Set 加上4。**后,当我们**终遇到4时,可以在Set中找到它,就返回trueKjP少儿编程网-https://www.pxcodes.com

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;
};

简洁的版本:KjP少儿编程网-https://www.pxcodes.com

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)KjP少儿编程网-https://www.pxcodes.com

如果使用 Array.prototype.indexOf()Array.prototype.includes(),它们的时间复杂度都为 O(N),则总运行时间将为O(N²),慢得多!KjP少儿编程网-https://www.pxcodes.com

原文地址:https://medium.com/@bretcameron/how-to-make-your-code-faster-using-javascript-sets-b432457a4a77KjP少儿编程网-https://www.pxcodes.com

更多编程相关知识,请访问:编程入门!!

以上就是详解使用 Set 来提高JS代码性能的方法的详细内容,更多请关注少儿编程网其它相关文章!KjP少儿编程网-https://www.pxcodes.com

来源:php中文网KjP少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

详解使用 Set 来提高JS代码性能的方法

      匿名评论
    • 评论
    人参与,条评论
    详解使用 Set 来提高JS代码性能的方法

微信公众号

免费视频教程

先知道