JavaScript数组去重方法汇总

1.运用数组的特性

  1.遍历数组,也遍历辅助数组,找出两个数组中是否有相同的项,若有则break,没有的话就push进去。

  

//第一版本数组去重
function unique(arr){
    var  res = [],
         len = arr.length;
    for(let i = 0;i < len; i++){
        var reslen = res.length;
        for(let j = 0;j < reslen; j++){ //遍历辅助数组
            if(arr[i] === res[j]){
                break;
            }
        }
        if(j === reslen){
            res.push(arr[i]); //没有就添加进去
        }
    }
    return res;
}

  

  2.运用es5的indexOf方法

//第二版本数组去重 es5语法, IE8不能用
function unique(arr){
    var len = arr.length,
        res = [];
    for( let i = 0; i < len ; i++){
        let val = arr[i];
        if(res.indexOf(val) === -1){ //找不到返回-1
            res.push(arr[i]);
        }
    }
    return res;
}

  

  3.如果数组已经排好序

function unique(arr){
    var len = arr.length;
        last,
        res = [];
    for(let i = 0;i < len; i++){
        let val = arr[i];
        if(val !== last){ //用last存储上一次的值
            res.push(val);
        }
        last = val;
    }
    return res;
}

  

  4.留一个接口,传一个参数判断数组是否已经排好序

function unique(arr, isSort){
    var len = arr.length,
        res = [],
        last;
    if(isSort !== ‘boolean‘){
        isSort = false;
    }
    for(let i = 0;i < len; i++){
        var val = arr[i];
        if(isSort){
            if(!i || val!== last){
                res.push(val);
            }
            last = val;
        }else{
            if(res.indexOf(val) === -1){
                res.push(val);
            }
        }
    }
    return res;
}

  5.如果有特殊需求的话,留一个接口,更灵活

function unique(arr, isSort, fn){
    var res = [],
        len = arr.length,
        newArr = [],
        last;
    for(let i = 0;i < len; i++){
        var val = arr[i],
            com = fn ? fn(val, i, arr) : val;
        if(isSort){
            if(!i || com === last){
                res.push(val);
            }
            last = com;
        }else if(fn){
            if(newArr.indexOf(com) === -1){
                newArr.push(com);
                res.push(val);
            }
        }else if(res.indexOf(val === -1)){
            res.push(val);
        }
    }
    return res;
}

  6.用内部 filter 方法优化

function unique(arr){
    var res = [],
    res = arr.filter(function(item, index, arr){
        return res.indexOf(item) === index;  //返回true则添加到数组res,否则不添加
    });
    return res;
}

2.运用对象的特性

  1.第一种方法

function unique(arr){
    var obj = {},
        res = [],
    res = arr.filter(function (item, index, aee){
        return obj.hasOwnProperty(item) ? false : (obj[item] = true);
    });
    return res
}

  注意: 有一个Bug,var  = [ 1,1,"1",2],不能识别number类型的和string类型,添加到对象中都会转化为string。

  2.第二种方法

 

function unique(arr){
    var obj = {},
        res = [],
        len = arr.length;
    res = arr.filter(function (item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (typeof item + item) = true;
    });
    return res;
}

  注意:这里也有bug,因为typeof的返回类型,检测不了对象。

  3.第三种方法

  运用json方法进行优化。

function unique(arr){
    var obj = {},
        res = [],
        len = arr.length;
    res = arr.filter(function (item, index, arr){
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (typeof item + JSON.stringify(item)) = true;
    })
    return res;
}

3.ES6中的Set()对象

function unique(arr){
    return [...new Set(arr)];
}
时间: 2024-09-29 08:36:07

JavaScript数组去重方法汇总的相关文章

JavaScript数组去重方法及测试结果

最近看到一些人的去面试web前端,都说碰到过问JavaScript数组去重的问题,我也学习了一下做下总结. 实际上最有代表性也就三种方法:数组双重循环,对象哈希,排序后去重. 这三种方法我都做了性能测试,有兴趣的朋友可以去试试,这是测试地址 双重循环最慢(不是一般的慢),对象哈希是最快的,排序后去重根据浏览器不同比对象哈希慢2-3倍

javaScript数组去重方法

在JAvascript平时项目开发中经常会用到数组去重的操作.这时候就要用到JS数组去重的方法了. demo1: 第一种:JS数组去重操作方法是利用遍历原数组,利用数组的indexOf()方法来来判断新数组b中是否有原数组a中的元素,如果没有的话则在b数组的后面追加上a[i],如果有的话就不执行任何操作,最后可以达到数组去重的操作. 这种方法应该是平时开发中最常用的JS数组去重的方法了,简单又实用. demo2: 第二种去重的方法比较巧妙,是定义一个空对象和一个空数组,在遍历原数组的时候来用原数

JavaScript数组去重方法总结

一.双重遍历去重 function onlyFigure(arr) { let newarr = []; const length = arr.length for (let i = 0; i < length; i++) { for(let j = i + 1; j < length; j++) { if(arr[i] === arr[j]) { i++; j=i; } } newarr.push(arr[i]) } console.log(arr); } onlyFigure([0,0,1

javascript 数组去重方法

方法一:ES6中的Set语法: <script> let arr = [1,2,3,4,3,2,1]; let newArr = [...new Set(arr)]; console.log(newArr); </script> 注意: 1.new 后面大写 2.返回的是伪数组,使用 [] 包起来 才是真正意义上的数组 方法二: 原文地址:https://www.cnblogs.com/KoBe-bk/p/11465287.html

Javascript数组去重的几种方法

Javascript数组去重的几种方法 新建空数组,通过for...of(ES6)循环遍历,通过indexOf判断元素是否在新数组中存在,将不存在的(indexOf(n)==-1)元素push到新数组中: let arr = [1,1,2,2,3,6,3,77,88,5,98,9,7,2,7,5,3,4,2]; function removeDup_indexOf(originalArr){ let newArr = []; for(n of originalArr){ if(newArr.in

JavaScript实现数组去重方法

一.利用ES6 Set去重(ES6中最常用) function unique (arr) { return Array.from(new Set(arr)) } var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]; console.log(unique(arr)) //[1, "true&quo

JavaScript 数组去重

JavaScript 数组去重 Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. 阅读一些著名框架类库的源码,就好像和一个个大师对话,你会学到很多.为什么是 underscore?最主要的原因是 underscore 简短精悍(约 1.5k 行),封装了 100 多个有用的方法,耦合度低,非常适合逐个方法阅读,适合楼主这样的 JavaScript

javascript数组去重算法-----5

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript数组去重算法-----3</title> 6 </head> 7 <body> 8 <script> 9 var arr = [1,1,2,2,3,2,2,3,3,1,1,4,4,5

JavaScript数组去重的7种方式

1.利用额外数组 function unique(array) {    if (!Array.isArray(array)) return;     let newArray = [];    for(let i=0, len=array.length; i<len; i++) {        let itemAtIndex = array[i];        if (!newArray.includes(itemAtIndex)) { // newArray.indexOf(itemAt