JavaScript数组的去重方法

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍四种数组去重方法：使用indexOf()、双层for循环、排序后比较相邻元素及利用对象属性。每种方法详细解释并附代码示例，帮助读者理解和掌握不同场景下最优的数组去重策略。

方法①：使用indexOf()

var arr = [1,1,1,2,2,2,3,3,3,4,4,4,5,5,5,6,6,6];
var arr2 = setNewArr(arr);
console.log(arr2);

function setNewArr(arr) //参数是需要执行去除重复数据的数组
{var newArr = []; //创建一个新的数组
arr.forEach(function(value){ //将原数组中只出现一次的数据一步步添加在新数组中
if( newArr.indexOf(value) == -1 ){
newArr.push(value);}})
return newArr;}
//去重后结果为1,2,3,4,5,6

方法②：使用双层for循环，来完成对数组中数值的比较。从第一个数值开始循环，第一个数值和其后的所有数据进行比较。如果数值相同，就删除之后的数值（循环次数较多）

var arr123 = [1,2,3,4,5,1,2,3,4,5,1,2,3,4,5];

        function setNewArr2(arr){
            // 外层循环,从第一个数值开始,循环至最后一个数值
            for(var i = 0 ; i <= arr.length-1 ; i++){
                // 内层循环,从当前起始数值的下一个数值开始,循环至最后一个数值
                for(var j = i+1 ; j <= arr.length-1 ; j++){
                    if(arr[i] === arr[j]){
                        // 执行删除数组单元操作,之后的单元,会前移,顶替当前位置的单元
                        // 此时,当前位置就是放置了一个新的单元
                        // 这个位置就必须要重新操作一次,判断数值是否相同
                        arr.splice(j,1);
                        // 先将循环生成的索引--, 在执行循环的++
                        // 等于操作之后,索引值没有变,下次循环,执行的对象,仍然是当前这个单元
                        j--;
                    }
                }
            }         
            return arr;
        }
        var newArr = setNewArr2(arr123);
        console.log(newArr);
        // 循环操作数组,只要执行了删除数组单元的操作
        // 一定要将循环变量数值 执行 -- 操作

方法③：将数组中的数值按照大小顺序排列，排序之后相同的数值一定是相邻的，再比较相邻的两个数值（循环次数较少）

var arr = [1,2,3,4,5,1,2,3,4,5,1,2,3,4,5];
        var newArr = setNewArr3(arr);
        console.log(newArr);

        function setNewArr3(arr){
            // 先对数组进行排序操作,相同数据,相邻
            var newArr = arr.sort(function(a,b){return a-b});
            console.log(newArr);
            // 当前数据与下一个数据比较
            // 冒泡排序的优化原理:只要循环到倒数第二个单元
            // 就会通过i+1 与最后一个单元比较
            // 比较到最后一个单元,循环只要执行到,倒数第二个单元
            for(var i = 0 ; i <= newArr.length-1 -1 ; i++){
                if(newArr[i] === newArr[i+1]){
                    // 删除后一个单元
                    newArr.splice(i+1 , 1);
                    // 防止数组坍塌,造成有单元没有执行操作
                    i--;
                }
            }
            return newArr;
        }

方法④：利用对象的属性,来完成数组去重
对象的属性特点：一个对象中，相同的键名只能建立一个，再对已经存在的键名进行赋值，是修改数据操作


        // 数组中,已经有两个单元,所以是0,1
        // 新建立单元,索引就不能是 0,1
        var arr = ['北京','上海'];
        console.log(arr);

        //
        var obj = {name:'张三'};
        // 不会新建一个对象中的单元,键名是name
        // 会将李四数据,覆盖以后的name键名存储的数据
        obj.name = '李四';
        console.log(obj);


        // 数组去重的思路
        // 利用对象的属性
        // 循环遍历数组,将数组的数值获取,作为对象的键名来赋值
        // 循环遍历之后,对象中,所有键名就是数组中的不重复数据
        // 再循环遍历对象,将对象的键名获取,写成数组的数据

        var arr1 = [1,1,1,1,2,2,2,3,3,3,4,4,4,4,5,5,5];
        console.log(arr1);

        // 获取第一个单元的数值1,作为对象的键名,建立一个单元
        // var obj1 = { 1:'随便' };
        // 获取第二个单元的数值,还是1,还作为对象的键名
        // 此时1键名已经存在,会执行覆盖操作,不会新增一个单元
        // obj1 = { 1:'随便' };
        // console.log(obj1);

        var obj1 = {};
        var newArr = [];

        arr1.forEach(function(val){
            obj1[val] = '老婆,我爱你~~~';
        })

        console.log(obj1);

        // for...in循环对象,自定义变量中存储的是对象单元的属性
        for(var attr in obj1 ){
            // 将属性attr存储的数据写入新数组中
            newArr.push(attr);
        }
            
        console.log(newArr);