网站首页 > 技术文章 正文
下边介绍3种方法,可以过滤掉数组相同的元素。其中我最中意的是Set, 因为最简洁,简单。
1. 使用Set
先看一下Set定义:
Set对象是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。
Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。
通过数组参数创建Set,因为Set只接受唯一值,重复的值会被去掉。
创建之后,重复的值会被去掉。然后在用...操作符转换回数组。
把Set转换为数组还可以使用Array.from,如下:
2. 使用Filter
介绍这种方法之前,先熟悉一下indexOf, filter这两个api方法:
indexOf: 返回第一个找到的元素的索引值,找到了就立马返回
filter: 根据条件过滤元素,返回符合条件的新数组。如果条件返回true, 则元素包含在新数组中;如果条件返回false, 则新数组中不包含这个元素。
下边是打印结果:
也可以获取重复的元素:
3.使用Reduce
通过reducer函数,符合条件就把元素添加到结果数组中,不用额外创建数组变量。
打印结果:
三种方法介绍完了,可以结合具体使用场景去选择使用。
相关文章:
参考:
[Set]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
[filter]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
[reduce]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
- 上一篇: 每天学点 ES6 —— 扩展运算符 和 函数
- 下一篇: ES6 数组解构赋值(es6 结构赋值)
猜你喜欢
- 2024-10-11 js中传统和es6方式 实现数组去重(js数组去重方法es6)
- 2024-10-11 重读《学习JS数据结构与算法-第三版》- 第3章 数组 二
- 2024-10-11 ES6的这些操作技巧,你会吗(es6 教程)
- 2024-10-11 Es6基础语法(es6的语法有哪些)
- 2024-10-11 ES6之扩展运算符的精彩操作(...扩展运算符)
- 2024-10-11 JS面试之数组的几个不low操作(js 数组面试题)
- 2024-10-11 数组的扩展(数组扩展长度的方法)
- 2024-10-11 ES6中Array数组你应该知道的操作(es6数组排序的方法)
- 2024-10-11 ES6 数组的遍历方法最重要的不在代码本身,而是语义化!
- 2024-10-11 ES6 数组解构赋值(es6 结构赋值)
- 02-21走进git时代, 你该怎么玩?_gits
- 02-21GitHub是什么?它可不仅仅是云中的Git版本控制器
- 02-21Git常用操作总结_git基本用法
- 02-21为什么互联网巨头使用Git而放弃SVN?(含核心命令与原理)
- 02-21Git 高级用法,喜欢就拿去用_git基本用法
- 02-21Git常用命令和Git团队使用规范指南
- 02-21总结几个常用的Git命令的使用方法
- 02-21Git工作原理和常用指令_git原理详解
- 最近发表
- 标签列表
-
- cmd/c (57)
- c++中::是什么意思 (57)
- sqlset (59)
- ps可以打开pdf格式吗 (58)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- java是值传递还是引用传递 (58)
- 无效的列索引 (74)