这是从数组中筛选出重复项并仅返回唯一值的三种方法。我最喜欢的是使用Set,因为它是最短和最简单的。

1.使用Set

首先让我解释一下Set:Set是ES6中引入的新数据对象。因为Set仅允许您存储唯一值。传递数组时,它将删除所有重复的值。

好的,让我们回到我们的代码并分析正在发生的事情。有两件事发生:首先,我们Set通过传递数组来创建一个新数组。由于Set仅允许唯一值,因此将删除所有重复项。

现在重复项不见了,我们将使用扩散运算符...将其转换回数组const array = ['i',1,2,'i','i',3];

// Step 1

const uniqueSet = new Set(array);

const newArrary = [...uniqueSet];

使用Array.from转换Set为数组

另外,您也可以使用Array.from转换Set为数组:const array = ['i',1,2,'i','i',3];

Array.from(new Set(array));

2:使用filter

为了理解此选项,让我们看一下这两种方法的作用:indexOf和filter。

indexOf

该indexOf方法返回从数组中找到的所提供元素的第一个索引。const array = ['i',1,2,'i','i',3];

array.indexOf('i'); //0

array.indexOf(1); //1

array.indexOf(2); //2

array.indexOf(3); //5

filter

该filter()方法创建一个新的元素数组,这些数组可以通过我们提供的条件。换句话说,如果元素通过并返回true,它将被包含在过滤后的数组中。并且任何失败或返回false的元素都将不在过滤后的数组中。

让我们进入并逐步了解遍历数组时发生的情况。const array = ['i',1,2,'i','i',3];

array.filter((item, index) => {

console.log(item,index,array.indexOf(item),arrary.indexOf(item) === index,);

return array.indexOf(item) === index

});

下面是上面显示的console.log的输出。重复项是索引与indexOf不匹配的地方。因此,在这些情况下,条件将为false,并且不会包含在我们的过滤数组中。

检索重复值

我们还可以使用filter方法从数组中检索重复的值。我们可以这样简单地调整条件来做到这一点:const array = ['i',1,2,'i','i',3];

array.filter((item,index)=>array.indexOf(item)!==index);

3:使用reduce

该reduce方法用于减少数组的元素,并根据传递的某些reducer函数将它们组合为最终数组。

在这种情况下,我们的reducer函数将检查最终数组是否包含该项。如果没有,则将该项目推入我们的最终数组。否则,跳过该元素并按原样返回我们的最终数组(实质上跳过该元素)。

Reduce总是很难理解,所以让我们也进入每种情况并查看输出:const array = ['i',1,2,'i','i',3];

array.reduce((unique,item) => {

console.log(item, unique, unique.includes(item), unique.includes(item)?unique:[...unique,item],);

return unique.includes(item)?unique:[...unique,item]

}, []);

es6去除重复项_javascript在ES6中从数组中筛选出重复项并仅返回唯一值相关推荐

  1. Excel数据太多,不会筛选重复数据?只需1键,即可筛选出重复数据

    在日常工作中,相信很多人都会遇到这样的问题:Excel表格中的数据太多了,而且其中还有一些重复的数据,想要快速筛选出,但是又不会. 其实,想要快速筛选出重复的数据是有方法的.只要掌握下面这些方法,1秒 ...

  2. 从Ruby中删除数组中的重复元素

    本文翻译自:Remove duplicate elements from array in Ruby I have a Ruby array which contains duplicate elem ...

  3. xlsx表格怎么筛选重复数据_怎样在excel2010中筛选出重复数据呢?

    数据是信息的表现形式和载体,可以是符号.文字.数字.语音.图像.视频等.数据和信息是不可分离的,数据是信息的表达,信息是数据的内涵.在这一篇教程里面,小编主要和大家简单的介绍一下:怎样在Excel20 ...

  4. php数组重复值销毁,如何从PHP中删除数组中的重复值

    如何从PHP中删除数组中的重复值 如何从PHP中删除数组中的重复值? 21个解决方案 204 votes 使用array_unique(). 例: $array = array(1, 2, 2, 3) ...

  5. 3.js中判断数组中是否存在某个对象/值,判断数组里的对象是否存在某个值 的五种方法 及应用场景|判断数组里有没有某对象,有不添加,没有则添加到数组

    3.js中判断数组中是否存在某个对象/值,判断数组里的对象是否存在某个值 的五种方法 及应用场景 一.当数组中的数据是简单类型时: 应用js中的indexof方法:存在则返回当前项索引,不存在则返回 ...

  6. 如何从JavaScript中删除数组中的元素?

    本文翻译自:How to remove element from an array in JavaScript? var arr = [1,2,3,5,6]; I want to remove the ...

  7. C++与C语言中有关数组中元素排序

    C++与C语言中有关数组中元素排序 C语言中 ​ #include<stdio.h> #define n 4 int main(){ int a[n]; int i,j,temp; for ...

  8. PHP中获取数组中单列的值

    PHP中获取数组中单列的值如下: 利用PHP中的数组函数 array_column():返回数组中某个单列的值.(PHP 5.5+适用) 语法: array_column(array,column_k ...

  9. python多维数组添加元素_numpy中三维数组中加入元素后的位置详解

    今天做数据处理时,遇到了从三维数组中批量加入二维数组的需求.其中三维数组在深度学习的特征数据处理时经常会使用到,所以读者有必要对该小知识点做到清楚了解并掌握.现对三维数组中的元素位置结合代码做详细归纳 ...

最新文章

  1. 【USACO training】Chapter 1 入门
  2. jenkins slave在master显示和运行问题
  3. docker网络原理
  4. Android模拟器Genymotion安装apk
  5. 文巾解题 1433. 检查一个字符串是否可以打破另一个字符串
  6. php 获取URL 各部分参数
  7. SDN 作业提示器(持续更新)
  8. SAP Spartacus 的 CSS 架构
  9. ROS笔记(2) Kinetic 的安装和配置
  10. 分布式存储--理解分布式文件系统、分布式块存储、分布式对象存储、分布式数据库
  11. java多线程生产者与消费者案例_多线程操作实例——生产者与消费者
  12. UFT开发代码实例:将Excel中的数据保存为数组
  13. WPS怎么统计相同名称的数据_批量操作同一格式的多表格汇总统计
  14. Mac 10.12安装Windows远程桌面工具Microsoft Remote Desktop
  15. GNSS最终、快速、超快速星历下载地址汇总
  16. AOP切面用aspectjweaver.jar实现代码
  17. ECharts饼状图legend显示Value所占百分比
  18. 中继器系列:中继器增删改查
  19. 物联网RFID技术之应用ETC系统
  20. 室内定位方案部署WIFI定位还是IBeacon定位-新导智能

热门文章

  1. Tableau图表 • 瀑布图
  2. Outlook接收邮件时不删除服务器上的邮件
  3. didReceiveIQ
  4. 成功人士应该具备的十二个条件
  5. 谈顺丰与菜鸟的数据断交事件
  6. 使用OpenCV+Python进行图像处理的初学者指南
  7. SpringBoot中属性映射之开启驼峰命名
  8. UI设计中的ICON图标的区别是什么
  9. AP6256完美代替AP6255
  10. 公众号快速吸粉提高微信分销商城的转化率案例分析