zoukankan      html  css  js  c++  java
  • 如何使用 Set 来提高代码的性能

    我坚信很多开发者依旧与这些基本的全局对象打交道:numbers,strings,objects,arrays 和 booleans。

    大部分业务场景,以上这些已经够用了。但是,如果你想让你的代码运行的尽可能快、可扩展性尽可能的好,那么这些基本类型并不够优秀。

    在这篇文章,我们将要讨论如何利用 JS 的 Set 对象让你的代码运行的更快——尤其是在它所处理的数据量大的时候。Array 和 Set 在处理数据时,两者有太多的相似。但是使用 Set 所带来的运行优势,是 Array 无法完成的。

    Set 有何不同?

    根本的区别就是 Array 是 索引集合(index collection)。这意味着,数据的值是以 索引(index) 排序的。

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

    而 Set 则是 键集合(keyed collection)。相比使用 索引,Set 使用 键 来组织它的数据。一个 Set 中所有项都是按插入顺序可迭代的,它不会有重复值。换句话说,Set 中的每一项都是独一无二的。

    最主要的收益是什么?

    Set 相比 Array 有些优势,特别是考虑到需要更快的运行时间:

    • 查找项: 使用 indexOf() 或 includes() 去检查一个项是否在数组中很慢。
    • 删除项: 在 Set 中,你可以使用 值 去删除一项。而在 Array 中,相同的功能需要使用项的 索引 使用 splice()方法。使用 索引 是很慢的
    • 插入项: 在 Set 中新增一项比 Array 使用 push() 或者 unshift() 等方法新增一项要快的多。
    • 排序NaN值: 你无法使用 Array 的 indexOf() 或者 includes() 去定位 NaN 值,但是 Set 可以并且能够存储这个值
    • 去重: Set 对象只存储独一无二的值,如果你想避免储存重复值,这是比 Array 更好的选择,因为使用 Array,你需要使用额外的代码去处理这种情况。

    什么是时间复杂度?

    使用 Array 去查找是一个为 O(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');
    rusult = set.has(123123);
    console.timeEnd('Set');
    
    • Array: 0.173ms
    • Set: 0.023ms
      Set 快了 7.54 倍

    测试2:添加元素

    我们添加元素n

    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"]
    // 或者用Array.from将值保存到数组中
    let uniqueCollection = Array.from(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保存相对差值。

    当我们遇到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²),慢得多。

    原文:前端小智-如何使用 Set 来提高代码的性能

  • 相关阅读:
    #树#遍历#N叉树的前序遍历
    #树#递归#最大二叉树II
    #树#递归#二叉树的镜像
    #树#递归#最大二叉树
    #树#二叉搜索树的最近公共祖先
    #树#二叉树的直径
    #树#N叉树的后序遍历
    #树#判断平衡二叉树
    webpack+react+nodejs+express前端开发环境搭建
    sublime 玩转react+es6
  • 原文地址:https://www.cnblogs.com/ZerlinM/p/13600329.html
Copyright © 2011-2022 走看看