javascript 数组去重的方法
前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!
方法一
//注意有一个元素是空的
var test1 = [0, 0, 1, 1, 2, 'sss', 2, , 3, 'abc', 3, 4, 4, 'sss', 'apple', 5, 5, 6, 7, 8, 9, function a() {}];
//第一种方法是遍历新数组newArr里有没有包含arr里的i项,如果没有则向newArr里添加arr[i]项,如果有则跳过
//需考虑indexOf()的兼容性问题
function arrayUnique1(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(arrayUnique1(test1)); //[0, 1, 2, "sss", undefined, 3, "abc", 4, "apple", 5, 6, 7, 8, 9, function]
方法二
var test2 = [0, 0, 1, 1, 2, 'sss', 2, , 3, 'abc', 3, 4, 4, 'sss', 'apple', 5, 5, 6, 7, 8, 9, function a() {}];
//先将数组进行排序,重复元素会在相邻位置
//拿原数组第i个和新数组的最后一个进行比较,如果不同,则将该元素存入新数组中
//该方法由于使用sort()方法,所以会改变数组顺序
function arrayUnique2(arr) {
arr.sort();
var newArr = [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== newArr[newArr.length - 1]) {
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(arrayUnique2(test2)); //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "abc", "apple", function, "sss", undefined]
方法三
var test3 = [0, 0, 1, 1, 2, 'sss', 2, , 3, 'abc', 3, 4, 4, 'sss', 'apple', 5, 5, 6, 7, 8, 9, function a() {}];
//不太熟悉hash表,大概意思如下:
//遍历原数组,每次从原数组取出一个元素,然后到新对象中去访问这个属性,如果不能访问到值,则把它存放到新数组中,同时把这个元素作为一个属性,并赋值为true,存入到新建立的对象中。如果能访问到值,则说明重复;
//访问对象的属性有两种方式 obj['attr'] 或者 obj.attr;
//当知道具体属性名时可以用obj.attr,如arr.length;当不确定属性名时,就要用obj['attr'];
//这两种方法区别上不大,都有对应的使用场景。点表示法一般作为静态对象使用时来存取属性。而数组表示法在动态存取属性时就非常有用。
function arrayUnique3(arr) {
var newArr = [],
hash = {};
for (var i = 0; i < arr.length; i++) {
if (!hash[arr[i]]) {
hash[arr[i]] = true;
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(arrayUnique3(test3)); //[0, 1, 2, "sss", undefined, 3, "abc", 4, "apple", 5, 6, 7, 8, 9, function]
方法四
const arr = [];
// 生成[0, 100000]之间的随机数
for (let i = 0; i < 100000; i++) {
arr.push(0 + Math.floor((100000 - 0 + 1) * Math.random()))
}
// ...实现算法
console.time('test');
let a = [...new Set(arr)].sort((a, b) => a - b)
console.log(a)
console.timeEnd('test');
console.log(arr.sort((a, b) => a - b))
方法五
const arr = [];
// 生成[0, 100000]之间的随机数
for (let i = 0; i < 100000; i++) {
arr.push(0 + Math.floor((100000 - 0 + 1) * Math.random()))
} Array.prototype.unique = function () {
const tmp = new Map();
return this.filter(item => {
return !tmp.has(item) && tmp.set(item, 1);
})
} // ...实现算法
console.time('test');
console.log(arr.unique().sort((a, b) => a - b))
console.timeEnd('test');
console.log(arr.sort((a, b) => a - b))
javascript 数组去重的方法的更多相关文章
- <javaScript> 数组去重的方法总结(2017年)
现在要求去重下面这个数组: const arr = [1, 2, 3, 3, 3, '0', '1', '2', '测试', '重复', '重复', NaN, NaN, false, false]; ...
- JavaScript数组去重方法及测试结果
最近看到一些人的去面试web前端,都说碰到过问JavaScript数组去重的问题,我也学习了一下做下总结. 实际上最有代表性也就三种方法:数组双重循环,对象哈希,排序后去重. 这三种方法我都做了性能测 ...
- javaScript数组去重方法
在JAvascript平时项目开发中经常会用到数组去重的操作.这时候就要用到JS数组去重的方法了. demo1: 第一种:JS数组去重操作方法是利用遍历原数组,利用数组的indexOf()方法来来判断 ...
- JavaScript 数组去重方法总结
1.遍历数组法: 这应该是最简单的去重方法(实现思路:新建一新数组,遍历数组,值不在新数组就加入该新数组中) // 遍历数组去重法 function unique(arr){ var _arr = [ ...
- JavaScript 数组去重 方法汇总
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- javascript数组去重的三种常用方法,及其性能比较
在进行数组操作时往往会遇到去掉重复项的问题,下面简单介绍下数组去重的方法,以及其执行效率 方法一 采用两次循环 原理:拿当前的和他后面的比,如果后面的有重复的就干掉 ...
- [转] JavaScript数组去重(12种方法)
数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码.如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看.在真实的项目中碰到的数组去重,一般都是 ...
- 也谈面试必备问题之 JavaScript 数组去重
Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...
- javascript数组 去重
数组去重的方法有很多,到底哪种是最理想的,自己不清楚.于是自己测试了下数组去重的效果和性能.测试十万个数据,代码和所耗大概时间如下. 到底采用哪种方法,根据实际情况而定吧. /*方法一: 1,'1' ...
随机推荐
- BaggingClassifier
写在前面 Ensemble methods 组合模型的方式大致为四个:/bagging / boosting / voting / stacking ,此文主要简单叙述 bagging算法. 算法 ...
- 使用 If-Then-Else 逻辑进行分支
If-then-else 逻辑看似简单,功能却十分强大,它可以根据不同条件执行不同的操作.If-then-else 逻辑可理解为:如果某个条件为 true (IF),则执行某个操作:如果条件为 fal ...
- CSRF in asp.net mvc and ap.net core
如果在方法上添加了[ValidateAntiForgeryToken],没处理好 请求没有带参数 2019-09-17 14:02:45,142 ERROR [36]: System.Web.Mvc. ...
- python -- 安装+pip+requests
python3 安装库 sudo python3 -m pip install beautifulsoup4 步骤1:安装pyenv 为了能顺利的将系统的python和下载的python版本呼唤, ...
- android.mk-include
-- include $(BUILD_STATIC_LIBRARY)表示编译成静态库 include $(BUILD_SHARED_LIBRARY)表示编译成动态库. include $(BUILD_ ...
- android: ListView设置emptyView 误区
使用ListVIew 来设置EmptyView的时候须注意: ListView listview = (ListView) findViewById(R.id.list); View emptyVie ...
- opencv常见示例
1.批量转换灰度图并保存 #include <iostream> #include <opencv2/opencv.hpp> #include <string> u ...
- Zend Studio汉化失败,如何给Zend Studio进行汉化
首先,相信看我这篇博文的人也都遇到了和博主我一样的烦恼,就是汉化Zend Studio失败! 话不多说! 方案一,在线安装汉化包 Help–>Install New Software—>W ...
- 25 Flutter仿京东商城项目 购物车页面布局
加群452892873 下载对应25课文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^0.1.2 flutter_swi ...
- -bash: netstat: 未找到命令
[root@localhost ~]# netstat -lunpt -bash: netstat: 未找到命令 [root@localhost ~]# yum -y install net-tool ...