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数组去重的几种方法
这个老问题,网上普遍都有了,为什么要再写一遍呢,主要是为了记个笔记... 遍历时搜索结果数组 思路很明确,如下 新建一个数组存放结果 循环遍历原数组,对于每一个元素,在结果数组中搜索是否存在 若不存在 ...
随机推荐
- Jquery总结图
读完锋利Jquery第二版书,对其进行整理做出的思维导图:
- JDBC第二篇--【PreparedStatment、批处理、处理二进制、自动主键、调用存储过程、函数】
这是我JDBC的第一篇 http://blog.csdn.net/hon_3y/article/details/53535798 1.PreparedStatement对象 PreparedState ...
- Java 删除项目中的.svn信息
有时候拿过来的war包或者源代码中有.svn信息,我们想删除掉它,然后再上传到自己的svn中. 我这里是自己写的java代码实现的. package com.bstek.transit; import ...
- mysql数据库-注释相关介绍
mysql执行的sql脚本中注释怎么写? mysql 服务器支持 # 到该行结束.-- 到该行结束 以及 /* 行中间或多个行 */ 的注释方格: mysql; # 这个注释直到该行结束 mysql; ...
- C# 各种常用集合类型的线程安全版本
在C#里面我们常用各种集合,数组,List,Dictionary,Stack等,然而这些集合都是非线程安全的,当多线程同时读写这些集合的时候,有可能造成里面的数据混乱,为此微软从Net4.0开始专门提 ...
- Vuforia开发完全指南---不懂编程也能做AR程序
不懂编程也能做AR程序 可能一听到要做AR程序,很多人都会想到这是程序员的事.如果不懂编程,不会写代码,是做不了AR程序的.其实,Vuforia的Unity SDK非常人性化,即使你不会编程,也能做出 ...
- 如何在mybatis 中使用In操作
如何在mybatis 中使用In操作 假如我们想使用这样一个sql 语句,但是这样的sql语句有IN这样的操作.在我们的mybatis中有相对应的操作 SELECT * FROM product_db ...
- 轻松把你的项目升级到PWA
什么是PWA PWA(Progressive Web Apps,渐进式网页应用)是Google在2015年推出的项目,致力于通过web app获得类似native app体验的网站. 优点 1.无需客 ...
- Java 简单实用方法二
整理以前的笔记,在学习Java时候,经常会用到一些方法.虽然简单但是经常使用.因此做成笔记,方便以后查阅 这篇博文先说明构造和使用这些方法. 1,判断String类型数据是否包含中文 可以通过正则表达 ...
- css3新属性的学习使用
display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...