js中对数组.map()、some()、every()、find()、filter()、reduce()的使用

最新推荐文章于 2024-05-15 14:16:12 发布

美酒没故事°

最新推荐文章于 2024-05-15 14:16:12 发布

阅读量911

点赞数

分类专栏：前端原生：JavaScript 文章标签： javascript 前端 map函数 filter函数 some函数

本文链接：https://blog.csdn.net/qq_42618566/article/details/104664040

版权

前端原生：JavaScript 专栏收录该内容

105 篇文章 9 订阅

订阅专栏

every()

用于判断数组所有元素是否都符合函数返回的条件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var array=[86,3,2,52,1];

		var result=array.every((i)=>{ // i相当于遍历的每条array的下标
			return i>2; // 需返回判断条件
		});
		
		console.log(array);   //为什么还要打印原数组？   因为该every()不会对原数组发生改变
		console.log(result);  // 所以上面用变量接收了，此时打印result变量即可得到结果
	</script>
</body>
</html>

js中对数组.map()、some()、every()、filter()的使用

some()

用于判断数组所有元素中是否有一条满足函数返回的条件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var array=[86,3,2,52,1];

		var result=array.some((i)=>{ // i相当于遍历的每条array的下标
			return i>2; // 需返回判断条件
		});
		
		console.log(array);
		console.log(result);
	</script>
</body>
</html>

js中对数组.map()、some()、every()、filter()的使用

find()

用于查找数组中第一个满足条件的元素，并返回

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>js find</title>
	</head>
	<body>
		<script type="text/javascript">
			var array=[3,2,52,1];
			
			var result=array.find((i)=>{ // i相当于遍历的每条array的下标
				return i>2; // 需返回满足条件
			});
			
			console.log(array);
			console.log(result);
		</script>
	</body>
</html>

在这里插入图片描述

filter()

用于过滤数组所有满足条件的元素，并返回
和every()有些像，但那是返回 ture或false，而filter()是返回符合条件的数组

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var array=[86,3,2,52,1];

		var result=array.filter((i)=>{ // i相当于遍历的每条array的下标
			return i>2; // 返回符合判断条件的结果
		});
		
		console.log(array);
		console.log(result);
	</script>
</body>
</html>

js中对数组.map()、some()、every()、filter()的使用

map()

处理数组的每个元素，并返回处理后的数组。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var array=[86,3,2,52,1];

		var result=array.map((i)=>{ // i相当于遍历的每条array的下标
			return i*2; // 需返回处理结果
		});
		
		console.log(array);
		console.log(result);
	</script>
</body>
</html>

js中对数组.map()、some()、every()、filter()的使用

reduce()

用于累加计算，返回结果
接收两个参数：function和params。function有有四个参数total, now, index, array。total是前值和后值得累加值，now是当前值，index索引，array数组自身。后两个非必传。params非必传，传递给函数的初始值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var array=[86,3,2,52,1,55];

		var result=array.reduce((total, now, index, array)=>{
		console.log(total, now, index, array);
			return total + now;
		});
		
		console.log(result);
	</script>
</body>
</html>