首页 > 其他分享 >js-数组内置函数-filter、map、forEach、reduce

js-数组内置函数-filter、map、forEach、reduce

时间:2024-07-24 16:06:36浏览次数:19  
标签:map arr const name reduce js item score 数组

1、过滤数组 -filter

筛选数组元素,并生成新数组
//过滤出分数为60分以上的数据
<script>
    const arr = [
      {'name':'张三','score':80},
      {'name':'张六','score':50},
      {'name':'李四','score':90},
      {'name':'王五','score':60},
    ]

    const newArr = arr.filter(function(item,index){
      return item.score>=60
    }) 

    console.log(newArr)
</script>

2、迭代数组-map

返回新数组,新数组里面的元素是处理之后的值,经常用于处理数据
<script>
  //给数据的分数都加上10分
  const arr = [
    {'name':'张三','score':80},
    {'name':'张六','score':50},
    {'name':'李四','score':90},
    {'name':'王五','score':60},
  ]

  arr.map(function(item,index){
    item.score+=10
  }) 

  console.log(arr)
</script>

3、遍历数组-forEach

不返回,用于不改变值,经常用于查找打印输出值
<script>
  //遍历数组
  const arr = [
    {'name':'张三','score':80},
    {'name':'张六','score':50},
    {'name':'李四','score':90},
    {'name':'王五','score':60},
  ]

  arr.forEach(function(item,index){
    console.log(item.name)
  }) 
</script>

4、累计器-reduce

返回函数累计处理的结果,经常用于求和等
//语法:arr.reduce(function(累计值, 当前元素){}, 起始值)

// prev=5初始化值
<script>
  const arr = [1, 2, 3]
  const re = arr.reduce((prev, item) => prev + item,5)
  console.log(re)
</script>

 

标签:map,arr,const,name,reduce,js,item,score,数组
From: https://www.cnblogs.com/ygbh/p/18320999

相关文章

  • Windows使用NVM管理node.js
    NVM(NodeVersionManager)是一个开源的命令行工具,用于管理多个版本的Node.js在同一台计算机上。NVM允许开发者轻松地安装、切换和管理不同版本的Node.js,这对于在多个项目上工作或测试Node.js的不同特性时非常有用。在macOS或Linux上,通常通过curl或wget下载安......
  • 【踩坑系列-JS】iframe中的url参数获取
    Author:赵志乾Date:2024-07-24Declaration:AllRightReserved!!!1.问题描述    系统A的页面中以iframe的方式嵌入了系统B的页面,并需要将A页面url中的参数传递给B页面。    最初的实现方式是:在B页面直接以下面的代码获取url参数,发现参数的值为undefined。let......
  • JS之webpack
    目录一、认识webpack1.1webpack数组形式1.2webpackde对象形式一、认识webpackWebpack是一个现代的静态模块打包工具,它主要用于前端开发中的模块化打包和构建。通过Webpack,开发者可以将多个模块(包括JavaScript、CSS、图片等)进行打包,生成优化后的静态资源文件,以供在浏览器中加......
  • 【计算机毕业设计】ssm497网上茶叶销售平台设计与开发+jsp
    计算机网络发展到现在已经好几十年了,在理论上面已经有了很丰富的基础,并且在现实生活中也到处都在使用,可以说,经过几十年的发展,互联网技术已经把地域信息的隔阂给消除了,让整个世界都可以即时通话和联系,极大的方便了人们的生活。所以说,网上茶叶销售平台用计算机技术来进行设计,......
  • 【计算机毕业设计】ssm495题库管理系统的设计与实现+jsp
    随着考试的增多,需要管理的试卷越来越多。现在大多数学校考试的方式采用老师出卷安排考试时间,学生参与的方式。这种方式效率低、灵活性低,每门课程的考卷组成就给老师的统计整理工作造成困难。目前,网络发展成熟,各类管理系统层出不穷,如果可以有专业的管理系统提供网上考试,则可......
  • 数据结构(Java):Map集合&Set集合&哈希表
    目录1、介绍1.1 Map和Set1.2模型2、Map集合2.1Map集合说明2.2 Map.Entry<K,V>2.3Map常用方法2.4Map注意事项及实现类 3、Set集合3.1Set集合说明 3.2 Set常用方法 3.3Set注意事项及其实现类4、TreeMap&TreeSet4.1集合类TreeMap(Key-Value模型)4.1.1底......
  • JAVA常见面试题-Map接口有哪些实现类
    HashMap、TreeMap、LinkedHashMap、Hashtable、Properties由于Map中结构特点(Key无序的,不可重复,并且使用Set存储所有的key,value无序的,可重复,并且使用Collection存储所有的value)故key所在类需要重写hashCode(),equal()方法,value只需要重写equal。一个键值对:key-value构成了一个......
  • NodeJS小饰品销售管理系统-计算机毕业设计源码21597
    基于JavaScript技术的小饰品销售管理系统设计与实现摘要在当今的数字化时代,电子商务已经成为了商业领域中不可或缺的一部分。随着消费者对于购物体验的要求越来越高,一个高效、便捷、用户友好的小饰品销售管理系统显得尤为重要。本系统旨在利用JavaScript技术,设计并实现......
  • 了解package.json中npm run命令的执行原理,以及直接运行shell命令
    了解npmrun在package.json文件中的script字段,可以定义脚本命令,通过npmrun指令运行该脚本。比如简单定义一个输出打印的shell脚本。{"script":{"hw":"echohelloworld!"}}执行npmrunhw可以看到终端上打印出了helloworld!。我们可以在很多工程项目中......
  • JS实现一个发布-订阅模式(观察者模式)
    //创建一个简单的事件中心,允许对象订阅事件、发布事件并取消订阅。//创建一个事件中心对象,IIFE,返回一个包含订阅、取消订阅和发布方法的对象constEventCenter=(function(){//存储事件及其对应的订阅者,存储事件及其对应的监听器数组constevents={}......