数组方法深入扩展（遍历forEach，filter，reduce等）

最新推荐文章于 2023-03-27 10:42:15 发布
最新推荐文章于 2023-03-27 10:42:15 发布
阅读量388 收藏
点赞数
文章标签： c# javascript ViewUI
原文链接：https://juejin.im/post/5bed3c8ee51d456a064d42ae
版权

注：先写入数据API，并在html中创建了5个li,接下来的数组方法都是通过这个数组来应用，并通过模拟每个方法来明白其实现的原理。

	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
复制代码
 // 自定义数组api
    var personInfoArr = [
        {name:'王小明',age:'15',sex:'male'},
        {name:'王大明',age:'24',sex:'female'},
        {name:'李宁',age:'19',sex:'female'},
        {name:'李华',age:'20',sex:'male'},
        {name:'刘明',age:'31',sex:'male'}
    ]
    var liArray = document.getElementsByTagName('li');
复制代码

除了forEach方法，只表示单纯的遍历，其他方法都是在遍历的基础上有多了新的功能，比如筛选、判断等。

1.forEach()

forEach 遍历 只有数组可以用 forEach 函数里 有两个参数，第一个匿名函数，第二个参数规定当前数组的this指向，可写可不写，默认是指向window 匿名函数中有三个参数，依次是ele,index,self ele,数组里的当前一条数据 index数组中当前第几个元素 self 数组本身

	//获取数组中每个元素里的名字 ，放到li里
 	personInfoArr.myforEach(function(ele, index){
        this[index].innerText =  ele.name;
    },liArray)
复制代码

仿写：

详解： __arr是调用这个函数方法的数组 this指向调用自己的元素，param是第二个参数，规定this的指向 arguments能调用 之前一定要写出数组的length属性来 arguments[1]是这个数组本身的第二个元素

    Array.prototype.myForEach = function(func){
    	var _arr = this,len = _arr.length,param2 = arguments[1] || window;
    	for(var i = 0; i < len; i ++){
    		func.apply(param2,[_arr[i],i,_arr])
    	}
    }
复制代码
2.filter() 过滤

数组的筛选 条件的过滤 都用这个方法 function->ele,index,self this 需要有返回值 返回true/false 为新数组存在/不存在的数据 不会改变原数组 filter() => []

筛选性别是male的数据


	var newArr = personArr.filter(function(ele, index, self){
		console.log(ele, index, self, this);
		// return true; //直接return true表示全部返回原数组的数据
		// if(ele.sex == 'm'){
		// 	return true;
		// }
		//简化
		return ele.sex == 'male';
	},{name:'xiao'})
复制代码

仿写:


	Array.prototype.myFilter = function(func){
		var _arr = this, len = this.length, param2 = arguments[1] || window, newArr = [];
		for(var i = 0; i < len; i ++){
			 func.apply(param2, [_arr[i], i, _arr]) ? newArr.push(_arr[i]) : "";
		}
		return newArr;
	}
   
复制代码

验证：筛选性别是female的数据。

 	var newArr = personArr.myFilter(function(ele, index, self){
    	return ele.sex == 'female';
    })
复制代码
3.map()

map方法是映射 x -> y 集中化操作 改变新数组 原数组也会改变 会返回新数组 ，参数同上。 function ele index self this

	newarr = personArr.map(function(ele,index,self){
	 	// console.log(ele,index,self)
	 	ele.name = ele.name + 10; 
	 	return ele;
	 },{name:'xiao'})

复制代码

然后将newarr数组里的数据改变，会发现原数组也会相应改变。

	 console.log(newarr.name);
	 console.log(personArr.name);
	 newarr[0].name = 'abc';
复制代码

仿写

	 Array.prototype.myMap = function(func){
	 	var _arr = this, len = this.length, param2 = arguments[1] || window, newArr = [];
	 	for(var i = 0; i < len; i ++){
	 		newArr.push(func.apply(param2,[_arr[i], i ,_arr]));
	 	}
	 	return newArr;
	 }
复制代码

验证：

	 var newarr = personArr.myMap(function(ele,index,self){
	 	console.log(ele, index, self);
	 	return ele;
	 })
     newarr[0].name = 'abc';
     console.log(personArr[0].name);
复制代码
4.every

every方法，遍历每一个元素是否符合某个规则，然后返回true、false 有点像逻辑与。注：数组整体都需要符合一个规则才会判断true

判断数组中每个人的年龄是否大于10、大于20；

	var flag = personArr.every(function(ele,index,self){
	 	// return ele.age > 10;
	 	return ele.age > 20;
	 })
	 console.log(flag);
复制代码

仿写

flag 默认为true,若数组中有一个不符合条件就返回false

	 Array.prototype.myEvery = function(func){
	 	var _arr = this, len = this.length, param2 = arguments[1] || window, flag = true;
	 	for(var i = 0; i < len; i ++){
	 		if(!func.apply(param2, [_arr[i], i, _arr])){
	 			return false;
	 		}
	 	}
	 	return flag;
	 }
复制代码

验证：

 	var flag = personArr.myEvery(function(ele,index,self){
	 	return ele.age > 10;
	 })
	 console.log(flag);
复制代码
5.some()

返回true、false 有点像逻辑或 数组中只要有一个符合某个规则，就可以返回true

检查数组中是否有人的年龄等于15.

	var flag =  personArr.some(function(ele,index,self){
	 	// console.log(ele,index,self,this);
	 	return ele.age = 15;
	 },{name:'xiao'})
复制代码

仿写

flag 默认为false,若数组中有一个不符合条件就返回true

	Array.prototype.mySome = function(func){
		var _arr = this, len = this.length, param2 = arguments[1] || window, flag = false;
		for(var i = 0; i < len; i ++){
			if(func.apply(param2, [_arr[i], i, _arr])){
				return true;
			}
		}
		return flag;
	}
复制代码

验证:检查数组中是否有年龄大于15岁的。

	var flag =  personArr.mySome(function(ele,index,self){
	 	// console.log(ele,index,self,this);
	 	return ele.age > 15;
	 },{name:'xiao'})
复制代码
6.reduce //会返回一个值

function 里有四个形参，分别是：prevValue以前值,curValue当前值(ele),index,self 第二个参数initialValue 初始化值 并且没有this指向。

注：prevValue[color=#f3423d]第一次是函数的第二个参数[/color]，即定义好的initialValue，[color=#f3423d]第二次以及后面的每一次就都是return的返回值[/color]。

给数组里每个人的名字后面依次加1个1，2个1,3个1...

	 var initialValue = {name:'xiao'}
	 var lastValue = personArr.reduce(function(prevValue, curValue, index, self){
	 	//console.log(prevValue,curValue,index,self,this);
	 	prevValue.name += 1;
	 	return prevValue;
	 },initialValue,{dom:'dom'})
复制代码

仿写并增加this指向功能

	Array.prototype.myReduce = function(func,initialValue){
	 	var _arr = this, len = this.length, param2 = arguments[2] || window;
	 	for(var i = 0; i < len; i ++){
	 		initialValue = func.apply(param2, [initialValue, _arr[i], i, _arr]);
	 	}
	 	return initialValue;
	 }
	 
复制代码

验证：增加了第三个参数，规定this指向。

	var initialValue = {name:'xiao'};
	var lastValue = personArr.myReduce(function(prevValue, curValue, index, self){
	 	console.log(prevValue,curValue,index,self,this);
	 	prevValue.name += 1;
	 	return prevValue;
	},initialValue,{dom:'dom'})
复制代码
reduce方法应用：将下面的cookie变成对象，方便取数据
var cookieStr = "BAIDUID=312BD18E9C1EA1A44A500D7CF28BC5E4:FG1; BIDUPSID=312BD18E9C1EA1A44A500D7CF28BC5E4; PSTM=1540015938; BD_UPN=12314753; cflag=15%3A3; BD_HOME=1; H_PS_PSSID=1455_21117_20697_27400_27408; delPer=0; BD_CK_SAM=1; PSINO=2; sugstore=0; H_PS_645EC=3123Y6%2FHn1JvhHTyU9ByrygMWKesHJ197aJE0a7mBGKmX2M5RycvphNiimY; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598";
复制代码
function parseCookie(str){
	 	var arrCookie = str.split(';');//用；将字符串拆分成数组
	 	var cookieObj = {};//空数组
	 	// console.log(arrCookie);
	 	arrCookie[0].split('=');//再将每个元素用=号拆分
	 	// console.log(arrCookie[0].split('='));
	 	arrCookie.reduce(function(prevValue, curValue, index, self){
	 		// console.log(prevValue, curValue);
	 		// console.log(prevValue, curValue.split('='))//用=号拆成数组
	 		var curArr = curValue.split('=');
	 		//console.log(cookieObj, curArr, curArr[0], curArr[1]);
	 		cookieObj[curArr[0]] = curArr[1];
	 		return prevValue;
	 	}, cookieObj)
	 	return cookieObj;
	 }
	 var cookieObj = parseCookie(cookieStr);
	 console.log(cookieObj);
复制代码

还有reduceRight方法，作用与reduce方法相同，只是从右开始遍历数组，这里就不介绍了。

转载于:https://juejin.im/post/5bed3c8ee51d456a064d42ae

数组的循环方法扩展
weixin_43163518的博客
05-23 274
数组的辅助迭代器，包括 forEach(…)、 every(…) 和 some(…)。 forEach(…) 会遍历数组中的所有值并忽略回调函数的返回值.每种辅 助迭代器都可以接受一个回调函数并把它应用到数组的每个元素上，唯一的区别就是它们对于回调函数返回值的处理方式不同 forEach(…) 会遍历数组中的所有值并忽略回调函数的返回值。\ every(…) 会一直运行直到 回调函数返回 fals...
遍历数组的一些方法
weixin_46799584的博客
04-13 1757
js提供了多种遍历数组的方法，在此简单介绍一下 一，forEach方法 forEach常用的数组遍历方法，它提供一个回调函数，可用于处理数组的每一个元素，默认没有返回值，不影响元素本身。 forEach从头到尾遍历数组，改变数组本身，参数依次是数组元素，元素索引，数组本身。 var arr = [1, 2, 3, 4, 5]; arr.forEach(functio...
ES6-day02（三）(数组扩展(Array.from() Array.of(),数组实例的方法,数组填充fill()),数组遍历(遍历各属性,判断数组中是否有该值includes))
wockky的博客
05-07 305
1.数组扩展 1.Array.from() Array.of() let result = Array.from('hello'); //转换成数组 console.log(result);// [ 'h', 'e', 'l', 'l', 'o' ] // 将一组数值转换为数组 let result2 = Array.of(20); //[20] console.log(result2);...
JavaScript 数组遍历操作函数
love and share
07-31 373
以下所有函数均为循环遍历函数 every var arr = [0,5,6156,564,156,56]; // 数组.every // 需要所有都匹配才能返回为true,有一个不匹配都会返回false // 1. 函数会自动循环遍历数组调用函数 // 2. 若回调函数本次返回true说明元素符合要求会继续向下循环,若遍历结束后都符合 every 也会返回true // 3. 若回调函数本次返回false说明元素不符合要求会返回false并终端循环 every 也会返回false consol.
Array.reduce方法：数组元素遍历
最新发布
weixin_63559122的博客
03-27 670
reduce依次为数组的每个元素执行回调函数。说明： callback 依次为数组元素执行的回调函数 previousValue 上一次回调函数的返回值，或是提供的初始值 currentValue 当前被处理的元素 index 被处理元素的索引 array 要处理的数组 initialValue 初始值，如果不设置那么初始值就是数组的第一个元素例一：在上面例子中，未设置初始值，reduce将数组的第一个元素当作初
javascript DOM扩展-元素遍历
wujunlei1595848的博客
05-30 211
使用循环语句进行常规遍历的不方便性： 元素间的空格(空行)的对待方式不一致，除IE9-外的浏览器都视作文本节点，所以未使用新API之前遍历元素都需要检测节点的类型，跳开空格（空行）代表文本节点。 W3C的Element Traversal规范新定义了一组属性：IE9+支持： childElementCount: 子元素节点的个数； firstElementChild: 第一个子元素节点...
JS中数组与对象的遍历方法实例小结
10-18
2. forEach()方法：这是ES5引入的一个数组方法，它提供了一种更简洁的遍历数组的方式，不需要手动控制索引，该方法接受一个回调函数作为参数，回调函数拥有参数：当前元素、索引、数组本身。 示例代码： ```...
js代码-js数组遍历 forEach
07-15
如果你需要在遍历过程中修改数组，可以考虑使用`map`、`filter`或`reduce`等其他数组方法。 `forEach`与`for...of`、`for...in`循环比较： - `for...of`循环：适用于遍历可迭代对象，包括数组。它不直接提供索引，...
ECMAScript6-ES6数组Api：迭代遍历方法【forEach、map、filter】、归并聚合方法【reduce】
u013250861的博客
01-30 321
在之前我们需要去循环数组,通常使用的是for循环,去循环数组的下标,而在ES6中提供了一种新的方式进行遍历数组!在看这个之前我们先对比一下之前的遍历方式! forEach,map,filter都在对象内接收一个函数,这个函数都可以接收三个参数 - 第一个表示数组的子项 - 第二个表示数组的索引(index) - 第三表示遍历数组所在的数组全部数据 map,和filter函数return返回的新数组不会替换原数组,需要接收一个新变量存储新的数组 filter的return可以设置筛选条件用于数组数据的筛选
JavaScript中，数组和对象的遍历方法总结
weixin_43852267的博客
02-23 529
循环遍历是写程序很频繁的操作，JavaScript 提供了很多方法来实现。 这篇文章将分别总结数组和对象的遍历方法，新手可以通过本文串联起学过的知识。 数组遍历 方法一：for 循环 for 循环是使用最多，也是性能优化最好的一种遍历方式。 var arr = ["a", "b", "c"]; for (var i = 0; i < arr.length; i++) { console...
数组的遍历-reduce
xiaoma19941027的博客
07-15 298
普通数组的求和 var arr=[1,2,3,4,5] var arrTemp=arr.reduce((a,b)=>{ return a+b },0) console.log(arrTemp,'arrTemp') //15 数组中的对象的求和： var arr=[ { name:'小明', age:3 }, { name:'小红', age:5 }, { name:'小粉', age:12 }, { name:'小绿'
3.10 分层遍历二叉树 扩展问题一、二
fivedoumi的专栏
06-19 968
书中解法三用数组来对树进行BFS，比较适合在比赛中使用，如果使用队列的话，当数据规模比较大的时候，频繁的进队列，出队列还是很耗时的。 比较经典的“聪明的打字员”一题，就是BFS搜索，但是数据规模比较大，用队列的话很容易超时，参考PKU1184. 扩展问题一、二是按深度从下到上遍历二叉树，从左向右或者从右向左。 我们可以在开始根节点遍历的时候，每层遍历结束之后，存放一个 NULL 作为层与层
数组和字符串的扩展方法:
weixin_47224517的博客
05-13 235
数组和字符串的扩展方法: 字符串：主要新增了模板字符串 数组新增方法： Array.from:将类数组或迭代对象转换成数组 类数组和数组 类数组和数组相同点: 1.可以通过下标去访问 2.可以通过.length来获取类数组的元素个数 类数组和数组的区别： 类数组不能使用数组的各种api方法，数组没有问题 例如： <script> function test(){ //arguments表示接收传递值的类数组 console.log('通过arguments
【vue】vue+ES6处理数组：shift、unshift、map、filter、foreach、every、some、reduce、find、findIndex等方法
michiko98的博客
09-24 4814
map() test(){ let arr=[0,1,2,3,4]; arr.map((val, idx) => { console.log(val+','+idx); }) }, each() foreach() reduce() filter() test(){ let arr=[0,1,2,3,4]; let result = arr.filter(one => one>2);
面试题--新增
weixin_46481305的博客
05-20 747
h5新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放API CSS3新增的属性 border-radius box-shadow border-image background-size text-shadow transform box-sizing 垂直居中的方式 行高=高 Margin auto 0 绝对定位 top-50%，自身宽度的-50% flex布局 align—center 水平居中的方式 绝对定位 f
数组遍历的几种方法及用法
热门推荐
weixin_42733155的博客
07-21 10万+
js提供了多种遍历数组的方法，具体使用场景略有区别，在此简单介绍一下。 一、forEach方法 forEach是最简单、最常用的数组遍历方法，它提供一个回调函数，可用于处理数组的每一个元素，默认没有返回值。 以上是个简单的例子，计算出数组中大于等于3的元素的个数。 回调函数的参数，第一个是处于当前循环的元素，第二个是该元素下标，第三个是数组本身。三个参数均可选。 二、map方法 m...
对象数组通过对象的属性进行排序
xiaobing_hope的专栏
03-31 4万+
最常见的对数组进行排序，可以用sort()方法，按照数组中元素的首字母或者数字大小进行排序var arr = [2,5,13,7,4,9,1]; var arr1 = arr.sort(); console.log(arr); // [1, 13, 2, 4, 5, 7, 9] console.log(arr1); // [1, 13, 2, 4, 5, 7, 9]sort()方法会改变原来的
React遍历数组
牛栏山矿泉水
09-29 874
1、问题背景 利用React遍历数组，并用数组元素生成无序列表 2、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;React遍历数组&lt;/title&gt; &lt;script type="text/jav
Vue进阶（五十七）：ES数组操作：find(), findIndex(), filter(), forEach(), some(), every(), map(), reduce()
IT全栈 华强工作室
05-16 1万+
1. find()与findIndex() find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。 [1, 2, 5, -1, 9].find((n) => n < 0) //找出数组中第一个小于 0 的成员 // -1 ...
手写JavaScript数组方法总结：forEach、filter等
"这篇JavaScript文章总结了在开发中常用的数组函数，包括forEach、filter、find、findIndex、map、some、every、reduce和reduceRight，并提供了手动实现这些函数的方法，直接扩展到数组的原型对象上。文章还介绍了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值