JavaScript filter(),map()与reduce()使用

love@xly

已于 2022-03-21 11:23:25 修改

阅读量1.2k

点赞数

分类专栏： vue 文章标签： javascript

于 2022-03-21 11:13:53 首次发布

本文链接：https://blog.csdn.net/weixin_50643189/article/details/123630599

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		// 高阶函数指以函数作为参数的函数
		let nums = [20,40,123,80,144,100]
		console.log(nums)
		/**
		 * filter(callback)函数
		 * filter用于过滤一个集合，返回一个新的集合
		 * @param {function} 回调函数 返回boolean值，true表示当前元素列入新数组，false表示当前元素被过滤
		 * @return {Collection | Array | ...} 过滤后的集合 
		 */
		console.log('过滤nums数组，返回小于等于100的数组元素')
		let newNums = nums.filter(n => n<=100)
		console.log(newNums)
		/**
		 * map(callback)函数
		 * map用于对一个集合中的每个元素进行一次统一操作
		 * @param {function} 回调函数 返回元素的新值，用于替换之前对应元素的值
		 * @return {Collection | Array | ...} 进行统一操作后的集合
		 */
		console.log('将数组中的所有元素值乘以2')
		let newNums2 = newNums.map(n => n*2)
		console.log(newNums2)
		/**
		 * reduce(callback,initValue)
		 * reduce用于对一个集合进行一次记录式的迭代操作，返回最终记录值
		 * @param {initValue} 初始化值，即第一次迭代时preValue的值  
		 * @param {callback} 回调函数 返回一个新的记录值
		 * 		    详情 function(preValue,item){ ... return val}
		 *          @param {preValue} 上一次迭代返回的记录值，如果是第一次迭代，返回初始值initValue（默认是0）
		 *          @param {item}     当前正在被遍历的元素
		 *          @return {val}     当次迭代后的新记录值
		 * @return {finalValue} 最终的记录值 
		 */
		console.log('将数组中的所有元素累加并加1000')
		let finalVal = newNums2.reduce((prev,n) => prev+n,1000)
		console.log(finalVal)
		
		console.log('链式操作')
		const t = nums.filter(n => n<=100).map(n => 2*n).reduce((prev,n) => prev+n,1000)
		console.log(t)
	</script>
	<body>
		
	</body>
</html>

高阶函数笔记整理，视频教程参考最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili