数组有哪些实用的高阶函数

你知道数组有哪些实用的高阶函数吗?

前言:数组有很多的方法,都很简单方便,向push,pop等等,但是对于高阶函数在实际使用用的很多,现在就来总结一下方法使用及场景首先,什么是高阶函数:高阶函数,就是函数中可以传入另一个函数作为参数的函数。

  1. forEach
  2. filter
  3. map
  4. sort
  5. some
  6. every
  7. reduce
  8. find

1.forEach

forEach是对数组每个数据进行遍历,与for的差别是,for可以将遍历的数组的每一项修改,而forEach并不会改变原数组(如果是数组对象值的修改,forEach也修改到对象的值)

简单的使用 - 数组中的某个数据为判断依据修改其他数据

let arr = [  {name:1}, {name:2}, {name:3},{name:4}];  
let num;       
arr.forEach((item,index) => { 
	if(item.name === 1){
		num = 10          
	}
});

2.filter

filter筛选出满足条件的数组,满足条件 === 返回写的条件为true的每一项组成一个新的数组,并不会改变原数组简单的使用 - 筛选出数组中number大于8的数字

let arr = [{ name: 'a', number: 12 },{ name: 'b', number: 8 },{ name: 'c', number: 7 }, { name: 's', number: 5 }]
let arr1 = arr.filter((item, index) => { 
	return item.number > 8 
})

注意:filter.不管你的返回条件是什么,他都会返回满足条件的数组的某个整体元素,比如

 let arr = [    { name: 'c', id: 1 }, { name: 'c', id: 3 },       { name: 'c', id: 8 }]       
 let arr2 = [1, 5]       
 let a = arr.filter(item => arr2.includes(item.id)) 
 console.log(a)

这个时候返回的满足条件(数组中含有id为1,5)的整个对象 {name: ‘c’, id: 1 }

3.map

map遍历,返回处理过的数组的每一项组成一个新的数组(需要数组的每一项的时候一般都会用到map),通常应用于对数组的对象进行重新组合,或者需要向数组添加新数据,比如在react中使用map进行遍历

简单的实例 1 - 将一个数组对象的数据进行重新组合

let arr = [{ name: 'a', age: 15, fav: "篮球" },{ name: 'b', age: 15, fav: "足球" },{ name: 'c', age: 15, fav: "乒乓球" }, { name: 'd', age: 15, fav: "排球" },  { name: 'e', age: 15, fav: "羽毛球" }]; 
let arr1 = arr.map((item, index) => { 
	return { pepleName: item.name, myFav: item.fav, index: index + 1 }
})

打印arr1 - 是数据重构之后的数组
在这里插入图片描述
简单的实例 2 - 向数组添加新数据

let arr = [ { name: 'a', age: 15, fav: "篮球" },  { name: 'b', age: 15, fav: "足球" },  { name: 'c', age: 15, fav: "乒乓球" },  { name: 'd', age: 15, fav: "排球" },  { name: 'e', age: 15, fav: "羽毛球" }];
let arr1 = arr.map((item, index) => {   
	return { ...item, index: index + 1 } 
})

当然利用深拷贝结合map ,将返回语句替换一个,结果都是一样的

return Object.assign(item,{index:index+1})

打印-arr1
在这里插入图片描述
简单实例 3 - 将数组利用索引对应起来

let arr = [  { name: 'a', age: 15, fav: "篮球" }, { name: 'b', age: 15, fav: "足球" },  { name: 'c', age: 15, fav: "乒乓球" },  { name: 'd', age: 15, fav: "排球" },  { name: 'e', age: 15, fav: "羽毛球" }];       
let arr1 = [  { key: '1', val: 'sss' },   { key: '2', val: 'fsd' },   { key: '3', val: 'fds' }, { key: '4', val: 'fewf' },  { key: '5', val: 'ewd' }]  
let arr2 = arr.map((item, index) => {  
	return { ...arr1[index], ...item }
}); 

打印arr2 -
在这里插入图片描述

4.sort

sort是将数组进行排序,主要是根据传入的函数进行排序,最简单的就是数字排序

简单实例 - 1 - 数字排序

let arr = [1, 5, 2, 8, 10, 53, 9, 4]      
let arr2 = arr.sort((a, b) => { 
	return a - b 
})
let arr3 = arr.sort((a, b) => { 
 	return b - a
})

打印arr2,arr3 - 一个升序,一个降序
在这里插入图片描述
简单白话解释 - 给sort方法传递一个比较函数,而这个函数决定了它的两个参数(a,b)在排好序的数组中的先后顺序:假设第一个参数应该在前,比较函数应该返回一个小于0的数值,反之,假设第一个参数应该在后,函数应该返回一个大于0的数值,并且,假设两个值相等,函数应该返回0。可以利用这个做复杂一点的排序

下面是检测数组中的元素是否满足条件,最后需要boolean的一些高阶函数

5.some

some方法会检测,返回布尔值,不改变原数组。在执行中,有一个满足就返回true,不再继续执行

简单案例 - 检查数组对象中是否含有某个值

let arr = [ { name: 'a', age: 15},  { name: 'c', age: 55}{ name: 'v', age: 14},   { name: 'd', age: 18} ]   
arr.some(item => item.name.includes('a'))
//检测数组,当检测到第一个对象有a,直接返回true

6.every

与some不同,它会去检测数组中的每一项是否满足条件,所有都满足才会返回true

简单案例 - 检测数组中的所有对象是否满足条件

  let arr = [  { name: 'a', age: 15},   { name: 'c', age: 55},        { name: 'v', age: 14}, { name: 'd', age: 18} ]
  arr.every(item => item.age>10)

7.reduce

会对数组中的元素进行回调函数中的方法,经常都用于累加

简单实例 - 数组的累加

let arr = [1,5,8,2,10 ]       
let a =  arr.reduce((total,num)=>{   
	return total+num        
})  
console.log(a)

同理 - 可以累乘,将total理解为数组的第一个对象,num是第二个,然后对其进行操作,循环,第二次的total就是已经执行了函数的数据,num就是第三个值

8.find

找出数组中满足条件项,找到一项直接返回满足条件的项,不在进行往下寻找

简单案例

let arr = [   { name: 'a', age: 15}, { name: 'c', age: 55},{ name: 'v', age: 14}, { name: 'd', age: 18} ]      
let a =  arr.find(item => item.age>10)     
console.log(a)

将打印数组中第一项

喜欢点赞收藏!!!

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值