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数组去重的几种方法
这个老问题,网上普遍都有了,为什么要再写一遍呢,主要是为了记个笔记... 遍历时搜索结果数组 思路很明确,如下 新建一个数组存放结果 循环遍历原数组,对于每一个元素,在结果数组中搜索是否存在 若不存在 ...
随机推荐
- 为bookStore添加权限【动态代理和注解】
前言 目前为止,我们已经学习了动态代理技术和注解技术了.于是我们想要为之前的bookStore项目添加权限控制-.. 只有用户有权限的时候,后台管理才可以进行相对应的操作-.. 实现思路 之前我们做权 ...
- Spring - bean的依赖关系(depends-on属性)
depends-on是bean标签的属性之一,表示一个bean对其他bean的依赖关系.乍一想,不是有ref吗?其实还是有区别的,<ref/>标签是一个bean对其他bean的引用,而de ...
- MultipleOutputs新旧api
package MRNB_V4; import java.io.IOException; import java.util.Iterator; import org.apache.hadoop.con ...
- 防止html5的video标签在iphone中自动全屏
问题: 当在iphone中打开html5页面中的video视频时,会默认调取系统播放器,全屏播放视频资源. 解决方式: 1. 首先在html5页面的video标签中添加webkit-playsinli ...
- MMORPG战斗系统随笔(二)、浅谈场寻路Flow Field PathFinding算法
转载请标明出处http://www.cnblogs.com/zblade/ 今天给大家带来一篇游戏中寻路算法的博客.去年,我加入一款RTS的游戏项目,负责开发其中的战斗系统,战斗系统的相关知识,属于游 ...
- 初学node.js有感三
WebStorm下的node.js 一.回顾与继续 在前面,我们知道了node.js的基本框架和思路,在这些原生环境下我们对node.js的设计思想有了比较深刻的认识,并且具有了编写大型程 ...
- 再起航,我的学习笔记之JavaScript设计模式28(委托模式)
## 委托模式 ### 概念介绍 **委托模式(Entrust): **多个对象接收并处理同一请求,他们将请求委托给另一个对象统一处理请求. ### 利用委托优化循环 如果我们有一个需求需要让用户点击 ...
- bzoj1027 [HNOI2004]打鼹鼠
[HNOI2004]打鼹鼠 2014年5月2日2,8605 Description 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿Q编写了一个打鼹鼠 ...
- Jmeter脚本调试——关联(正则表达式)
关联,在脚本中,是必应用到的一个设置方法,将脚本中,每次都会动态变化的特殊值进行关联.一个能正确执行的脚本,都需要进行关联(LR.jmeter). Jmeter关联: 在脚本回放过程中,客户端发出请求 ...
- Log4j按级别输出日志到不同文件配置分析 (转:projava)
关于LOG4J 按照级别输出日志,并按照级别输出到不同文件中的说法有很多, 网上贴的最多的log4j.properties的设置是这样的 log4j.rootLogger=info,stdout,in ...