js数组去重的10种有效方法 vue 数组去重

亦凉 2022-12-13 14:06 244阅读 0赞

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

function unique(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(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
    // 结果是[1, 2, 3, 5, 6, 7, 4]

## 扫码免费查看1000条前端面题![在这里插入图片描述][2020101210095094.png_pic_center] ##

**方法二**  
思路：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。

function unique2(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(unique2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
    // 结果是[1, 2, 3, 4,5, 6, 7]

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

function unique3(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(unique2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
    // 结果是[1, 2, 3, 5, 6, 7, 4]

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

function unique4(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(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
    // 结果是[1, 2, 3, 5, 6, 7, 4]

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

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

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

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

方法7: 利用数组原型对象上的 forEach 和 includes方法。

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

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

function unique8(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(unique8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));

方法9: 利用数组原型对象上的 lastIndexOf 方法。

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

方法 10: 利用 ES6的set 方法。

function unique10(arr) { 
        //Set数据结构，它类似于数组，其成员的值都是唯一的
        return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组
    }
    console.log(unique10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
    // 结果是[1, 2, 3, 5, 6, 7, 4]

[2020101210095094.png_pic_center]: /images/20221123/83ed0b5838e641fa8c37711e3be26453.png

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

相关 js的数组去重方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

旧城等待，/ 2023年06月22日 10:23/ 0 赞/ 112 阅读

相关数组去重方法总结（10种）

一、用ES6的Set方法 let arr =[1,1,true,true,'true',"false","false",null,null,undefined,u

た入场券/ 2022年12月26日 09:12/ 0 赞/ 129 阅读

相关 js数组去重的10种有效方法 vue 数组去重

方法一思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。 function unique(arr) {

亦凉/ 2022年12月13日 14:06/ 0 赞/ 245 阅读

相关 js数组去重的4种方法

js数组去重，老生长谈，今天对其进行一番归纳，总结出来4种方法贴入代码前，先对浏览器Array对象进行支持indexOf和forEach的polyfill ![复制代码

秒速五厘米/ 2022年07月16日 05:52/ 0 赞/ 186 阅读

相关数组去重，json数组去重

1.借助json对象对数组进行去重，并计算重复的次数 Array.prototype.unique = function (){ var key =

浅浅的花香味﹌/ 2022年06月13日 03:40/ 0 赞/ 384 阅读

相关 js 数组去重的方法

//set类似数组但他本身的元素是唯一的不会重合； //-------------去重方法1--------------------

末蓝、/ 2022年05月08日 12:26/ 0 赞/ 218 阅读

相关 js数组去重方法

var arrayList = []; arrayList = arrayList.filter(function (element, index,

约定不等于承诺〃/ 2022年04月18日 06:19/ 0 赞/ 254 阅读

相关 js数组去重的方法

使用ES6的Set去除数组的重复元素方法一 Array.from()方法可以将Set结构转化为数组结构 function dedupe(array) {

爱被打了一巴掌/ 2022年04月13日 08:56/ 0 赞/ 247 阅读

相关 js数组去重五种方法

今天来聊一聊JS数组去重的一些方法，包括一些网上看到的和自己总结的，总共5种方法（ES5）。第一种：遍历数组法这种方法最简单最直观，也最容易理解，代码如下：

你的名字/ 2021年12月20日 16:11/ 0 赞/ 341 阅读

相关 ####javascript 数组去重（10种方法）

一、利用ES6 Set去重（ES6中最常用） set对象是值的集合,元素只会出现一次,即Set中的元素是唯一的. function unique (arr) {

Love The Way You Lie/ 2021年12月10日 05:51/ 0 赞/ 278 阅读