js数组去重的10种方法

简介: js数组去重的10种方法

方法 1: 利用 ES6的set 方法和解构赋值——最常用、最简单。


这个方法是es6之后加入的,是最简单的一种方法。

Set是一种结构,是一种不重复值的集合,如:{1,2,3}。它的特性之一就是里面的每一个值都是不重复的;

[...new Set(arr)] 意思是将Set结构解构赋值为数组。

        function Unrepeated1(arr) {
           return [...new Set(arr)]
        }
        console.log(Unrepeated1([1,1,2,2,3,3]));
        // 结果是[1, 2, 3]

方法2: 利用数组原型对象上的 lastIndexOf 方法——以前常用,逐渐被include代替


思路: 定义一个空数组,遍历这个原数组,如果空数组没有这个数就往空数组里加入,有的话就不操作。

lastIndeOf():返回指定字符串值最后出现的位置,从后向前搜索,找不到返回-1

        function Unrepeated2(arr) {
            var res = [];
            for (var i = 0; i < arr.length; i++) {
                res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
            }
            return res;
        }
        console.log(Unrepeated2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

方法3: 利用数组原型对象上的 splice 方法。


思路是:双层遍历数组,举例:如果第一项是数字1,那么第二层遍历从第二项开始,如果后面也找到1,就把1删除。

splice():用于删除数组元素,splice(j,1)j代表数组索引是j,1代表删除1个

        function Unrepeated3(arr) {
            var i,j,len = arr.length;
            for (i = 0; i < len; i++) {
                for (j = i + 1; j < len; j++) {
                    if (arr[i] == arr[j]) {
                        arr.splice(j, 1);
                        len--;
                        j--;
                    }
                }
            }
            return arr;
        }
        console.log(Unrepeated3([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));

方法4 利用数组原型对象上的 forEach 和 includes方法——includes很强大


思路:定义一个空数组,遍历原数组,再遍历空数组,如果空数组里面含有原数组的项就添加进空数组,如果空数组已经有了,就不再操作。

includes:表示是否含有,返回布尔值,说的也是它以后会替代indexof。是es6新增的很强大的一个api,不止数组可以用,对象,字符串都可以用。

          function Unrepeated4(arr) {
            let newArr = [];
            arr.forEach(item => {
                return newArr.includes(item) ? '' : newArr.push(item);
            });
            return newArr;
        }
        console.log(Unrepeated4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 4, 5, 6, 7]

方法5 利用数组原型对象上的 filter 和 includes方法。


和方法4类似的思路,只不过foreach+includes换成了filter+includes

        function Unrepeated5(arr) {
            var newArr = []
            newArr = arr.filter(function (item) {
                return newArr.includes(item) ? '' : newArr.push(item)
            })
            return newArr
        }
        console.log(Unrepeated5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

方法6: 利用数组原型对象上的includes方法。


这个方法可以作为一般性解法,代码可以进一步简化。

        function Unrepeated6(arr) {
            var newArr = []
            for (var i = 0; i < arr.length; i++) {
                if (!newArr.includes(arr[i])) {
                    newArr.push(arr[i])
                }
            }
            return newArr
        }
        console.log(Unrepeated6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

方法7:利用数组的indexOf下标属性来查询。


思路和上面的类似

        function Unrepeated7(arr) {
            var newArr = []
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i])===-1) {
                    newArr.push(arr[i])
                }
            }
            return newArr
        }
        console.log(Unrepeated7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

 方法8: 利用对象属性存在的特性,如果没有该属性则存入新数组。


这个方法兼容性比较好。思路是用一个空对象来标记,通过遍历,动态的设置对象的属性,以此来区分是否重复。

        function Unrepeated8(arr) {
            var obj={}
            var newArr=[]
            for (let i = 0; i < arr.length; i++) {
                if (!obj[arr[i]]) {
                    obj[arr[i]] = 1
                    newArr.push(arr[i])
                }   
            }
            return newArr
        }
        console.log(Unrepeated8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

方法9:


思路:先将原数组排序,在与相邻的进行比较,如果不同则存入新数组。

        function Unrepeated9(arr) {
            var formArr = arr.sort()
            var newArr=[formArr[0]]
            for (let i = 1; i < formArr.length; i++) {
                if (formArr[i]!==formArr[i-1]) {
                    newArr.push(formArr[i])
                }
            }
            return newArr
        }
        console.log(Unrepeated9([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3,  4,5, 6, 7]

方法10:


思路:定义一个新数组,并存放原数组的第一个元素,然后将元素组一一和新数组的元素对比,若不同则存放在新数组中。

        function Unrepeated10(arr) {
            let newArr = [arr[0]];
            for (let i = 1; i < arr.length; i++) {
                let repeat = false;
                for (let j = 0; j < newArr.length; j++) {
                    if (arr[i] === newArr[j]) {
                        repeat = true;
                        break;
                    }else{
                    }
                }
                if (!repeat) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        console.log(Unrepeated10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]


相关文章
|
6天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
19天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
6天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
6天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
16天前
|
前端开发 JavaScript 算法
使用 JavaScript 数组方法实现排序与去重
【10月更文挑战第21天】通过灵活运用 `sort()` 方法和 `filter()` 方法,我们可以方便地实现数组的排序和去重。同时,深入理解排序和去重的原理,以及根据实际需求进行适当的优化,能够更好地应对不同的情况。可以通过实际的项目实践来进一步掌握这些技巧,并探索更多的应用可能性。
94 59
|
5天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
20 7
|
6天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
12天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
23天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
6天前
|
JavaScript 前端开发 开发者