javascript数组去重方法汇总
时间:2022-06-02
本文章向大家介绍javascript数组去重方法汇总,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
数组去重已经是一个老生常谈的问题了,依然经久不息,经过岁月的变迁es标准的升级迭代,似乎有越来越多的方法和方式供我们使用,那么那种方式才是最优的?那种才是最简洁的?这个我们一起来探讨。
省略:传统的递归方法,这里我就不说了,是最传统也是最笨的方法。
方法一:es5使用filter
使用Array.prototype.filter()方法,对元素进行过滤;
var array = [2, "2", 2, "2"];
// es5 使用filter
function unique(array) {
var obj = {};
return array.filter(function (item, index) {
var fullItem = (typeof item + item);
return obj.hasOwnProperty(fullItem) ? false : (obj[fullItem] = true);
});
}
console.log(unique(array)); //[2,"2"]
方法二:使用es6 Set
Set里的元素只能出现一次,即元素是唯一的。
下面的代码中也使用了(...)扩展语句,简单来说就是把数组转换成n个对象的方法。
相关链接:Set
var array = [2, "2", 2, "2"];
//es6 使用Set特性(Set元素只会出现一次,即元素是唯一的)
let unique = (array) => [...new Set(array)]; //(...)扩展语句,简单来说就是把数组参数转换为多个对象参数
console.log(unique(array)); //[2,"2"]
方法三:使用es6 Map
Map也是es6新出的数据类型,方法set、has、get、clear、delete、keys都挺好用的。
相关链接:Map
var array = [2, "2", 2, "2"];
//es6 Map 本质使用的还是Array.prototype.filter()
function unique(array) {
let m = new Map();
return array.filter((item) => !m.has(item) && m.set(item, 1));
}
console.log(unique(array));
总结
个人觉得最优的方案是第二种!欢迎补充,欢迎指正~
- 基于TensorFlow实现自编码器(附源码)
- Selenium2+python自动化53-unittest批量执行(discover)
- HTML/CSS/JavaScript学习笔记【持续更新】
- Selenium2+python自动化54-unittest生成测试报告(HTMLTestRunner)
- Selenium2+python自动化55-unittest之装饰器(@classmethod)
- 每天一个Linux命令(4)——mkdir
- 每天一个Linux命令(3)——pwd
- 11-移动端开发教程-zepto.js入门教程
- 【OpenCV学习笔记之一】图像加载,修改及保存
- 【干货】一种直观的方法认识梯度下降
- 漫谈Java IO之普通IO流与BIO服务器
- 浅谈强化学习的方法及学习路线
- 【亲测有效】Win10家庭版Microsoft Edge页面出现乱码的两种解决方案及gpedit.msc命令无法使用的解决策略
- Fiddler抓包7-post请求(json)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Yaml 速成查询表
- 设计模式实战-策略模式,想让你的代码变幻莫测吗?
- 设计模式实战-模板模式,代码复用神器
- CSS Flexbox 布局完全指南 (二):3000字,多示例讲解
- 设计模式实战-访问者模式,减少代码体积
- Spring Security 实战干货:UsernamePasswordAuthenticationFilter 源码分析
- 打卡群刷题总结0715——旋转链表
- 设计模式实战-中介模式,为你牵桥搭线
- 设计模式实战-迭代器模式,最常用的设计模式之一
- 设计模式实战-解释器模式,今天给你解疑答惑
- 时间不再浪费评估上!ThingJS 3D可视化开发不用愁
- 设计模式实战-命令模式
- 设计模式实战-责任链模式,超级实用
- 设计模式实战-代理模式,来看看主公如何托孤
- 设计模式实战-门面模式