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)];
}

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

  1. JavaScript 数组去重 方法汇总

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

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

    最近看到一些人的去面试web前端,都说碰到过问JavaScript数组去重的问题,我也学习了一下做下总结. 实际上最有代表性也就三种方法:数组双重循环,对象哈希,排序后去重. 这三种方法我都做了性能测 ...

  3. JavaScript 数组去重方法总结

    1.遍历数组法: 这应该是最简单的去重方法(实现思路:新建一新数组,遍历数组,值不在新数组就加入该新数组中) // 遍历数组去重法 function unique(arr){ var _arr = [ ...

  4. javaScript数组去重方法

    在JAvascript平时项目开发中经常会用到数组去重的操作.这时候就要用到JS数组去重的方法了. demo1: 第一种:JS数组去重操作方法是利用遍历原数组,利用数组的indexOf()方法来来判断 ...

  5. js 数组去重方法汇总

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  6. JavaScript 数组(Array)方法汇总

    数组(Array)常用方法; 数组常用的方法:concat(),every(), filter(), forEach(),  indexOf(), join(), lastIndexOf(), map ...

  7. JavaScript数组去重方法总结

    一.双重遍历去重 function onlyFigure(arr) { let newarr = []; const length = arr.length for (let i = 0; i < ...

  8. JavaScript实现数组去重方法

    一.利用ES6 Set去重(ES6中最常用) function unique (arr) { return Array.from(new Set(arr)) } var arr = [1,1,'tru ...

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

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

随机推荐

  1. Struts第八篇【资源国际化、对比JSP的资源国际化】

    资源国际化 我们在学JSTL标签的时候就涉及到了资源国际化,,,但是呢,在JSP的章节我并没有写博文来讲解怎么弄-.一方面感觉JSP的资源国际化好麻烦,另一方面是感觉用的地方很少-..因此就没有深入去 ...

  2. java基础知识2--String,StringBufffer,StringBuilder的区别

    String,StringBufffer,StringBuilder的区别 1.可变不可变方面 String类中使用字符数组保存字符串  ,final 修饰当然是不可变的,用String来操作字符串的 ...

  3. 解决Maven管理的项目下"Missing artifact xxx bundle"问题

    例如使用maven编译使用了mina的包的工程,出现如下提示:  [INFO] Scanning for projects... [INFO]                             ...

  4. input type="hidden" js获取不到值(document.getelementbyid OR $(#).val())

    <head> <input type="hidden" name="aplStatus" id="aplStatus" v ...

  5. 常见注入手法第二讲,APC注入

    常见注入手法第二讲,APC注入 转载注明出处 首先,我们要了解下什么是APC APC 是一个简称,具体名字叫做异步过程调用,我们看下MSDN中的解释,异步过程调用,属于是同步对象中的函数,所以去同步对 ...

  6. 移动端与PHP服务端接口通信流程设计(增强版)

    增强地方一: 再增加2张表,一个接口表,一个授权表,设计参考如下: 接口表 字段名 字段类型 注释 api_id int 接口ID api_name varchar(120) 接口名,以"/ ...

  7. java 对象的序列化与反序列化

    一.序列化和反序列化的概念 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通常存 ...

  8. Python扩展方法一二事

    前言 跟着一个有强迫症的老板干活是一件极其幸福的事情(你懂的).最近碰到一个问题,简单的说就是对一个对象做出部分修改后仍然返回此对象,于是我就写了一个方法,老板看了之后只有一句话:不雅观,改成直接对此 ...

  9. 在Storyboard中为UITableView添加Header和Footer

    我在这里所说的Header和Footer并不是sectionHeader和sectionFooter,而是指UITableView的tableHeaderView和tableFooterView,这两 ...

  10. MySQL数据备份之mysqldump使用(转)

    mysqldump常用于MySQL数据库逻辑备份. 1.各种用法说明 A. 最简单的用法: mysqldump -uroot -pPassword [database name] > [dump ...