数组去重的6种方法

最新推荐文章于 2025-04-27 11:34:34 发布

BloggerM

最新推荐文章于 2025-04-27 11:34:34 发布

阅读量1.1k

点赞数

分类专栏： Array数组文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/HTML_Z/article/details/124057377

版权

Array数组专栏收录该内容

3 篇文章

订阅专栏

本文介绍了六种JavaScript数组去重的方法，包括双重for循环、includes、filter、Set、indexOf和Map，详细解释了每种方法的实现原理，并提供了示例代码。这些方法在实际编程中各有适用场景，理解它们有助于提升编程效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数组去重

1. 利用双重`for`循环去重

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 利用双重 for 循环去重
    let arr = [22, 17, 22, 44, 44, 66, 17, 66, 7];
    // 定义一个新的数组，先存放不可能与 arr 重复的第一个元素
    let newArr = [arr[0]];
    for (let i = 0; i < arr.length; i++) {
      // 设置标记 flag
      let flag = true;
      for (let j = 0; j < newArr.length; j++) {
        // 如果两个相等，标记该 i 为 flase(重复)，并退出循环
        if (arr[i] == newArr[j]) {
          flag = false;
          break;
        }
      }
      // 第二个 for 遍历完成后，flag 为 true(无重复) 加进新数组
      if (flag == true) {
        newArr.push(arr[i]);
      }
    }
    console.log(newArr); // [22, 17, 44, 66, 7]
  </script>
</html>

2. 利用`includes`去重

includes()存在该值返回ture，反之false

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 利用 includes 去重
    let arr = [22, 17, 22, 44, 44, 66, 17, 66, 7];
    let newArr = [];
    for (var i = 0; i < arr.length; i++) {
      // includes() 存在该值返回 true，反之 false
      if (!newArr.includes(arr[i])) {
        newArr.push(arr[i]);
      }
    }
    console.log(newArr); // [22, 17, 44, 66, 7]
  </script>
</html>

3. 利用数组的`filter`方法去重

原理
- filter()使用指定的函数测试所有元素，并返回一个包含所有通过测试元素的新数组
- indexOf()可返回某个指定的字符串值在字符串中首次出现的位置。如果没有检测到指定字符串，则返回-1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 利用数组的 filter 方法去重
    // filter() 使用指定的函数测试所有元素，并返回一个包含所有通过测试元素的新数组
    // indexOf() 可返回某个指定的字符串值在字符串中首次出现的位置。如果没有检测到指定字符串，则返回 -1
    let arr = [22, 17, 22, 44, 44, 66, 17, 66, 7];
    let newArr = arr.filter((item, index) => {
      // 当第一次遍历 arr数组里面有这个元素 所以返回对应的下标 0 = 0 结果为 true 满足条件
      // 当第二次遍历 arr数组里面有这个元素 所以返回对应的下标 1 = 1 结果为 true 满足条件
      // 当第三次遍历 arr数组里面有这个元素 但是indexOf检测的是第一个元素的位置 所以返回对应的下标 0 = 2 结果为 false 不满足条件
      // 以下结果皆这样判断 最后返回一个全部满足条件的新数组
      return arr.indexOf(item) === index;
    });
    console.log(newArr); // [22, 17, 44, 66, 7]
  </script>
</html>

4. 利用 ES6 中的`Set`方法去重（最常用）

原理
- Set数据结构中所有元素都是

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 利用 ES6 中的 Set 方法去重
    let arr = [22, 17, 22, 44, 44, 66, 17, 66, 7];
    let obj = new Set(arr);
    console.log(obj); // Set(5) {22, 17, 44, 66, 7} 得到一个去重的对象
    // 通过 [] + 展开运算符 变成数组格式
    let newArr = [...obj];
    console.log(newArr); // (5) [22, 17, 44, 66, 7]
  </script>
</html>

5. 利用`indexOf`去重

原理
- indexOf() 方法可返回数组中某个指定的元素位置。
- 如果在数组中没找到指定元素则返回 -1
- 如果找到，则返回首次找到位置的下标

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    //  利用 indexOf 去重
    let arr = [22, 17, 22, 44, 44, 66, 17, 66, 7];
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
      if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i]);
      }
    }
    console.log(newArr); // (5) [22, 17, 44, 66, 7]
  </script>
</html>

6. 利用 ES6 中的`Map`方法去重

原理
- 创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中
- 由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    //  利用 ES6 中的 Map 方法去重
    let arr = [22, 17, 22, 44, 44, 66, 17, 66, 7];
    let map = new Map();
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
      // .has 判断成员是否存在
      if (map.has(arr[i])) {
        // .set 设置成员 key 和 value
        map.set(arr[i], true); // true 或 false 都没有影响 因为if判断条件已经限制了
      } else {
        map.set(arr[i], false);
        newArr.push(arr[i]);
      }
    }
    console.log(newArr); // (5) [22, 17, 44, 66, 7]
  </script>
</html>