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(itemAtIndex) === -1
            newArray.push(itemAtIndex);
        }
    }     return newArray;
}
2.indexOf与lastIndexOf
function unique(array) {
    if (!Array.isArray(array)) return;     for(let i=0; i<array.length; i++) {
        let itemAtIndex = array[i];
        if (array.indexOf(itemAtIndex) !== array.lastIndexOf(itemAtIndex)) {
            array.splice(i, 1);
            i--; // array 与 array.length change
        }
    }     return array; // 顺序可能会改变
}

注: 利用额外数组配合indexOf与lastIndexOf 取出未重复出现的元素

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 (array.indexOf(itemAtIndex) === array.lastIndexOf(itemAtIndex)) {
            newArray.push(itemAtIndex);
        }
    }     return newArray;
}
3.filter
function unique(arr) {
    return arr.filter(function(item, index, arr) {
      // 取出元素, 该元素在数组中第一次出现的索引 === 当前索引值
      return arr.indexOf(item, 0) === index;
    });
}
4.双层for循环
function unique(array) {
    if (!Array.isArray(array)) return;     for(var i=0; i<array.length; i++) {         for(var j=i+1; j<array.length; j++) {
            if (array[j] === array[i]) {
                array.splice(j, 1);
                j--; // array 与 array.length change
            }
        }     }     return array;
}
5.利用sort排序后, 相邻元素不相等
function unique(array) {
    if(!Array.isArray(array)) return;     array.sort();
    for (let i=0; i<array.length; i++) {
        if (i <= array.length-2) {
            if (array[i+1] === array[i]) {
                array.splice(i+1, 1);
                i--; // array 与 array.length change
            }
        }
    }     return array; // 顺序可能会改变
}
6.利用对象key唯一的特性(这个方法还能标记出重复元素的数量); 另, map原理与object一致
function unique(array) {
    if (!Array.isArray(array)) return;     let obj = {};
    for(let i=0, len=array.length; i<len; i++) {
        let itemAtIndex = array[i];
        obj[itemAtIndex] = '';
    }     let newArray = [];
    for(let key in obj) {
        newArray.push(Number(key));
    }     return newArray; // 顺序可能会改变
}
7.利用ES6 set
function unique(array) {
    if (!Array.isArray(array)) return;
    return Array.from(new Set(array)); // [...new Set(array)] 
}

测试函数及测试用例

function ensureEqual(a, b, message) {
    if (JSON.stringify(a) !== JSON.stringify(b)) {
        console.log(`***测试失败, ${JSON.stringify(a)} 不等于 ${JSON.stringify(b)}, ${message}`);
    }
}; ensureEqual(unique([1,2,3,3,4,4,5,5,6,1,9,3,25,4]), [1,2,3,4,5,6,9,25], 'test1');

以上就是JavaScript数组去重的较为常规的方式;其中,第3种比较不容易想到;另,由于业务中一般处理的都是相同类型的数据,因此这里数组里的数据统一为数值类型,并未做混合类型的考虑。

JavaScript数组去重的7种方式的更多相关文章

  1. js 数组去重的几种方式及原理

    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,' ...

  2. javascript 数组去重的6种思路

    前端在日常开发中或多或少都会碰到有对数据去重的需求,实际上,像是lodash这些工具库已经有成熟完备的实现,并且可以成熟地运用于生产环境.但是这并不妨碍我们从思维拓展的角度出发,看看去重可以用几种思路 ...

  3. JavaScript数组去重的几种方法

    这个老问题,网上普遍都有了,为什么要再写一遍呢,主要是为了记个笔记... 遍历时搜索结果数组 思路很明确,如下 新建一个数组存放结果 循环遍历原数组,对于每一个元素,在结果数组中搜索是否存在 若不存在 ...

  4. JavaScript数组去重的10种方法

    「数组去重」的确是个老生常谈的问题了,但是你真正的掌握了吗?平时开发中是不是用最简单粗暴的方法来去重?注意到它的性能问题了吗?当面试官对你回答的四个去重方法都不满意时你可以想出更简单且性能能更好的方法 ...

  5. javascript数组去重的3种方法

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! javascript数组去重 <!DOCTYPE html> <html> < ...

  6. JS 数组去重的几种方式

    JS 常见的几种数组去重方法 一.最简单方法(indexOf 方法) 实现思路:新建一个数组,遍历要去重的数组,当值不在新数组的时候(indexOf 为 -1)就加入该新数组中: function u ...

  7. JavaScript数组去重的四种方法

    今天,洗澡的想一个有趣的问题,使用js给数组去重,我想了四种方法,虽然今天的任务没有完成,5555: 不多说,po代码: //方法一:简单循环去重    Array.prototype.unique1 ...

  8. [转] JavaScript数组去重(12种方法)

    数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码.如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看.在真实的项目中碰到的数组去重,一般都是 ...

  9. reduce计算数组中每个元素出现的次数 数组去重的几种方式 将多维数组转化为一维

    // js计算数组中每个元素出现的次数 // var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; // var countedNames = ...

随机推荐

  1. nuxt遇到的问题(一)window 或 document is not defined

    因为用了VUE做的官网,既然是官网了避免不了SEO的问题了(该死当初就不应该选择用vue) 很自然就是选择了使用nuxt.js来做ssr预渲染了. 因为网站不是响应式的,PC / 移动端要进行对应跳转 ...

  2. 文件系统类型(ext4、xfs、fat32、vfat、ntfs、....)

    Linux 1.Linux:存在几十个文件系统类型:ext2,ext3,ext4,xfs,brtfs,zfs(man 5 fs可以取得全部文件系统的介绍) 不同文件系统采用不同的方法来管理磁盘空间,各 ...

  3. NIO流的学习以及Buffer的相关操作

    NIO的使用 一).什么叫NIO? 定义:是一套新的Java I/O标准, 在java1.4中被纳入JDK中. 二).NIO的实现方法 NIO是基于块的, 以块为基本单位处理数据. 标准的I/O是基于 ...

  4. mybatis精讲(三)--标签及TypeHandler使用

    目录 话引 XML配置标签 概览 properties 子标签property resource 程序注入 settings 别名 TypeHandler 自定义TypeHandler EnumTyp ...

  5. 【Linux系列】Centos7安装Samba并将工作区挂载到win(八)

    目的 本文主要介绍以下两点: 一. 安装Samba 二. 挂载到window 演示 一. 安装Samba Samba是基于smb协议的,主要作用是实现跨平台文件传输. 安装 yum install - ...

  6. 性能测试——记XX银行保全项目性能问题分析优化

    记XX银行保全项目性能问题分析优化 数据库问题也许是大部分性能问题的关注点,但是JAVA应用与数据库交互的关节,JDBC 就像是我们人体的上半身跟下半身的腰椎,支持上半身,协调下半身运动的重要支撑点. ...

  7. Three.js - 走进3D的奇妙世界

    本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界. 文章来源:宜信技术学院 & 宜信支付结算团队技术分享第6期-支付结算部支付研发团队前端研发高级工程师-刘琳<three. ...

  8. 2 JAVA语言的基本规则

    1. 类名 类名需使用字母开头,使用驼峰命名法,如HelloWorld,对应的文件为 HelloWorld.java,与类名保持一致.编译好的字节码文件为 HelloWord.class. 2. 区分 ...

  9. at、crontab、anacron的基本使用

    Linux的任务调度机制主要分为两种: 1. 执行一次:将在某个特定的时间执行的任务调度 at 2. 执行多次: crontab 3.关机后恢复尚未执行的程序 anacron. ①at at命令用于在 ...

  10. LESSON 5 - Markov Sources

    1.      Markov sources The state of the Markov chain is used to represent the “memory” of the source ...