js中数组去重常见的几种方法总结

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

前端报刊

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

阅读量479

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_36995521/article/details/116102661

版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了多种在JavaScript中去除数组重复元素的方法，包括利用indexOf、includes、sort、filter、Set以及ES6的扩展运算符和Array.from等。通过实例代码展示了每种方法的实现过程，帮助读者理解并掌握这些技巧。

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

一、创建新数组，把原数组中不重复的值存到新数组中

1. 利用indexOf()方法：可返回某个指定的字符串值在字符串中首次出现的位置。

下面看一个简单例子，熟悉一下indexOf() 方法的用法。

let str = 'orange';
str.indexOf('o');// 0
str.indexOf('n');// 3
str.indexOf('c');// -1
//这里0和3分别是o和n在字符串中首次出现的位置，起始下标是0;而-1代表未匹配到
//不要问为什么没有匹配到得到的值是-1而不是null或undefined,那你去问制定这个规则的人吧，一脸无奈！

（1）利用indexOf()方法判值

<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        let arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        let newArr = []; //创建一个新数组来接收不重复的值
        if (!Array.isArray(arr)) { //判断arr是否为数组
          console.log('请传入数组！');
          return;
        }
        for (let i = 0; i < arr.length; i++) { //遍历原数组
          if (newArr.indexOf(arr[i]) == -1) { //判断新数组中是否已有相同的值
            newArr.push(arr[i]); //若没有，则推入新数组中
          }
        }
        console.log(newArr); // [1, 3, 5, 6, 7, 8, 9, 0]
        return newArr; //返回新数组
      }
    }
  }
</script>

<style scoped>

</style>

（2）利用indexOf()方法判下标

<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        let arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        let newArr = []; //创建一个新数组来接收不重复的值
        if (!Array.isArray(arr)) { //判断arr是否为数组
          console.log('请传入数组！');
          return;
        }
        for (let i = 0; i < arr.length; i++) { //遍历原数组
          if (arr.indexOf(arr[i])===i) { //如果当前数组的第i项在当前数组中第一次出现的位置是i
            newArr.push(arr[i]); //推入新数组中，否则说明是重复的
          }
        }
        console.log(newArr); // [1, 3, 5, 6, 7, 8, 9, 0]
        return newArr; //返回新数组
      }
    }
  }
</script>

<style scoped>

</style>

2. 利用includes()方法判值

includes() 方法：用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

下面看一个简单例子，熟悉一下includes() 方法的用法。

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // true
[1, 2, NaN].includes(NaN) // true

<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        let arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        let newArr = []; //创建一个新数组来接收不重复的值
        if (!Array.isArray(arr)) { //判断arr是否为数组
          console.log('请传入数组！');
          return;
        }
        for (let i = 0; i < arr.length; i++) { //遍历原数组
          if (!newArr.includes(arr[i])) { //判断新数组中是否已有相同的值
            newArr.push(arr[i]); //若没有，则推入新数组中
          }
        }
        console.log(newArr); // [1, 3, 5, 6, 7, 8, 9, 0]
        return newArr; //返回新数组
      }
    }
  }
</script>

<style scoped>

</style>

3. 利用sort()先排序

<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        var arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        var newArr = []; //创建一个新数组来接收不重复的值
        if (!Array.isArray(arr)) { //判断arr是否为数组
          console.log('请传入数组！');
          return;
        }
        arr = arr.sort(); //先对原数组进行排序
        for (var i = 0; i < arr.length; i++) { //遍历原数组
          if (arr[i] !== arr[i - 1]) { //相邻去除
            newArr.push(arr[i]);
          }
        }
        console.log(newArr); // [1, 3, 5, 6, 7, 8, 9, 0]
        return newArr; //返回新数组
      }
    }
  }
</script>

<style scoped>

</style>

二、两次遍历数组，去除重复元素。

利用双重for循环，然后再利用splice()方法删除重复元素。

<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        var arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        if (!Array.isArray(arr)) { //判断arr是否为数组
          console.log('请传入数组！');
          return;
        }
        for (var i = 0; i < arr.length; i++) { //遍历原数组
          for(var j = i+1;j<arr.length;j++){
            if(arr[i]==arr[j]){//数组中i下标后的j上有重复值，则用splice方法(可改变原数组)删除
              arr.splice(j,1);
              j--;//删除后下标-1
            }
          }
        }
        console.log(arr); // [1, 3, 5, 6, 7, 8, 9, 0]
        return arr; //返回数组
      }
    }
  }
</script>

<style scoped>

</style>

三、利用filter()方法。

filter针对数组起过滤作用筛选出符合条件的一个或多个元素

<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        var arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        var newArr = arr.filter((item, index, self) => {
          // item: 数组每一项的值
          // index: 每一项的下标
          // self: 当前数组
          return self.indexOf(item) === index;
        })
        //或
        //var newArr = arr.filter((item, index, self) => self.indexOf(item) === index);
        console.log(newArr) //[1, 3, 5, 6, 7, 8, 9, 0]
      }
    }
  }
</script>

<style scoped>

</style>

四、利用ES6中的Set()方法。

Set()方法：ES6中的set类似一个数组，但是其中的值都是唯一的，Set本身是一个构造函数，用来生成 Set 数据结构。

        var arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        //set函数可以接受一个数组作为参数，用来初始化
        var a = new Set(arr);
        console.log(a) // Set {_c: Set(8)}
        console.log(...a) // 1 3 5 6 7 8 9 0
        console.log([...a]) // [1, 3, 5, 6, 7, 8, 9, 0]

        //当然，当遇到数组去重的时候，可以这样：
        [...new Set(Array)];

        //如果用于去除字符串里的重复字符，也是可以的：
        [...new Set('abcdefaabccd')].join(' ');

1. 结合扩展运算符（...）

<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        var arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        arr=[...new Set(arr)];
        console.log(arr)// [1, 3, 5, 6, 7, 8, 9, 0]
      }
    }
  }
</script>

<style scoped>

</style>

2. 结合Array.from()方法

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        var arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        arr = Array.from(new Set(arr));//Array.from将Set结构的数据转换为真正的数组
        console.log(arr)//[1, 3, 5, 6, 7, 8, 9, 0]
      }
    }
  }
</script>

<style scoped>

</style>