027_JavaScript数组迭代

最新推荐文章于 2024-11-24 15:08:45 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-11-24 15:08:45 发布

阅读量157

点赞数

分类专栏： JavaScript学习文章标签： javascript web前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109568977

版权

JavaScript学习专栏收录该内容

105 篇文章

订阅专栏

1. forEach()方法

1.1. forEach()方法为数组每个元素调用一次函数(回调函数)。

1.2. forEach()方法回调函数接受3个参数, 按顺序依次是: 项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。

1.3. 实例

1.3.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>forEach()方法</title>
	</head>
	<body>
		<script type="text/javascript">
			var numbers = [45, 4, 9, 16, 25];
			
			numbers.forEach(myFunction1);
			function myFunction1(value, index, array) {
				document.write(value + " "); 
			}

			document.write('<br />'); 
			
			numbers.forEach(myFunction2);
			// 上面的例子只用了value参数, 因此也可以简写为:
			function myFunction2(value) {
				document.write(value + " "); 
			}
		</script>
	</body>
</html>

1.3.2. 效果图

2. map()方法

2.1. map()方法通过对数组每个元素执行函数来创建新数组。

2.2. map()方法不会对没有值的数组元素执行函数。

2.3. map()方法不会更改原始数组。

2.4. map()方法回调函数接受3个参数, 按顺序依次是: 项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。

2.5. 实例

2.5.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>map()方法</title>
	</head>
	<body>
		<script type="text/javascript">
			var numbers1 = [45, 4, 9, 16, 25];

			function myFunction(value, index) {
				document.write('数组第' + (index + 1) + '元素执行函数。<br />');
				return value * 2;
			}

			document.write(numbers1 + '<br />');
			delete numbers1[0];
			document.write(numbers1 + '<br />');

			var numbers2 = numbers1.map(myFunction);
			document.write(numbers1 + '<br />'); 
			document.write(numbers2);
		</script>
	</body>
</html>

2.5.2. 效果图

3. reduce()和reduceRight()方法

3.1. reduce()方法在数组每个元素上运行函数, 以生成单个值。

3.2. reduce()方法在数组中从左到右工作。

3.3. reduce()方法不会减少原始数组。

3.4. reduce()方法回调函数接受4个参数, 按顺序依次是: 初始值/先前返回的值、项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。

3.5. reduce()方法还能够接受一个初始值。

3.6. reduceRight()方法和reduce()方法唯一不同是在数组中从右到左工作。

3.7. 实例

3.7.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>reduce()和reduceRight()方法</title>
	</head>
	<body>
		<script type="text/javascript">
			var numbers = [45, 4, 9, 16, 25];
			
			function myFunction(total, value, index, array) {
				document.write('数组第' + (index + 1) + '元素执行函数。<br />');
				return total + value;
			}

			document.write(numbers + '<br />'); 

			var sum1 = numbers.reduce(myFunction, 0);			
			document.write(sum1 + '<br />'); 

			var sum2 = numbers.reduceRight(myFunction, 10);
			document.write(sum2);
		</script>
	</body>
</html>

3.7.2. 效果图

4. filter()方法

4.1. filter()方法过滤数组创建一个包含通过测试的新数组。

4.2. filter()方法回调函数接受3个参数, 按顺序依次是: 项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。

5. every()方法

5.1. every()方法检查数组所有值是否通过测试。

5.2. every()方法回调函数接受3个参数, 按顺序依次是: 项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。

6. some()方法

6.1. some()方法检查数组某些值是否通过了测试。

6.2. some()方法回调函数接受3个参数, 按顺序依次是: 项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。

6.3. 实例

6.3.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>filter()、every()和some()方法</title>
	</head>
	<body>
		<script type="text/javascript">
			var numbers = [45, 4, 9, 16, 25];

			function myFunction(value, index, array) {
				return value > 18;
			}

			document.write(numbers + '<br />');

			var over18 = numbers.filter(myFunction); 
			document.write(over18 + '<br />');

			var value1 = numbers.every(myFunction);
			document.write(value1 + '<br />');

			var value2 = numbers.some(myFunction);
			document.write(value2);
		</script>
	</body>
</html>

6.3.2. 效果图

7. indexOf()和lastIndexOf()方法

7.1. indexOf()方法在数组中搜索元素值并返回其位置。和字符串的indexOf()用法一样。

7.2. indexOf()方法包含2个参数

7.3. indexOf()方法如果未找到项目, 返回-1。

7.4. indexOf()方法如果项目多次出现, 则返回第一次出现的位置。

7.5. lastIndexOf()与indexOf()类似, 但是从数组结尾开始搜索。

7.6. 实例

7.6.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>indexOf()和lastIndexOf()</title>
	</head>
	<body>
		<script type="text/javascript">
			var fruits = ["Apple", "Orange", "Apple", "Mango"];

			document.write('要查找的数组: ' + fruits + '<br />'); 
			document.write('Apple第一次出现的位置: ' + fruits.indexOf("Apple") + '<br />'); 
			document.write('从下标2的位置开始查找, Apple第一次出现的位置: ' + fruits.indexOf("Apple", 2) + '<br />'); 
			document.write('从结尾开始搜索, Apple第一次出现的位置: ' + fruits.lastIndexOf("Apple") + '<br />');
			document.write('从结尾下标为1的位置开始搜索, Apple第一次出现的位置: ' + fruits.lastIndexOf("Apple", 1) + '<br />');
		</script>
	</body>
</html>

7.6.2. 效果图

8. find()和findIndex()方法

8.1. find()方法返回通过测试函数的第一个数组元素的值。

8.2. findIndex()方法返回通过测试函数的第一个数组元素的索引。

8.3. find()和findIndex()方法调用函数接受3个参数, 按顺序依次是: 项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。

8.4. 实例

8.4.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>find()和findIndex()</title>
	</head>
	<body>
		<script type="text/javascript">
			var numbers = [4, 9, 16, 25, 29];

			var value = numbers.find(myFunction);
			var index = numbers.findIndex(myFunction);

			function myFunction(value, index, array) {
			  	return value > 18;
			}

			document.write('原始数组: ' + numbers + '<br />'); 
			document.write('数组中第一个大于18的元素是: ' + value + '<br />'); 
			document.write('数组中第一个大于18的元素的下标是: ' + index);
		</script>
	</body>
</html>

8.4.2. 效果图