脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript数据去重

11种JavaScript前端数据去重方式总结

 更新时间：2023年06月12日 11:42:48   作者：jenemy  
这篇文章主要为大家总结了JavaScript去重的11种方式，各有优缺点，文中的示例代码讲解详细，具有一定的学习价值，需要的可以根据需求合理使用

1.使用 for 循环和 indexOf 方法，复杂度 O(n^2)

function uniqueArray(arr) {
  const result = []
  for (let i = 0; i < arr.length; i++) {
    if (result.indexOf(arr[i]) === -1) {
      result.push(arr[i])
    }
  }
  return result
}

2.使用 for 循环和对象，复杂度 O(n^2)

function uniqueArray(arr) {
  const result = []
  const obj = {}
  for (let i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
      result.push(arr[i])
      obj[arr[i]] = true
    }
  }
  return result
}

3.使用 filter 方法和 indexOf 方法，复杂度 O(n^2)

function uniqueArray(arr) {
  return arr.filter((item, index, arr) => arr.indexOf(item) === index)
}

4.使用 filter 方法和对象，复杂度 O(n)

function uniqueArray(arr) {
  const obj = {}
  return arr.filter((item) => obj.hasOwnProperty(item) ? false : (obj[item] = true))
}

5.使用 Set 数据结构，复杂度 O(n)

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

// 使用解构 + Set
function uniqueArray(arr) {
  return [...new Set(arr)]
}

6.使用 Map 数据结构，复杂度 O(n)

function uniqueArray(arr) {
  const map = new Map();
  const result = [];
  for (let i = 0; i &lt; arr.length; i++) {
    if (!map.has(arr[i])) {
      map.set(arr[i], true);
      result.push(arr[i]);
    }
  }
  return result;
}

// or
function uniqueArray(arr) {
  const map = new Map();
  return arr.filter(function(item) {
    return !map.has(item) &amp;&amp; map.set(item, true);
  });
}

7.使用双重循环和 splice 方法，复杂度 O(n^2)

function uniqueArray(arr) {
  for (var i = 0; i &lt; arr.length; i++) {
    for (var j = i + 1; j &lt; arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

8.使用排序和双指针

使用排序和双指针可以实现 O(nlogn) 的时间复杂度。先对数组进行排序，然后使用双指针遍历数组，如果左指针和右指针指向的值相同，就把右指针向右移动，直到找到不同的值，然后把左指针向右移动，继续遍历。

function uniqueArray(arr) {
  arr.sort();
  var left = 0, right = 1;
  var result = [];
  while (right &lt;= arr.length) {
    if (arr[left] === arr[right]) {
      right++;
    } else {
      result.push(arr[left]);
      left = right;
      right++;
    }
  }
  return result;
}

9.使用 reduce 方法和 includes，复杂度 O(n^2)

function uniqueArray(arr) {
  return arr.reduce(function(prev, cur) {
    if (!prev.includes(cur)) {
      prev.push(cur);
    }
    return prev;
  }, []);
}

10.使用递归和 includes，复杂度 O(n^2)

function uniqueArray(arr) {
  if (arr.length === 1) {
    return arr;
  } else {
    const first = arr[0];
    const rest = uniqueArray(arr.slice(1));
    if (rest.includes(first)) {
      return rest;
    } else {
      return [first].concat(rest);
    }
  }
}

11.双层循环，复杂度 O(n^2)

function uniqueArray(arr) {
  var result = [];
  for (var i = 0; i &lt; arr.length; i++) {
    for (var j = 0; j &lt; result.length; j++) {
      if (arr[i] === result[j]) {
        break;
      }
    }
    if (j === result.length) {
      result.push(arr[i]);
    }
  }
  return result;
}

到此这篇关于11种JavaScript前端数据去重方式总结的文章就介绍到这了,更多相关JavaScript数据去重内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 微信小程序支付包含uniapp方法超详细讲解

    微信小程序支付包含uniapp方法超详细讲解

    微信小程序支付流程涉及多个步骤和多个参与方的交互,下面这篇文章主要介绍了微信小程序支付包含uniapp方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-07-07
  • TypeScript判断两个数组的内容是否相等的实现

    TypeScript判断两个数组的内容是否相等的实现

    本文主要介绍了TypeScript 判断两个数组的内容是否相等，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • Echarts自定义地图和添加图标代码示例

    Echarts自定义地图和添加图标代码示例

    这篇文章主要给大家介绍了关于Echarts自定义地图和添加图标的相关资料,项目中经常会遇到需要渲染echarts地图的情况,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • bootstrap Table的使用方法总结

    bootstrap Table的使用方法总结

    这篇文章主要为大家详细介绍了bootstrap Table的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Javascript如何理解全国甲卷高考作文

    Javascript如何理解全国甲卷高考作文

    这篇文章主要介绍了Javascript如何理解全国甲卷高考作文,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • WebGL 颜色与纹理使用介绍

    WebGL 颜色与纹理使用介绍

    这篇文章主要为大家介绍了WebGL 颜色与纹理使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • javascript事件冒泡和事件捕获详解

    javascript事件冒泡和事件捕获详解

    最近在学习javascript中遇到了一些困难，比如冒泡和捕获，很多次被提到，但又不知究竟应用在何处。找到了一些好文章解惑，在这里分享给大家。
    2015-05-05
  • JS时间戳与日期格式的转换小结

    JS时间戳与日期格式的转换小结

    这篇文章主要介绍了JS时间戳与日期格式的转换小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • JavaScript如何实现防止重复的网络请求的示例

    JavaScript如何实现防止重复的网络请求的示例

    这篇文章主要介绍了JavaScript如何实现防止重复的网络请求的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JavaScript DOM实现简单留言板

    JavaScript DOM实现简单留言板

    这篇文章主要为大家详细介绍了JavaScript DOM实现简单留言板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01

最新评论