数组map方法遍历
1.数组map方法作用: 映射数组
说人话:按照某种映射关系, 把数组的每一个元素给修改了
举例:全场8折: 数组的每一个元素 * 0.8
/*
2. map方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
* return 新数组的元素
* 如果没有return, 则map的返回值都是undefined
2.3 map方法的返回值
* 返回映射之后的新数组
*/
let arr = [88, 90, 100, 20, 50]
//完整写法
/* let res = arr.map( (item,index) => {
return item*0.8
} ) */
//箭头函数如果形参只有一个可以省略小括号,
// 如果函数体只有一行可以省略大括号(必须省略return)
let res = arr.map(item => item * 0.8)
console.log(res)
数组filter遍历方法应用
** 1.数组filter方法作用: 筛选数组
* 应用场景: 筛选数组,将符合条件的元素放入新数组中
* 举例: 找出数组中所有大于10的元素**
/*
2. filter方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
* return true : 符合筛选条件,放入新数组中
* return false : 不符合筛选条件,不放入新数组中
2.3 filter方法的返回值
* 返回筛选之后的新数组
*/
let arr = [88, 90, 100, 20, 50, 3]
//需求:找出50以上的元素
//完整写法
let aee = arr.filter(item => item > 80)
console.log(aee)
let aee1 = arr.filter((item, value) => {
if (item % 2 == 0) {
return true
}
})
console.log(aee1)
数组forEach
遍历
** 1.数组forEach
方法作用: 遍历数组
* 应用场景: 和 for(let i=0;i<arr.length;i++){} 功能一致**
/*
2. forEach方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
* 没有返回值
2.3 forEach方法的返回值
* 没有返回值
*/
//交互不用 遍历尽量用forEach
let arr = [30, 40, 50, 60]
arr.forEach((item, index) => {
console.log(item)
})
数组some遍历
** /* 逻辑||或一真则真
1.数组some方法作用: 判断数组中是否有符合条件的元素
* 应用场景: 非空判断(判断多个表单元素,有没有空文本)
* 举例 : 判断数组中有没有负数**
2. some方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
* return true : 循环结束。 找到了满足条件的元素
* return false : 循环继续。 没找到,循环继续。 如果所有元素全部遍历还是没找到,最终结果就是false
2.3 some方法的返回值
* true : 有符合条件的元素
* false : 没有符合条件的元素
*/
let arr = [10, 20, 50, 60, 70, 80]
//标准写法
// let res = arr.some((item,index)=>{
// if( item < 0 ){
// return true
// }else{
// return false
// }
// })
//简写
let res = arr.some(item => item < 0)
console.log(res)
数组every方法
** /* 逻辑与&& 一假都假
1.数组every方法作用: 判断数组中 是否所有的 元素都满足条件
* 应用场景: 开关思想 (购物车全选框)
* 举例 : 判断数组中是不是都是正数**
* ` 2. every方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
* return true : 循环继续, 满足条件,如果所有的元素全部遍历还是true,则最终的结果就是true
* return false : 循环结束。 只要找 X到不满足条件的元素,循环结束。最终的结果false
2.3 every方法的返回值
* true : 所有的元素 都符合条件
* false : 有元素 不符合条件
*/
//开关思想 用every(满足所有条件) 和 some
let arr = [10, 20, -50, 60, 70, 80]
//标准写法
let res = arr.every((item, index) => {
if (item >= 0) {
return true
} else {
return false
}
})
console.log(res)
let res1 = arr.every(item => item > 0)
console.log(res1)
数组findlndex
方法
** 1.数组findIndex
方法作用: 查找元素的下标
* 数组的findIndex
与indexOf
异同点
相同点:功能一致,都是查找元素下标。 有则返回下标,无则返回固定值-1
不同点:应用场景不同
indexOf
: 查找数组中的元素都是值类型
findIndex
: 查找数组中的元素都是引用类型**
2. findIndex方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
* return true : 循环结束。 找到了,此时返回值就是下标
* return false : 循环继续。 没找到,循环继续。 如果所有元素全部遍历还是没找到,最终结果就是-1
2.3 some方法的返回值
* 元素下标 或者 -1
*/
let arr = [
{name:'张三',age:20},
{name:'李四',age:18},
{name:'王五',age:16},
]
//需求:找名字为王五的人在哪里
// let res = arr.findIndex(item=>{
// if( item.name == 'sfs' ){
// return true
// }else{
// return false
// }
// })
let res = arr.findIndex(item=>item.name == '王五')
console.log(res)
数组reduce方法
** /* 1.数组reduce方法 : 数组累加器方法
* 对数组每一个元素执行一次回调函数,累加最后一次回调的结果
2.reduce场景: 数组元素求和、求数组元素最大值
*/
**
let arr = [20,55,60]
// let sum = 0
// for(let i = 0;i<arr.length;i++){
// sum = sum + arr[i]
// }
// console.log( sum )
/*
第一个参数:回调 (上一次值,当前值,当前下标)=>{}
* 默认下标不是从0开始,而是从1开始。 开发中一般需要设置默认值
* return 值 就是下一次 sum的值
第二个参数: 初始值
* 一般需要设置初始值为0, 如果不设置遇到空数组则会报错
reduce方法返回值是 : 最后一次sum的结果
*/
// let res = arr.reduce( ( sum,item,index )=>{
// console.log( sum,item,index)
// return sum + item
// } , 0 )
let res = arr.reduce( ( sum,item )=>sum + item , 0 )
console.log( res )