js数组去重的几种方法

小茗同学阿

已于 2024-08-07 14:50:01 修改

阅读量202

点赞数 7

分类专栏： JS 文章标签：前端 es6

于 2024-08-06 16:54:29 首次发布

本文链接：https://blog.csdn.net/zhangbaiming_/article/details/140959517

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Set 方法

利用 Set 数据结构可以更简洁和高效地实现数组去重，因为 Set 会自动过滤重复元素

  let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]

    function setFunction(arr) {
      return [...new Set(arr)]
    }
    
    let setArray = setFunction(myArray ) 
    console.log(setArray );   // 1,2,3,4,5,8

filter 方法

利用 filter 方法结合 indexOf 方法来实现数组去重，只保留第一次出现的元素。

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

let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]
let filterArray = filterFunction(myArray)
console.log(filterArray ); // 1,2,3,4,5,8

reduce 方法

使用 reduce 方法可以按顺序逐个遍历数组，并根据条件去重。

这种方法相对灵活，但性能和 filter 方法类似，适合中小型数组。

function reduceFunction(arr) {
     return arr.reduce((prev, cur) => (prev.includes(cur) ? prev : [...prev, cur]), [])
  }

let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]
let reduceArray = reduceFunction(reduceFunction)
console.log(reduceArray); // 1,2,3,4,5,8

for循环和includes

function forOrIncludesFunction(arr) {
      let newArr = []
      for (let i = 0; i < arr.length; i++) {
        if (!newArr.includes(arr[i])) {
          newArr.push(arr[i])
        }
      }
      return newArr
    }

let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]
let includesArray = forOrIncludesFunction(myArray)
console.log(includesArray ); // 1,2,3,4,5,8

map 方法

map 方法结合 indexOf 函数和 filter 方法来去除重复元素。

函数返回一个新数组，其中包含了原始数组中唯一的元素。

function mapFunction(arr) {
      return arr.map((item, index) => (arr.indexOf(item) === index ? item : null)).filter(item => item !== null)
    }

let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]
let mapArray = mapFunction(myArray)
console.log(mapArray ); // 1,2,3,4,5,8

利用 Map 数据结构可以实现数组去重，将数组元素作为键存储在Map中，然后获取Map的键数组即可。

let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]
let mapArray= Array.from(new Map(myArray.map(item => [item, item])).values());
console.log(mapArray); // 1,2,3,4,5,8

这种方法相对复杂，但也是一种去重的有效方法，适合特定场景下的需求。

---------------------------------------------------------------------------------------------------------------------------------

简单的dome 例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 让整个页面内容居中显示 */
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* 让页面铺满整个视口高度 */
        margin: 0;
      }

      /* 盒子内 flex 布局 */
      .container {
        width: 500px;
        height: 500px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <section id="set"></section>
      <section id="filter"></section>
      <section id="reduce"></section>
      <section id="forOrIncludes"></section>
      <section id="map"></section>
    </div>
  </body>
  <script>
    // 获取<div>元素
    // let setDiv = document.getElementById('set')

    let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]

    // set 方法
    function setFunction(arr) {
      return [...new Set(arr)]
    }
    
    // 代码重复性高  例子：
    // const setArray = setFunction(myArray)
    // 元素的内容为动态内容
    // setDiv.innerHTML = '<div>set 方法：' + setArray + '</div>'  // 可以这样绑定展示内容，但是不推荐

    // filter 方法
    // indexOf() 可返回某个指定的字符串值在字符串中首次出现的位置。如果没有检测到指定字符串，则返回-1
    function filterFunction(arr) {
      return arr.filter((item, index) => arr.indexOf(item) === index)
    }

    // reduce 方法
    function reduceFunction(arr) {
      return arr.reduce((prev, cur) => (prev.includes(cur) ? prev : [...prev, cur]), [])
    }

    // for循环和includes 方法 includes存在该值返回ture，反之false
    function forOrIncludesFunction(arr) {
      let newArr = []
      for (let i = 0; i < arr.length; i++) {
        if (!newArr.includes(arr[i])) {
          newArr.push(arr[i])
        }
      }
      return newArr
    }

    // map 方法
    function mapFunction(arr) {
      return arr.map((item, index) => (arr.indexOf(item) === index ? item : null)).filter(item => item !== null)
    }

    // 获取输出的元素，统一处理展示，简洁易维护
    document.getElementById('set').innerHTML = `<div>set 方法：${setFunction(myArray)}</div>`
    document.getElementById('filter').innerHTML = `<div>filter 方法：${filterFunction(myArray)}</div>`
    document.getElementById('reduce').innerHTML = `<div>reduce 方法：${reduceFunction(myArray)}</div>`
    document.getElementById('forOrIncludes').innerHTML = `<div>for循环和includes 方法：${forOrIncludesFunction(myArray)}</div>`
    document.getElementById('map').innerHTML = `<div>map 方法：${mapFunction(myArray)}</div>`
  </script>
</html>

页面显示结果：

比较常用的数组去重处理方法，纯属记录一下，如有错误，请不吝赐教

小茗同学阿

关注

7
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js数组去重的几种方法

数据结构可以实现数组去重，将数组元素作为键存储在Map中，然后获取Map的键数组即可。这种方法相对复杂，但也是一种去重的有效方法，适合特定场景下的需求。比较常用的数组去重处理方法，纯属记录一下，如有错误，请不吝赐教。函数返回一个新数组，其中包含了原始数组中唯一的元素。数据结构可以更简洁和高效地实现数组去重，因为。方法来实现数组去重，只保留第一次出现的元素。方法可以按顺序逐个遍历数组，并根据条件去重。这种方法相对灵活，但性能和。方法类似，适合中小型数组。for循环和includes。方法来去除重复元素。
复制链接

扫一扫

专栏目录