数组遍历器的用法与区别:
- forEach()
- map()----更新数组
- filter()、includes()、find()、findIndex()----筛选(删除)数组
- some()、every()----判断数组
- reduce()----叠加数组
1、map数组遍历器
<script>
// map应用场景:利用某种规则映射得到一个新数组;
// 遍历每一个数组,并对某一个数组作响应的处理,返回一个新数组
// eg:将数组中的每个元素+1
// eg:将数组中的每个元素*2
let arr = [20,40,24,18,60]
// 语法:(元素,下标) => {return 新元素 }
let arr1 = arr.map((value,index) => {
// 让每一个元素值+1
return value + 1
})
console.log(arr1); // [21, 41, 25, 19, 61]
// 数组中的每个元素*2
let arr2 = arr.map((value,index) => {
return value * 2 //让每个元素*2
})
console.log(arr2); // [40, 80, 48, 36, 120]
</script>
2、filter用法
<script>
// fi1ter应用场景:用于筛选数组中满足条件的元素,返回筛选后的新数组
// 例:找出数组中的偶数;求数组中大于10的所有元素。
// 语法:
// 数组filter(function(value,index,arr){
// return筛选条件
// })
// 注意点:
//1.回调函数执行次数==数组长度
//2.fi1ter函数返回的新数组长度!=原数组长度
let arr = [60,74,39,,10,-49,90,-120,220]
//需求:求数组中大于10的所有元素
//之前的方法
// let result []
// for (let i = 0; i < arr.length; i++){
// if (arr[i] > 10){
// result.push(arr[i])
// }
// }
// console.log(result);
let lsarr = arr.filter(function(value){
//筛选条件
return value > 10
})
//ssArr里保存的是所有满足条件的元素
console.log(lsarr); // [60, 86, 40, 90, 320]
</script>
3、foreach用法
<script>
//1.forEach应用场景:用于遍历数组, 相当于for循环另一种写法。
//2.语法:数组。forEach( function(value,index,arr){//算法 })
//3.forEach必须提供一个参数
//a.value:每次遍历到的数组元素
//b.index:每次遍历到的数组的下标
//c.arr:数组
//d.forEach
let arr = [38,78,99,90,204,164];
//需求:对数组进行累加
//原来的写法:
// let sum=0;
// for (let i=0; i<arr.length; i ++){
// sum += arr [1]
//}
//console.log(sum);
//现在的写法
let sum = 0
arr.forEach(function(value){
sum += value
})
console.log(sum);// 673
// 注意点:
// 回调函数执行次数== 数组长度(数组中有多少元素, 回调函数就会执行几次)//b.forEach函数没有返回值
// 回调函数不需要return(就算手动ruturn, 也不会结束循环)
// filter方法和forEach方法的参数完全相同。
// filter主要是根据条件进行筛选,满足条件的值会被return返回,需要一个变量接收
</script>
4、some用法
<script>
// ·some应用场景:用于判断数组中是否存在满足条件的元素
// 1、回调函数执行次数 ! = 数组长度
// 2、some函数返回一个布尔类型值
// 3、回调函数返回布尔类型值属于遍历
// return值为 true; 遍历结束,且some函数返回值为true
// return值为 flase;遍历继续,且some函数的返回值为flase
// ·判断数组中有没有负数
let arr= [24,56,7,43,0,60,90,340]
let arr1 = arr.some(function(item,index){
return item < 0
});
console.log(arr1); // true
</script>
5、every用法
<script>
// every注意场景:用于判断数组中所有元素都满足条件
// every函数返回一个布尔类型值
// 需求:判断数组中有没有负数
let arr = [16,54,78,86,-60,17]
let arr1 = arr.every((item) => {
return item > 0;
})
console.log(arr1); // false
</script>
6、findIndex用法
<script>
// 数组findIndex方法:
// 作用:获取符合条件的第一个元素位置(下标)
// 语法:arr.findIndex((item,index) => {return true/flase})
// 返回值:符合则返回元素下标,不符合则返回-1
// 应用场景:适用于数组中元素对象·类型,比传统for循环要高
let arr = [
{name:'浪少',age:19},
{name:'小红',age:24},
{name:'小白',age:47},
{name:'小花',age:35},
{name:'大聪明',age:8},
]
// 数组findIndex方法:获取符合条件的第一个元素位置下标
// 查找arr2中 age < 18 在什么位置
let arr2 = arr.findIndex((item,index) => {
return item.age < 18;
})
console.log(arr2); // 4
</script>
7、reduce数组操作
<script>
// 数组reduce方法:
// 作用:遍历数组元素,为每个数组执行一次回调函数。
// 语法: arr.reduce((sum,value) =>{ return sum + value })
// 返回值:最终sum值
// 应用场景:数组求和/平均数/最大值/最小值
// 注意点:最好给一个初始值,避免空数组报错
let arr1 =[40,63,72,90,56,30];
// sum:初始值,默认为数组第一个元素。
// value: 数组的每一个元素,默认为数组第二个元素。
let res1 = arr1.reduce((sum,value) => {
// 这里必须要return,相当于把本次计算的结果赋值给下一次的sum: sum= sum + value
return sum + value;
},0)
console.log(res1); //351
// 下面这种写法与上面等价,ES6箭头函数如果只有一行代码则可以省略大括号,且省略return。
console.log(arr1.reduce((sum,value) => sum + value)); //351
// 最大值:
let res2 = arr1.reduce((sum,value) => Math.max(sum,value))
console.log(res2); //90
</script>