map方法
给数组中的每一个元素进行特殊处理后,返回一个新的数组
//单价数组
let prices=[50,80,90]
//数值数组:字符数组 +"元"
prices=prices.map((item,index)=>{
return item+"元"
})
//简写方式
prices=prices.map(item=>item+"元")
console.log(prices)//(3) ['50元', '80元', '90元']
案例:需要将xxx换成www
let movies=[
{id:1,name:"逃学威龙",imgUrl:"http://xxx.douban.com/1.jpg"},
{id:2,name:"逃学威龙",imgUrl:"http://xxx.douban.com/2.jpg"},
{id:3,name:"逃学威龙",imgUrl:"http://xxx.douban.com/1.jpg"}]
movies=movies.map(item=>{
// 这里有两步操作就不需要简写了
item.imgUrl=item.imgUrl.replace("xxx","www")//将xxx换成www
return item
})
console.log(movies)
filter方法
过滤出数组中符合要求的元素,返回一个新数组
//拿到当前及格的人的数组
let scores=[80,59,10,55,90,88]
let arr=scores.filter(item=>{
if(item>60){
return true
}
})
// 简写方式
// let arr=scores.filter(item=>item>=60)
console.log(arr)//(3) [80, 90, 88]
案例
let scores=["神里凌人","神里凌华","甘雨","钟离"]
let arr=scores.filter(item=>{
if(item.includes("神里")){//判断是否有神里
return true
}
})
console.log(arr)// ['神里凌人', '神里凌华']
some和every方法
some方法: 只有有一个符合就返回,true
let scores=[80,49,12,50,69]
let result=scores.some(item=>item>=60)
console.log(result)//true
every方法: 只要其中有一个不符合要求,就返回false
let scores=[80,49,12,50,69]
let result=scores.every(item=>item>=60)
console.log(result)//false
一般使用场景:前端校验器
<body>
<p>
用户名:<input type="text" id="username">
</p>
<p>
密码:<input type="text" id="password">
</p>
<button id="login">登录</button>
</body>
//提交AJAX请求前 ,通常需要所有的校验都通过时
let results=[false,false] //校验结果的数组
username.onblur=function(){
// 长度大于8
if(this.value.length>8){
results[0]=true
}else{
results[0]=false
}
}
password.onblur=function(){
// 长度大于8
results[1]=this.value.length>8
}
login.onclick=function(){
//先判断前期的校验是否都通过
let result=results.every(item=>item=true)
if(result==true){
console.log("ajax")
}else{
alert("验证未通过")
}
}
reduce方法
将数组中的元素整合,返回一个新的内容
4个参数
prev:上一次操作返回的结果 ,可以设置默认值,如果不设置默认值,
那么第一个元素就作为第一个prev
item: 本次操作的元素
index:本次操作元素的索引值
array:当前操作的数组
举例 数组求和
let arr=[20,40,50,21]
let result=arr.reduce((prev,item,index,array)=>{
console.log("prev"+prev)//3次 prev20 prev60 prev110
// console.log("item"+item)//第一次不进入循环 item40 item50 item21
// console.log("index"+index)//index1 index2 index3
// console.log("array"+array)//array20,40,50,21
return prev+item//每一次都在上一次的基础上加上个新的item
})
console.log(result)//131
举例 使用reduce拼接字符串
给每一个数组元素 <li>百度</li> <li>腾讯</li>
给prev设置默认值:1.所有元素参加循环 2.确定返回内容
let arr=["百度","腾讯","阿里","字节"]
let result=arr.reduce((prev,item)=>{
// console.log(prev)
return prev+"<li>"+item+"</li>"
},"")// 给prev设置默认值 ""空字符串
console.log(result)//<li>百度</li><li>腾讯</li><li>阿里</li><li>字节</li>
案例 利用reduce实现数组去重
let arr=["百度","腾讯","阿里","字节","阿里","腾讯","百度"]
//利用reduce实现数组去重
let result=arr.reduce((prev,item)=>{
//includes判断是有具有指定元素 有t 没有f
if(!prev.includes(item)){
prev.push(item)
}
return prev
},[])//因为是数组,返回数组
console.log(result)//['百度', '腾讯', '阿里', '字节']
案例 统计字符的出现次数
返回一个对象 统计每一个字符的出现次数
let arr=["a","b","a","c"]
//返回一个对象 统计每一个字符的出现次数 {a:2,w:3}
let result=arr.reduce((prev,item)=>{
// //判断对象 是否存在对应的属性
if(item in prev){
//找到对应属性值 ++
prev[item]++
}else{
prev[item]=1
}
return prev
},{})
console.log(result)//{a: 2, b: 1, c: 1}