当前位置: 首页 > news >正文

【js】map、filter、reduce、fill(待补充...)

const arr = [{ id: 1, flag: true },{ id: 2, flag: true },{ id: 3, flag: false },{ id: 4, flag: true },
]

map:返回的是对每个元素进行操作后的结果数组,这个数组的长度和原数组相同

const result = arr.map((item: any) => {return item.flag === false	
})
console.log(result)
// [false, false, true, false]

filter:返回的是原数组内满足条件的元素组成的新数组

const result = arr.filter((item: any) => {return item.flag === false
})
console.log(result)
// [{ id: 3, flag: false }]

reduce:数组的高阶函数,用于对数组的每一个元素进行归约操作,最终返回一个单一的值
reduce包含两个参数:

  • callback():回调函数,用于执行归约操作,它有四个参数:
    1. accumulator:累加器,累计回调函数的返回值,它是归约过程的中间结果
    2. currentValue:arr.reduce也是循环数组,currentValue就是当前循环到的数组中的每条数据
    3. currentIndex:索引
    4. array:原始数组
  • initValue:初始值,这个是可选参数,作为归约操作的初始值。
    1. 如果提供了初始值,则累加器accumulator将从初始值开始累计;
    2. 如果没有提供初始值,则累加器将从数组的第一个元素开始累计,跳过第一个元素。
Array.reduce(callback(accumulator, currentValue, currentIndex, Array), initValue)

举例说明reduce

const students = [{ name: 'Alice', age: 20, score: 85 },{ name: 'Bob', age: 21, score: 90 },{ name: 'Charlie', age: 19, score: 95 },{ name: 'David', age: 20, score: 80 },
]const totalScore = students.reduce((accumulator, currentValue) => {return accumulator + currentValue.score
}, 0)const averageScore = totalScore / students.lengthconsole.log(averageScore)	// 87.5

fill:用于将数组中的元素替换为指定值,fill会修改原始数组,并返沪修改后的数组

  • value :要用来替换数组元素的值。
  • start :可选参数,指定替换开始的索引,默认为 0。
  • end :可选参数,指定替换结束的索引(不包含在内),默认为数组的长度。
arr.fill(value, start, end)
const arr = [1, 2, 3, 4, 5]
arr.fill(0, 2, 4)
console.log(arr)
// [1, 2, 0, 0, 5]
Array(5).fill('--')
// Array(number)用于创建一个指定长度的数组,比如:Array(5)创建了一个长度为5的新数组,该数组的每个元素都是undefined,再用fill给该数组中的值都替换为'--',就得到了['--', '--', '--', '--', '--']
http://www.lryc.cn/news/163334.html

相关文章:

  • 【JPC出版】第二届能源与电力系统国际学术会议 (ICEEPS 2023)
  • 51单片机的简易篮球计分器倒计时仿真设计( proteus仿真+程序+原理图+报告+讲解视频)
  • 医院安全不良事件报告系统源码 PHP+ vue2+element+ laravel8+ mysql5.7+ vscode开发
  • Mybatis -- 读取 DATE 类型字段时可能遇到的问题(夏令时问题)
  • 第10节-PhotoShop基础课程-选区工具
  • 【C++】C++动态内存管理
  • Java中使用JTS实现WKT字符串读取转换线、查找LineString的list中距离最近的线、LineString做缓冲区扩展并计算点在缓冲区内的方位角
  • 【异步VS多线程】异步VS多线程区别
  • 【nosql】redis之高可用(主从复制、哨兵、集群)搭建
  • js如何实现数组去重的常用方法
  • XREAL Air 2 Pro发布,加入电致变色技术,拓展AR眼镜使用场景
  • Go基础11-理解Go语言的包导入
  • 【MySQL数据库原理】在MySQL Workbench界面运行SQL代码——学生管理系统
  • 高分三号1米分辨率飞机检测识别数据集
  • Unity 之Material 类型和 MeshRenderer 组件中的 Materials 之间有一些重要的区别
  • 【LeetCode-简单题】977. 有序数组的平方
  • 【笔试强训选择题】Day39.习题(错题)解析
  • Prometheus-Alertmanager 警报管理器-部署和设置
  • 恒运资本:小盘股的优点?投资小盘股要注意哪些方面?
  • LeetCode:2. 两数之和
  • OpenCV(二十四):可分离滤波
  • 【JS进阶】防抖与节流
  • 【css】linear-gradient()的用法
  • java: 读取snakeyaml-1.26.jar各种jar包时出错; error in opening zip file
  • 医疗知识图谱 neo4j
  • 【LeetCode-简单题】367. 有效的完全平方数
  • vben-admin中渲染table表格时怎么处理不同的数据结构
  • 从零开始在树莓派上搭建WordPress博客网站并实现公网访问
  • Go基础18-理解方法的本质以选择正确的receiver类型
  • Go基础12-理解Go语言表达式的求值顺序