JavaScript数组去重的7种方式
1.利用额外数组
function unique(array) {
if (!Array.isArray(array)) return;
let newArray = [];
for(let i=0, len=array.length; i<len; i++) {
let itemAtIndex = array[i];
if (!newArray.includes(itemAtIndex)) { // newArray.indexOf(itemAtIndex) === -1
newArray.push(itemAtIndex);
}
}
return newArray;
}
2.indexOf与lastIndexOf
function unique(array) {
if (!Array.isArray(array)) return;
for(let i=0; i<array.length; i++) {
let itemAtIndex = array[i];
if (array.indexOf(itemAtIndex) !== array.lastIndexOf(itemAtIndex)) {
array.splice(i, 1);
i--; // array 与 array.length change
}
}
return array; // 顺序可能会改变
}
注: 利用额外数组配合indexOf与lastIndexOf 取出未重复出现的元素
function unique(array) {
if (!Array.isArray(array)) return;
let newArray = [];
for(let i=0, len=array.length; i<len; i++) {
let itemAtIndex = array[i];
if (array.indexOf(itemAtIndex) === array.lastIndexOf(itemAtIndex)) {
newArray.push(itemAtIndex);
}
}
return newArray;
}
3.filter
function unique(arr) {
return arr.filter(function(item, index, arr) {
// 取出元素, 该元素在数组中第一次出现的索引 === 当前索引值
return arr.indexOf(item, 0) === index;
});
}
4.双层for循环
function unique(array) {
if (!Array.isArray(array)) return;
for(var i=0; i<array.length; i++) {
for(var j=i+1; j<array.length; j++) {
if (array[j] === array[i]) {
array.splice(j, 1);
j--; // array 与 array.length change
}
}
}
return array;
}
5.利用sort排序后, 相邻元素不相等
function unique(array) {
if(!Array.isArray(array)) return;
array.sort();
for (let i=0; i<array.length; i++) {
if (i <= array.length-2) {
if (array[i+1] === array[i]) {
array.splice(i+1, 1);
i--; // array 与 array.length change
}
}
}
return array; // 顺序可能会改变
}
6.利用对象key唯一的特性(这个方法还能标记出重复元素的数量); 另, map原理与object一致
function unique(array) {
if (!Array.isArray(array)) return;
let obj = {};
for(let i=0, len=array.length; i<len; i++) {
let itemAtIndex = array[i];
obj[itemAtIndex] = '';
}
let newArray = [];
for(let key in obj) {
newArray.push(Number(key));
}
return newArray; // 顺序可能会改变
}
7.利用ES6 set
function unique(array) {
if (!Array.isArray(array)) return;
return Array.from(new Set(array)); // [...new Set(array)]
}
测试函数及测试用例
function ensureEqual(a, b, message) {
if (JSON.stringify(a) !== JSON.stringify(b)) {
console.log(`***测试失败, ${JSON.stringify(a)} 不等于 ${JSON.stringify(b)}, ${message}`);
}
};
ensureEqual(unique([1,2,3,3,4,4,5,5,6,1,9,3,25,4]), [1,2,3,4,5,6,9,25], 'test1');
以上就是JavaScript数组去重的较为常规的方式;其中,第3种比较不容易想到;另,由于业务中一般处理的都是相同类型的数据,因此这里数组里的数据统一为数值类型,并未做混合类型的考虑。
JavaScript数组去重的7种方式的更多相关文章
- js 数组去重的几种方式及原理
let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,' ...
- javascript 数组去重的6种思路
前端在日常开发中或多或少都会碰到有对数据去重的需求,实际上,像是lodash这些工具库已经有成熟完备的实现,并且可以成熟地运用于生产环境.但是这并不妨碍我们从思维拓展的角度出发,看看去重可以用几种思路 ...
- JavaScript数组去重的几种方法
这个老问题,网上普遍都有了,为什么要再写一遍呢,主要是为了记个笔记... 遍历时搜索结果数组 思路很明确,如下 新建一个数组存放结果 循环遍历原数组,对于每一个元素,在结果数组中搜索是否存在 若不存在 ...
- JavaScript数组去重的10种方法
「数组去重」的确是个老生常谈的问题了,但是你真正的掌握了吗?平时开发中是不是用最简单粗暴的方法来去重?注意到它的性能问题了吗?当面试官对你回答的四个去重方法都不满意时你可以想出更简单且性能能更好的方法 ...
- javascript数组去重的3种方法
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! javascript数组去重 <!DOCTYPE html> <html> < ...
- JS 数组去重的几种方式
JS 常见的几种数组去重方法 一.最简单方法(indexOf 方法) 实现思路:新建一个数组,遍历要去重的数组,当值不在新数组的时候(indexOf 为 -1)就加入该新数组中: function u ...
- JavaScript数组去重的四种方法
今天,洗澡的想一个有趣的问题,使用js给数组去重,我想了四种方法,虽然今天的任务没有完成,5555: 不多说,po代码: //方法一:简单循环去重 Array.prototype.unique1 ...
- [转] JavaScript数组去重(12种方法)
数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码.如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看.在真实的项目中碰到的数组去重,一般都是 ...
- reduce计算数组中每个元素出现的次数 数组去重的几种方式 将多维数组转化为一维
// js计算数组中每个元素出现的次数 // var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; // var countedNames = ...
随机推荐
- PHP+Swoole并发编程的魅力
PHP语言是一个短生命周期的Web编程语言,很多PHPer已经形成了fpm下编程的思维定势.实际上在Swoole出现之后,这种串行化编程的模式早已被打破.使用Swoole完全可以轻易实现更灵活的并发编 ...
- Cef 因系统时间不正常,导致页面访问空白问题
当我们的系统时间不正常,比如设置一个日期-1999年9月9日,会引发证书问题. 系统时间不正常-IE有概率能访问 触发NavigateError事件,异常代码INET_E_INVALID_CERTIF ...
- nyoj 97-兄弟郊游问题(数学)
97-兄弟郊游问题 内存限制:64MB 时间限制:3000ms 特判: No 通过数:18 提交数:32 难度:2 题目描述: 兄弟俩骑车郊游,弟弟先出发,每分钟X米,M分钟后,哥哥带一条狗出发.以每 ...
- vue项目中安装使用vux
vux是个vue的移动端框架. 目前移动端UI框架这么多,为啥选择vux呢?vux虽然说是个个人维护项目,但是有15000+个star,应该不比其他的团队开源框架差. 最重要的是,目前要做微信公众号和 ...
- windows 10 上源码编译opengv | compile opengv on windows 10 from source
本文首发于个人博客https://kezunlin.me/post/51cd9fa0/,欢迎阅读! compile opengv on windows 10 from source Series co ...
- 20191010-4 alpha week 1/2 Scrum立会报告+燃尽图 02
此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/8747 一.小组情况 组长:迟俊文 组员:宋晓丽 梁梦瑶 韩昊 刘信鹏 队名 ...
- linux bash编程之函数和循环控制
函数:实现独立功能的代码段 函数只有在调用时才会执行 语法一: function F_NAME{ 函数体 } 语法二: F_NAME() { 函数体 } 函数的返回值: 默认函数返回值:函数执行状态返 ...
- 【Java实例】使用Thumbnailator生成缩略图(缩放、旋转、裁剪、水印)
1 需求 表哥需要给儿子报名考试,系统要求上传不超过30KB的图片,而现在的手机随手一拍就是几MB的,怎么弄一个才30KB的图片呢? 一个简单的办法是在电脑上把图片缩小,然后截屏小图片,但现在的电脑屏 ...
- Java字节码深度剖析
Java字节码文件查看 我们有一个类Test01,具体内容如下: package bytecode; public class Test01 { private int i = 0; public i ...
- Celery框架实现异步执行任务
Celery 官方 Celery 官网:http://www.celeryproject.org/ Celery 官方文档英文版:http://docs.celeryproject.org/en/la ...