js中,数组如何去重?基础指南_数组指南攻略

关于如何去除一个给定数组中的重复项,应该是 Javascript 面试中最常见的一个问题了,最常见的方式有三种: Set 、 Array.filter 以及 Array.reduce ,对于只有简单数据的数组来讲,我最喜欢 Set ,没别的,就是写起来简单。const originalArray = [1, 2, ‘咩’, 1, ‘Super Ball’,

js中,数组如何去重?基础指南

关于如何去除一个给定数组中的重复项,应该是 Javascript 面试中最常见的一个问题了,最常见的方式有三种: Set 、 Array.filter 以及 Array.reduce ,对于只有简单数据的数组来讲,我最喜欢 Set ,没别的,就是写起来简单。

js中,数组如何去重?基础指南_数组指南攻略

const originalArray = [1, 2, '咩', 1, 'Super Ball', '咩', '咩', 'Super Ball', 4]
const bySet = [...new Set(originalArray)]
const byFilter = originalArray.filter((item, index) => originalArray.indexOf(item) === index)
const byReduce = originalArray.reduce((unique, item) => unique.includes(item) ? unique : [...unique, item], [])

使用Set

先让我们来看看 Set 到底是个啥?

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

const bySet = […new Set(originalArray)] 这一段的操作,我们将它拆分来看:

const originalArray = [1, 2, '咩', 1, 'Super Ball', '咩', '咩', 'Super Ball', 4]

const uniqueSet = new Set(originalArray)
// 得到 Set(5) [ 1, 2, "咩", "Super Ball", 4 ]

const bySet = [...uniqueSet]
// 得到 Array(5) [ 1, 2, "咩", "Super Ball", 4 ]

在将 Set 转为 Array 时,也可以使用 Array.from(set)。

使用Array.prototype.filter 

要理解 filter 方法为什么可以去重,需要关注一下另一个方法 indexOf

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

filter 方法接受两个参数:

  • 第一个参数:一个回调函数, filter 会将数据中的每一项都传递给该函数,若该函数返回 真值,则数据保存,返回 假值,则数据将不会出现在新生成的数据中
  • 第二个参数:回调函数中 this 的指向

我们将上面的去重方法按下面这样重写一下,就可以看清整个 filter 的执行过程了。

const originalArray = [1, 2, '咩', 1, 'Super Ball', '咩', '咩', 'Super Ball', 4]

const table = []

const byFilter = originalArray.filter((item, index) => {
  // 如果找到的索引与当前索引一致,则保留该值
  const shouldKeep = originalArray.indexOf(item) === index
  table.push({
    序号: index,
    值: item,
    是否应该保留: shouldKeep ? '保留' : '删除'
  })
  return shouldKeep
})

console.log(byFilter)
console.table(table)
序号是否应该保留
01保留第一次出现
12保留第一次出现
2保存第一次出现
31删除第二次出现
4Super Ball保留第一次出现
5删除第二次出现
6删除第三次出现
7Super Ball删除第二次出现
84保留第一次出现

使用Array.prototype.reduce 

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行),将其结果汇总为单个返回值。

Array.prototype.reduce 方法接受两个参数:

  • Callback:回调函数,它可以接收四个参数

    • Accumulator:累计器,这个其实是让很多人忽略的一点,就是,累计器其实可以是任何类型的数据 

    • Current Value:当前值 

    • Current Index:当前值的索引 

    • Source Array:源数组

  • Initial Value:累计器的初始值,就跟累计器一样,这个参数也总是被绝大多数人忽略

 就像 filter 章节一样,我们来看看 reduce 的执行过程:  

const originalArray = [1, 2, '咩', 1, 'Super Ball', '咩', '咩', 'Super Ball', 4]

const byReduce = originalArray.reduce((unique, item, index, source) => {
  const exist = unique.includes(item)
  const next = unique.includes(item) ? unique : [...unique, item]
  console.group(`遍历第 ${index} 个值`)
  console.log('当前累计器:', unique)
  console.log('当前值:', item)
  console.log('是否已添加进累计器?', exist)
  console.log('新值', next)
  console.groupEnd()
  return next
}, [])
海计划公众号
(0)
上一篇 2020/03/26 23:36
下一篇 2020/03/26 23:36

您可能感兴趣的内容

  • 如何使用React搭建前端?入门指南_react入门百科

    1.首先说明node.js、npm、cnpm分别是做什么的?node.js简单的说 Node.js 就是运行在服务端的 JavaScript,安装了node.js默认安装了npm,可以使用npm -v查看是否安装。npm可以理解为远程仓库,如果我们要使用npm需要先把需要的包写到package.json文件中,并执行npm install。下载的包文件都会存

    2020/03/26
  • 腾讯 AlloyTeam 团队入门基础腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究

    腾讯 AlloyTeam 团队基础入门 官方网址:http://www.alloyteam.com/ 简介描述:腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究

    2020/03/05
  • Ladda新手入门_按钮提交后多种加载动画效果

    Ladda新手入门 官方网址:http://lab.hakim.se/ladda/ GitHub:https://github.com/hakimel/Ladda 简介描述:按钮提…

    2020/03/06
  • 前端项目重构要点总结小白教程_重构菜鸟攻略

    什么项目,为何会重构?项目是公司主打业务产品之一的可视化子项目,与其他子项目几乎没有耦合,所以可以单独拎出来重构。具体业务不作描述。技术主要用的是Vue2系列和JavaScript,还有一个自研的可视化工具库。第一个重构原因就是没有引入静态类型,导致查看一个对象结构需要翻来覆去在多个文件中查找。第二是因为之前新增代码模式一般为:“来一个需求加一段代码”,长期

    2020/03/29
  • 前端开发工程师必须关注的几个性能指标基础教程_性能入门知识

    于页面相应时间,有一条著名的“2-5-8原则”。当用户访问一个页面:在2秒内得到响应时,会感觉系统响应很快;在2-5秒之间得到响应时,会感觉系统的响应速度还可以;在5-8秒以内得到响应时,会感觉系统的响应速度很慢,但可以接受;而超过8秒后仍然无法得到响应时,用户会感觉系统糟透了,进而选择离开这个站点,或者发起第二次请求。对于一个网站如果希望抓住用户,网站的速

    2020/03/30
  • vegas小白帮助_一个jQuery / Zepto幻灯片插件

    vegas小白帮助 官方网址:http://vegas.jaysalvat.com GitHub:https://github.com/jaysalvat/vegas 简介描述:一…

    2020/03/06
  • Js输出方式有哪些?小白知识_js知识小白指南

    1.通过弹窗的形式来输出alert(需要输出的内容);alert(“hello world”);confirm(需要输出的内容);confirm(“你好吗?”);prompt(需要输出的内容);prompt(“请输入内容:”);注意点:如果需要输出的内容不是数字, 那么就必须通过单引号或者双引号括起来在JavaScript中是严格区分大小写的, alert(

    2020/03/22
  • UIMovement使用帮助_创意UI设计作品订阅网

    UIMovement使用帮助 官方网址:https://uimovement.com/ 简介描述:创意UI设计作品订阅网 UI Movement 网站是一个致力于手机和分享最好的U…

    2020/03/06
  • 浏览器HTML自带懒加载技术指南攻略_加载入门攻略

    对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行:1、加载初始的 HTML 响应内容2、加载懒加载库3、加载图片假如浏览器能直接支持懒加载,那是最好的,这一想法也不是不可能哦!从Chrome 75开始,我们可以通过切换两个开关来手动启用懒加载功能,可能最新的Chrome将会默认开启懒加载功能了,就是

    2020/03/24
  • useEffect Hook 是如何工作的?使用帮助_hooks使用指南

    想象一下:你有一个非常好用的函数组件,然后有一天,咱们需要向它添加一个生命周期方法。刚开始咱们可能会想怎么能解决这个问题,然后最后变成,通常的做法是将它转换成一个类。但有时候咱们就是要用函数方式,怎么破? useEffect hook 出现就是为了解决这种情况。使用useEffect,可以直接在函数组件内处理生命周期事件。 如果你熟悉 React class

    2020/03/24
  • javascript倒计时代码 攻略教程JS实现活动精确倒计时思路和方法_活动使用帮助

    背景前端页面倒计时功能在很多场景中会用到,如运营活动开始倒计时和活动结束倒计时,又如购物网站的秒杀倒计时,抢购倒计时,还有我们手Q春节抢红包倒计时等等……. 最近的话费代付项目中,也涉及倒计时功能,但在开发过程中遇到一些麻烦和坑点,下面和大家分享一下最后是如何解决的。坑点手Q春节抢明星红包活动,就有产品吐槽两个手机在不同时间点打开同一个活动显示的开抢倒计时不

    2020/04/05
  • nodejs如何启动多进程?菜鸟指南_进程基础教程

    Node.js 以单线程的模式运行,使用事件驱动来处理异步 IO 并发(底层是多线程的线程池)。然而,要是 Node 运行在一个多核 CPU 上,如何让 Node 充分利用多核的优势,并行地处理任务?我们可以使用多进程。由于 Node 的单线程特性,开启多进程后,Node 也获得多线程的执行能力。Node提供了child_process模块来创建子进程。No

    2020/03/22
  • css-doodle使用帮助_一个制作Web图案的组件

    css-doodle使用帮助 官方网址:https://css-doodle.com GitHub:https://github.com/css-doodle/css-doodle…

    2020/03/07
  • ownCloud入门教程_比较强大的网盘源码

    ownCloud小白指南 官方网址:https://owncloud.org/ 简介描述:比较强大的网盘源码 ownCloud – The last cloud col…

    2020/03/06
  • input accept属性限制文件上传格式使用说明_上传攻略教程

    上传文件的类型;具体做法如下所示:注意:accept属性可以限制上传格式,其有兼容性如下《1》上传.csv格式的《2》上传.xls格式《3》上传.xslx格式<input text

    2020/03/30
  • 为什么json 不能使用 int64类型基础知识教程_json使用指南

    json 简介JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999的一个子集 。 JSON采用完全独立于语言

    2020/03/29