Js数组的迭代方法

本文介绍了JavaScript中常用的数组迭代方法,包括forEach()、map()、filter()、every()、some()和reduce()。每种方法的功能、用法及实例进行了详细讲解,如reduce()方法不仅用于求数组项之和和最大值,还能实现数组去重和复杂的数据处理任务。

1.forEach()方法:对数组每一项运行给定函数 (没有返回值)

let a = 1,obj = {a:1};
let arr = [1,'1',a,true,obj];
arr.forEach((item,index)=>{
    item += 1    // 此时并不能修改原数组的值
})

arr.forEach((item,index)=>{
    item['a']=2     //想通过item直接修改原数组,通过这个方式,修改引用数据类型的属性
})

arr.forEach((item,index)=>{
    arr[index] +=1    //直接通过arr才能对原数组进行修改
})

2.map()方法:对数组每一项执行给定函数,返回每次函数调用后的结果组成的数组,不会改变原数组 (有返回值)

let arr = [1,2,3,4,5];
let arr1 = arr.map((item,index)=>{
  return item +=1;    
})
console.log(arr1)    //返回[2,3,4,5,6]

3.filter()方法:对数组的每一项执行给定函数,返回该函数返回true的项组成的数组 ,不改变原数组 (有返回值)

let arr = [1,2,3,4];
let arr2 = arr.filter((item,index)=>{
	return item>2
})
console.log(arr2)   //返回[3,4]

4.every()方法:检测数组中每一项是否符合条件,全部满足才返回true;

let arr = [1,2,3,4,5];
let arr2 = arr.every((item)=>{
	return item > 0
})
console.log(arr)   //所有项都满足大于0,返回true

5.some()方法:检测数组中每一项是否符合条件,只要有一个满足就返回true;

let arr = [1,2,3,4,5];
let arr2 = arr.every((item)=>{
    return item > 4
})
console.log(arr)   //有一项满足大于0,返回true

6.reduce()方法:接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数

1).语法
let arr = [1,2,3,4,5]
arr.reduce((prev,cur,index,arr)=>{
.....
},init)

其中,
arr 表示原数组;
prev 表示上一次调用回调时的返回值,或者初始值 init;
cur 表示当前正在处理的数组元素;
index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;
init 表示初始值。

2).简单使用
①求数组项之和
let arr = [1,2,3,4,5]
let sum = arr.reduce((prev,cur)=>{
	return prev + cur 
},0)
console.log('sum',sum)  //15
callbackpreviousValuecurrentValueindexarrayreturn value
第1次010[1,2,3,4,5]1
第2次121[1,2,3,4,5]3
第3次332[1,2,3,4,5]6
第4次643[1,2,3,4,5]10
第5次1054[1,2,3,4,5]15

由于传入了初始值0,所以开始时prev的值为0,cur的值为数组第一项1,相加之后返回值为1作为下一轮回调的prev值,然后再继续与下一个数组项相加,以此类推,直至完成所有数组项的和并返回。

②求数组项最大值
let arr =[1,2,3,4,5]
let max = arr.reduce((prev,cur)=>{
	return Math.max(prev,cur)
})
console.log('max',max)  //5

由于未传入初始值,所以开始时prev的值为数组第一项1,cur的值为数组第二项2,取两值最大值后继续进入下一轮回调。

③数组去重
let arr = [1,2,3,3,4,2,3,5,6,7]
let newArr = arr.reduce((prev,cur)=>{
	prev.indexOf(cur) === -1 && prev.push(cur)
	return prev
},[])
console.log(newArr)

实现原理:
1.初始化一个空数组
2.判断初始化的数组中是否含有arr的第一项,如果没有则将其push到初始化的数组中,如果有,则进行下一次回调

3).高级使用
①计算一个字符串中每个字母出现次数
let str = 'ababacde';
let obj = str.split('').reduce((pre,item) => {
  pre[item] ? pre[item] ++ : pre[item] = 1
  return pre
},{}) 
console.log(obj) // {a: 3, b: 2, c: 1, d: 1, e: 1}
②多维度的数据叠加
 const scores = [
   {
     subject: 'Chinese',
     score: 99
   },
   {
     subject: 'Math',
     score: 87
   },
   {
     subject: 'English',
     score: 80
   }
 ];
 const dis = {
   Chinese: 0.5,
   Math: 0.3,
   English: 0.2
 }
 const sum = scores.reduce((pre, item) => {
   return pre + item.score * dis[item.subject]
 }, 0)
 console.log(sum) // 91.6
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值