1.元素.map((item(元素),index(下标))=>{})
作用:按照某种映射关系,修改数组每一个元素,返回映射后的数组
/*
1. map作用与场景 : 映射数组(将数组每一个元素处理之后，得到一个新数组)
举例子: 商品打8折 (数组中每一个元素都要 乘以 0.8)
经典场景 : 数据驱动渲染dom树(将数组直接渲染到页面)
2.语法特点 :
2.1 循环执行次数 == 数组长度
2.2 回调函数内部return作用
(1)return 新元素值
(2)没有return,新元素都是undefined
2.3 map本身返回值作用
隐射之后的新数组
*/
let arr = [20,66,80,90,100]
//完整写法
// let res = arr.map( (item,index)=>{
// return item*0.8
// })
//简写
let res = arr.map( item=>item*0.8 )
console.log( res )// [16, 52.800000000000004, 64, 72, 80]
2.元素.filter((item,index)=>{})
作用:筛选数组 把满足条件的元素放入新数组
/*
1. filter作用与场景 : 筛选数组
经典场景 : 筛选,根据条件筛选数组，将符合条件的元素放入新数组中
2.语法特点 :
2.1 循环执行次数 == 数组长度
2.2 回调函数内部return作用
(1)return true : 满足筛选条件，当前元素放入新数组中
(2)return false : 不满足筛选条件，当前元素不放入新数组中
2.3 map本身返回值作用
筛选之后的新数组
*/
let arr = [20, 61, 80, 95, 100]
//需求：筛选出数组中的偶数
//完整写法
// let res = arr.filter((item, index) => {
// console.log(item, index)
// if(item % 2 == 0){
// return true
// }
// })
//简洁写法
let res = arr.filter(item=>item % 2 == 0)
console.log( res )
3.元素.forEach((item(元素),index(下标))=>{})
作用:和for循环一样 没有返回值
/*
1. forEach作用与场景 : 遍历数组
类似于for循环遍历数组
2.语法特点 :
2.1 循环执行次数 == 数组长度
2.2 回调函数内部return作用
无
2.3 forEach本身返回值作用
无
*/
let arr = [20, 61, 80, 95, 100]
arr.forEach( (item,index) => {
console.log(item,index)
})
4.元素.some((item(元素),index(下标))=>{})
作用:判断数组中是否有满足条件的元素,返回值为布尔类型
/*
1. some作用与场景 : 判断数组中是否有满足条件的元素 ( 逻辑或|| )
经典场景 : 非空判断。 多个表单只要有一个是空的,就不能提交
2.语法特点 :
2.1 循环执行次数 != 数组长度
2.2 回调函数内部return作用
(1)return true : 循环结束。 找到满足条件的元素,此时some的返回值也是true
(2)return false : 循环继续。没有找到满足条件的元素,如果循环执行完毕还是false，最终some的返回值也是false
2.3 some本身返回值作用
return true : 有满足条件的元素
return false : 没有满足条件的元素
*/
let arr = [20, 61, 80, 95, 100]
//需求：判断数组中有没有负数
//完整写法
let res = arr.some((item, index) => {
if( item < 0 ){
return true
}
})
//简洁写法
// let res = arr.filter(item=>item % 2 == 0)
console.log( res )
5.元素.every((item(元素),index(下标))=>{})
作用:判断数组中是否所有元素都满足条件,返回值为布尔类型
/*
1. every作用与场景 : 判断数组是否所有的元素都满足条件 ( 逻辑与&& )
经典场景 : 开关思想. 购物车全选
2.语法特点 :
2.1 循环执行次数 != 数组长度
2.2 回调函数内部return作用
(1)return true : 循环继续。 当前元素满足条件,继续判断. 如果循环执行完毕还是true,则every返回值就是true
(2)return false : 循环结束。当前元素不满足条件。 every的返回值也是false
2.3 every本身返回值作用
return true : 全部元素都满足条件
return false : 有元素不满足
*/
//需求：判断数组中是否所有的元素都是正数
let arr = [20, 61, -80, 95, 100]
//需求：判断数组中有没有负数
//完整写法
// let res = arr.every((item, index) => {
// if(item>0){
// return true
// }
// })
//简洁写法
let res = arr.every(item=>item>0)
console.log( res )
6.元素.findIndex((item(元素),index(下标))=>{})
作用 查找引用类型下标 有则返回下标 没有返回-1
/*
1. findIndex作用与场景 : 找元素下标
* 数组中的元素是值类型: arr.indexOf()
* 数组中的元素是引用类型: arr.findIndex()
2.语法特点 :
2.1 循环执行次数 != 数组长度
2.2 回调函数内部return作用
(1)return true : 找到了,循环结束。 此时findIn是当前元素下标
(2)return false : 没找到，循环继续。 如果执行完毕还找不到，最终返回固定值-1
2.3 findIndex本身返回值作用
return -1 : 没有
return 下标 : 有
*/
//需求：判断数组中是否所有的元素都是正数
let arr = [
{name:'张三',age:20},
{name:'李四',age:25},
{name:'王五',age:30},
]
let res = arr.findIndex(item=>item.name=='李四')
console.log(res)//1
7.元素.reduce( (sum,value)=>sum+value , 0 )
作用:求数组累加和
/*
1.数组reduce方法作用： 为每一个元素执行一次回调,并最终返回最后一次结果
经典应用： 求数组累加和
*/
let arr = [10,20,30]
//累加和
//(1)声明变量存储结果
let sum = 0
//(2)遍历数组
for(let i = 0;i<arr.length;i++){
//(3)累加
sum += arr[i]
}
// console.log( sum )
/*
第一个参数:回调 (sum,value,index)=>{}
sum : 累加和变量
value:当前元素
index: 当前下标
return : 下一次回调sum的值
第二个参数: sum初始值
* 如果不传，sum默认是第一个元素值
* 一般要传0, 如果不传空数组的话reduce直接报错
*/
//标准写法
// let res = arr.reduce( (sum,value,index)=>{
// console.log(sum,value,index)
// return sum+value
// } , 0 )
//简写
let res = arr.reduce( (sum,value)=>sum+value , 0 )
console.log( res )
