专栏首页web前端教室常用技巧之JS判断数组中某元素出现次数

常用技巧之JS判断数组中某元素出现次数

现在前端开发经常需要从api中获取返回的数组,

也许是array,也许是json,

不管是什么,都需要对返回的数据进行再处理,

其中一个重要且经常用到的操作,

就是“判断重复”及“重复的次数”

例如,

返回一个班级的json,

要求判断有多少个孩子的年龄是相同的?

这种对数据的操作很常见的。。

现在我们先看代码:

看不清,不要紧,我大概讲一下,很简单的。

首先它的结构是这样的:

(1),声明一个新的数组newArr,一个临时变量temp,一个计数器count;

(2),一个二重嵌套的for循环;

(3),一个if判断;

(4),一个return方法;

那么,在运行的时候呢,

arrCheck这个函数的参数arr,就是我们要传入的数组[1,2,3,3,4]了;

首先声明一个新数组newArr=[],一个temp,一个计数器;

然后进入第一重for循环,

在这里把数组[1,2,3,3,4]的每项通过

temp = arr[i];

赋值给temp,

然后在第二重for循环里,用if(arr[j] == temp)来进行比较,

可能有些同学对于for for嵌套循环有点晕,其实这个很简单的,

就是外层for循环数组一个数,

内层for循环整个数组一遍,

看上面的代码示例,可以很清楚的看到,

i循环一个数字,j把整个数组循环了一遍;

那就意味着,数组有多长,

就会用for for嵌套把整个数组循环多少次

那么回来这个判断重复次数的例子中来,

我们可以通过for for循环中的if(arr[j] == temp)

把整个数组中的每一项,都和整个数组进行一次比较,

如果相等,就把count++,

然后执行arr[j]=-1,为什么要这么做呢?

因为这样就可以不再比较,已经确定重复的数组项了。

例如,arr=[1,2,3,3,4]

arr[2]是3,

arr[3]也是3

那么3已经确定是重复并计数过的了,就不再比较它了。

然后 if(temp != -1),

这个就比较好理解了,它只是一个筛选判断而已,

用来不显示被值为-1的值。

大家运行下示例程序,就明白了。

最后就是返回已经筛选完成的新数组 newArr。

这个小例子的重点有三个:

1,通过嵌套for循环,把数组的每一项,跟整个数组中的所有项,比较一遍;

2,通过if判断,如果有相等的项,count++,并把相等的项置为-1,这样可以判断等于-1的就是重复的,就不再加入新数组了;

3,用if判断!=-1,决定是否加入新数组中,返回。

完了,

很简单吧,

还看不懂的同学,可以用console.log,一步一步的打印结果,帮助理解。

JS判断重复数组是否有重复项

本文分享自微信公众号 - web前端教室(webfeel),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-01-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS判断重复数组是否有重复项

    大家好,今天我们来讲一下,如何使用javascript判断一个数组之中,是否有相同重复的元素。 在讲之前,先来讲一下思路: 在现实当中,当我们要判断某几个东西...

    web前端教室
  • 大白话,设计一个购物车对象

    image.png 今天的作业是,设计一个购物车对象。就是这个购物车对象,通过prototype来添加各种方法,然后通过new一个新对象之后,就可以调用它的...

    web前端教室
  • 常用技巧之JS判断重复

    如何判断数组中是否有相同的元素呢? 先来讲下思路: 现实中,要判断某个东西是否相同,那就意味着这东西至少是有2个或更多, 否则单个东西没法比较。 数组也是一样,...

    web前端教室
  • js数组中一些实用的方法(forEach,map,filter,find)

    需求场景: 假若后端返回这么一个json数据格式,如下所示,我们需要拿到返回对象中的数组项,或者根据某些指定的条件,取特定的值,然后渲染到页面当中去,例如:拿n...

    itclanCoder
  • lodash源码分析之compact中的遍历

    本文为读 lodash 源码的第三篇,后续文章会更新到这个仓库中,欢迎 star:pocket-lodash

    对角另一面
  • 免疫组织化学实验

    下面是2个视频的中的操作步骤,关于免疫组化,我们之前也发过文章:免疫组化实验,可以进行参考。

    DoubleHelix
  • 科学计算库Numpy——运算

    py3study
  • SSH框架之旅-spring(3)

    Spring 框架是一站式的框架,针对 JavaEE 的三层结构,每一层都有解决的技术,在 DAO(数据操作层)使用 jdbcTempalte。并且 Sprin...

    Wizey
  • 人机对话系统回复质量的自动化评估

    CodeInHand
  • MyBatis TypeHandler的注册和使用流程分析

    所有的TypeHandler都统一的注册到TypeHandlerRegistry中,其中分别保存了JdbcType对应的TypeHandler(低优先级),对象...

    十毛

扫码关注云+社区

领取腾讯云代金券