Js数组的迭代方法
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
| callback | previousValue | currentValue | index | array | return value |
|---|---|---|---|---|---|
| 第1次 | 0 | 1 | 0 | [1,2,3,4,5] | 1 |
| 第2次 | 1 | 2 | 1 | [1,2,3,4,5] | 3 |
| 第3次 | 3 | 3 | 2 | [1,2,3,4,5] | 6 |
| 第4次 | 6 | 4 | 3 | [1,2,3,4,5] | 10 |
| 第5次 | 10 | 5 | 4 | [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
本文介绍了JavaScript中常用的数组迭代方法,包括forEach()、map()、filter()、every()、some()和reduce()。每种方法的功能、用法及实例进行了详细讲解,如reduce()方法不仅用于求数组项之和和最大值,还能实现数组去重和复杂的数据处理任务。

4807

被折叠的 条评论
为什么被折叠?



