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)];
}
JavaScript数组去重方法汇总的更多相关文章
- JavaScript 数组去重 方法汇总
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- JavaScript数组去重方法及测试结果
最近看到一些人的去面试web前端,都说碰到过问JavaScript数组去重的问题,我也学习了一下做下总结. 实际上最有代表性也就三种方法:数组双重循环,对象哈希,排序后去重. 这三种方法我都做了性能测 ...
- JavaScript 数组去重方法总结
1.遍历数组法: 这应该是最简单的去重方法(实现思路:新建一新数组,遍历数组,值不在新数组就加入该新数组中) // 遍历数组去重法 function unique(arr){ var _arr = [ ...
- javaScript数组去重方法
在JAvascript平时项目开发中经常会用到数组去重的操作.这时候就要用到JS数组去重的方法了. demo1: 第一种:JS数组去重操作方法是利用遍历原数组,利用数组的indexOf()方法来来判断 ...
- js 数组去重方法汇总
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- JavaScript 数组(Array)方法汇总
数组(Array)常用方法; 数组常用的方法:concat(),every(), filter(), forEach(), indexOf(), join(), lastIndexOf(), map ...
- JavaScript数组去重方法总结
一.双重遍历去重 function onlyFigure(arr) { let newarr = []; const length = arr.length for (let i = 0; i < ...
- JavaScript实现数组去重方法
一.利用ES6 Set去重(ES6中最常用) function unique (arr) { return Array.from(new Set(arr)) } var arr = [1,1,'tru ...
- JavaScript数组去重的几种方法
这个老问题,网上普遍都有了,为什么要再写一遍呢,主要是为了记个笔记... 遍历时搜索结果数组 思路很明确,如下 新建一个数组存放结果 循环遍历原数组,对于每一个元素,在结果数组中搜索是否存在 若不存在 ...
随机推荐
- LCA问题第二弹
LCA问题第二弹 上次用二分的方法给大家分享了对 LCA 问题的处理,各位应该还能回忆起来上次的方法是由子节点向根节点(自下而上)的处理,平时我们遇到的很多问题都是正向思维处理困难而逆向思维处理比较容 ...
- 最详细的cookie和浏览隐私之间的关系
本文所说的"cookie",指的是浏览器相关的 cookie(也叫"HTTP cookie"). 浏览器 cookie 的主要功能是:帮助网站保存一些小片段的信 ...
- MVC轻量web应用
前言:为了能够清晰的理解mvc架构,以一个简单的mvc架构web应用为例.例子为一个beer项目,用户可通过页面选择啤酒的种类,服务端根据用户的选择,给出相应的推荐. 涉及到的代码: view层:fo ...
- JDFS:一款分布式文件管理系统,第四篇(流式云存储续篇)
一 前言 本篇博客是JDFS系列博客的第四篇,从最初简单的上传.下载,到后来加入分布式功能,背后经历了大量的调试,尤其当实验的虚拟计算结点数目增加后,一些潜在的隐藏很深的bug就陆续爆发.在此之前笔者 ...
- javascript插入before(),after()新DOM方法
随着web的技术突飞猛进的发展.HTML5 ES6等新技术的发展,与此同时DOM等标准也在悄悄的进步,各大浏览器也在悄悄的发展适配新的属性和方法,今天我们来看看Javascript新的DOM的方法 二 ...
- “一切都是消息”--MSF(消息服务框架)入门简介
“一切都是消息”--这是MSF(消息服务框架)的设计哲学. MSF的名字是 Message Service Framework 的简称,中文名称:消息服务框架,它是PDF.NET框架的一部分. 1,M ...
- Spring常用注解介绍【经典总结】
Spring的一个核心功能是IOC,就是将Bean初始化加载到容器中,Bean是如何加载到容器的,可以使用Spring注解方式或者Spring XML配置方式. Spring注解方式减少了配置文件内容 ...
- 通过express搭建自己的服务器
前言 为了模拟项目上线,我们就需要一个服务器去提供API给我们调用数据.这次我采用express框架去写API接口.所有请求都是通过ajax请求去请求服务器来返回数据.第一次用node写后端,基本就是 ...
- Hadoop安全(2)——————UserGroupInformation
UserGroupInformation保存hadoop用户及组信息 此类包装JAAS Subject,并提供确定用户的用户名和组的方法.它支持Windows,Unix和Kerberos登录模块.
- hdu1671字典树
Phone List Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...