ES6新增的数组方法
本文整理ES6“新增”的 map方法、filter方法、some方法、every方法、reduce方法
·
本文整理ES6“新增”的 map方法、filter方法、some方法、every方法、reduce方法
一、map()方法 给数组的每个元素做特殊的处理 返回一个新的数组
例1 给每个数组元素后面加上“元”
let arr1 = [20,30,40,] // 给每个数组元素后面加上“元” [20元,30元,40元,]
let arr2 = arr1.map(item =>{
item +="元"
return item
})
//上面箭头函数也可以简写为
let arr2 = arr1.map(item => item +="元")
console.log(arr2) // [20元,30元,40元,]
例 2 豆瓣影评中电影地址的修改 将“xxx” 都改为“www”
// 例2 豆瓣影评中电影地址的修改 将“xxx” 都改为“www”
let movies=[{id:1,name:"逃学威龙",imgUrl:"http://xxx.douban.com/1dda.png",number:1000}, {id:2,name:"大话西游",imgUrl:"http://xxx.douban.com/222.png",number:300000}]
movies = movies.map(item =>{
item.imgUrl = item.imgUrl.replace("xxx","wwww")
return item
})
console.log(movies)
二、filter() 方法 过滤一个数组中符合要求的元素,返回一个新数组
常用场景:数 据量较小的时候 比如:地址搜索
例1 将数组中大于60的元素全部找出 (例题中给出了箭头函数的简写方式)
let counts=[40,50,80,100,20,45]
let countsArr = counts.filter(item =>{
// 只要 返回true 就返回item
if(item>=60){
return item
}
})
console.log(countsArr) // [80,100]
// 写法2
let countsArr2 = counts.filter(item =>{
if(item>=60){
return true // 只要 返回true 就返回item
}
})
console.log(countsArr2) // [80,100]
// 写法3
let countsArr3=counts.filter(item=>item>=60)
//只要返回true,就是返回对应item
console.log(countsArr3) // [80,100]
三、some()方法 用于数组判断 当数组中只要有一个符合条件就返回 true
否则返回false
例1 判断数组中是否有大于60的元素
let chengji = [50,60,80,100,20,]
let result = counts.some(item => item>=60) // 只要有一个成绩大于60 就返回真
console.log(result) // true
例2 登录校验器 假设判断name的长度 和密码的长度
let bt1=document.getElementById("bt1")
let username=document.getElementById("username")
let password=document.getElementById("password")
let results=[] // 只有当 所有输入框都是真的时候 才可以登录
username.onblur=function(){ // 当账号框失去焦点时判断 如果不符合要求 返回 false
let name=this.value
if(name.length>8){
results[0]=true
}else{
results[0]=false
}
}
password.onblur=function(){ // 当密码框失去焦点时判断 如果不符合要求 返回 false
let ps=this.value
if(ps.length>8){
results[1]=true
}else{
results[1]=false
}
// console.log(results)
}
bt1.onclick=function(){
let result3 = results.every(item =>item)
console.log(result3) // false 只有当 所有输入框都是真的时候 才可以登录
}
五、reduce()方法 对数组的每一个元素进行相应的处理 reduce(prev,item,index,array) 有四个参数 常用的是prev 和 item
prev:表示上次返回的结果 可以设置默认值
item 当前进来的数据 index 当前数据的下标 array 当前操作的数组
默认情况下 运行次数为 长度减1 第一个参数自动作为默认值 既 作为第二的数据的prev
let reduceArr = [1,2,3,4]
let result5 = reduceArr.reduce( (prev,item,index,array) => {
console.log("prev "+prev)
console.log("item "+item)
console.log("index "+index)
console.log("array "+array)
console.log("---------每次运行的分割线---------")
})
console.log(result5)
运行结果:
prev 1 第一个数组元素 作为默认值
item 2
index 1
array 1,2,3,4
---------每次运行的分割线---------
prev undefined 因为函数中没有返回值 所以除第一次默认值以外,其他均是 undefined
item 3
index 2
array 1,2,3,4
---------每次运行的分割线---------
prev undefined
item 4
index 3
array 1,2,3,4
---------每次运行的分割线---------
例1 如何添加默认参数 将数组元素加上li标签 <li>百度</li> <li>腾讯</li>
将默认值设置为空
reduceArr = ["百度","腾讯","阿里","字节跳动"]
let result6 = reduceArr.reduce( (prev,item) =>{
return prev +"<li>"+item+"</li>"
},"") // 默认值可设置为空 第一个prev就不会是underfind
console.log(result6) //<li>百度</li><li>腾讯</li><li>阿里</li><li>字节跳动</li>
例2 数组去重 后续会介绍几种数组去重的方法 记得关注我哦
给一个数组 返回一个没有重复数据的数组
reduceArr=["百度","腾讯","阿里","字节跳动","百度","腾讯","字节跳动","阿里"]
//返回一个没有重复元素的数组
let result7=reduceArr.reduce((prev,item)=>{
//如果当前item,是prev中没有的,那么就放入prev中
if(!prev.includes(item)){
prev.push(item)
}
return prev
},[]) //设置prev默认值是个数组
console.log(result7) //["百度","腾讯","阿里","字节跳动"]
例3 检测数组中每个元素出现的次数
let ss = [0,1,1,1,1,1,2,2,2,2,3,3,3,4,4,9,5,5,7,5,5,7]
let result8 = ss.reduce( (prev,item) =>{
if(item in prev){ // 如果对象中存在这个key 则key值 加1
prev[item] ++
}else{ // 如果prev对象中不存在 则把改元素位置prev的key 赋值 为1
prev[item] = 1
}
return prev
},{})//设置prev默认值是个对象
console.log(result8) // Object { 0: 1, 1: 5, 2: 4, 3: 3, 4: 2, 5: 4, 7: 2, 9: 1 }
以上就是ES6新增的一些数组方法 如有错误还望大牛们指正 感谢阅读
更多推荐
所有评论(0)