关于ES5里数组的常用方法

最新推荐文章于 2022-07-18 21:21:28 发布

刘大哥就是6

最新推荐文章于 2022-07-18 21:21:28 发布

阅读量359

点赞数

分类专栏：笔记文章标签： javascript js

本文链接：https://blog.csdn.net/tony_yang6/article/details/106897033

版权

笔记专栏收录该内容

99 篇文章 0 订阅

订阅专栏

1.查找

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var arr = [1,2,3,4,5,6,7,8,9];
			//查找某一项数据在数组之中的位置
			var res = arr.indexOf(5);
			//indexOf  数组如果存在那么返回当前数据的下标
			// 		      数据如果不存在那么返回-1
			//indexof的查找规则：找到第一个数据之后立即终止查找
			console.log(res);
			
			
			
			//lastindexof 从后往前找  找到第一个之后终止查找
			
			var res = arr.lastIndexOf(8);
			console.log(res);
		</script>
	</head>
	<body>
	</body>
</html>

2.迭代

           forEach=>专门用来遍历数组的,没有返回值
           map => 想要更改数组每一项的时候使用这个方法,返回值是数组
           fileter => 过滤返回值是数组
           every => 判定全部都;返回值是布尔值
           some => 判定有一个;返回值是布尔值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//原始封装
//			function forEach(arr,fn){
//				//遍历数组
//				for(var i =0;i<arr.length;i++){
//					//让函数调用数组项数次
//					fn();
//				}
//			}
//			var arr = [4,3,2,1,0];
//			//代码块的容器是函数
//			//传递一个匿名函数作为实参，给形参fn赋值
//			forEach(arr,function(){
//				//外部传入的函数根据数组项数调用n次
//				console.log(1);
//			});
			
			
			
			
//			function forEach(arr,fn){
//				//遍历数组
//				for (var i =0; i<arr.length;i++) {
//					//让函数调用数组项数次
//					//arr[i]
//					fn(arr[i],i,arr);
//					
//				}
//			}
//			
//			var arr = [4,3,2,1,0];
//			//代码块的容器是函数
//			//传递一个匿名函数作为实参，给形参fn赋值
//			forEach(arr , function(item){
//				//外部传递的函数根据数组项数调用n次
//				//代码块的作用就是用来处理数组之中的每一项
//				//console.log(item);
//				//优势在于：不改变forEach函数内部代码的前提下，可以随意改变输出方式
//				
//				//document.write(item);
//				console.log(item,index,arr);
//			});
//			

			//迭代器的使用
			//forEach:
			//数组的API因为调用方式arr.forEach();   forEach=>this
			//arr.forEach();
			
			var arr = [4,3,2,1,0,];
			arr.forEach(function(){
				//根据数组有多少项，执行对应次数匿名函数
				console.log(item,index,arr);
			})
			
			
			//API学习，必须要关注的点
			//1.参数：函数(函数会被执行数组项数次，并且传入数组的每一项内容，和遍历时的下标)
			//2.返回值:undefined
			//3.作用: 遍历数组，写代码量少，以后可能在各种环境配合下使用起来更简便
			
			
			//map方法
			//有返回值，就是每次函数执行的返回值组成的数组
			//可以改变数组之中所有项，返回改变之后的新数组
			
//			var arr = [4,3,2,1,0,];
//			var res = arr.map(function(item,index,arr){
//				//基本结构使用和forEach没有任何区别
//				//console.log(item,index,arr)
//				
//				return parseInt(item*1.3*10)/10;
//			})
//			
//			console.log(res);

			//filter方法
			//有返回值，一个数组，筛选之后的数组
			//如何进行筛选，函数的返回值为true，则表示选中当前数据，数组之中就会添加这一项数据
			//			   函数的返回值为false,则表示过滤，数组之中不会添加这一项数据
			
//			var arr = [4,3,2,1,0,];
//			var res = arr.filter(function(item,index,arr){
//				// return true;
//				//过滤功能在这里还要写条件
//				return item > 3;
//			})
//			//函数什么都不写的情况下执行结果为undefined，那么每一项内容都不会放进新数组之中
//			console.log(res);




			//every 判定方法
			//返回值是一个布尔值
			//必须所有的函数执行结果都是true，返回结果才为true
//			var arr = [1,2,3,4,5,6];
//			
//			var res = arr.every(function(item,index,arr){
//				return  typeof item === "number";
//			})
//			
//			console.log(res);



			//some判定方法
			//返回值是一个布尔值
			//函数之中有一个执行结果为true，返回结果则为true；
			var arr = [1,2,3,4,5,6];
			var res = arr.some(function(item){
				return typeof item === "boolean";
				
			})
			
			console.log(res);
			
			//总结：
			forEach=>专门用来遍历数组的,没有返回值
			map => 想要更改数组每一项的时候使用这个方法,返回值是数组
			fileter => 过滤  返回值是数组
			every => 判定全部都;返回值是布尔值
			some => 判定有一个;返回值是布尔值
		</script>
	</head>
	<body>
	</body>
</html>

3.归并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
			//归并：把数组中所有的项进行整合运算
			//reduce
			var arr = [2,3,4,5,6];
			//参数传递方式 1：reduce(函数,start)
//			arr.reduce(function(start,item,index,start){
//				console.log(start,item,index,arr)
//				//start 第一次执行的时候是传入的第二个参数
//				//		其余的术后都是上一次函数的运算结果
//				
//				return "你好";
//			},"hello world")

			//求和
			arr.reduce(function(start,item,index,arr){
				console.log(start,item,index,arr);
				return start +item;
			},0)
			
			
			//求乘积
			var res =arr.reduce(function (start,item,index,arr){
				console.log(start,item,index,arr);
				return start*item;
			},1)
			console.log(res);
		</script>
	</head>
	<body>
	</body>
</html>