数组的新增方法

最新推荐文章于 2024-04-25 00:00:00 发布

金汤肥牛郭

最新推荐文章于 2024-04-25 00:00:00 发布

阅读量319

点赞数

文章标签： es6

本文链接：https://blog.csdn.net/m0_67387108/article/details/124212969

版权

一、map

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) //输出结果网址的xxx变为www

map类型

map类型为object对象的升级版

二、filter

过滤数组中符合要求的元素，并返回一个新数组

举例：挑选一个数组中大于60 的并返回成一个新的数组

let scores=[80,59,10,55,90,88]
//拿到当前及格的人的数组
let arr=scores.filter(item=>{
       if(item>60){
           eturn true;
       }
})
//简写方式
let arr=scores.filter(item=>item>=60)
console.log(arr)//[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.every(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="mima"></p>
<button id="login">登录</button>
</body>
//提交AJAX请求前，通常需要所有的校验都通过时
let results=[false,false] //校验结果的数组
username.οnblur=function(){
results[0]=this.value.length>8
}
mima.οnblur=function(){
//长度大于8
if(this.value.length>8){
results[0]=true
}else{
results[0]=false
}
// results[0]=this.value.length>8
}
login.οnclick=function(){
//先判断前期的校验是否都通过
let result=results.every(item=>item=true)
if(result==true){
console.log(result+"ajax");
}
}

四、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)//prev20
// console.log("item"+item)//item40第一个不计入循环，所以是40
// console.log("index"+index)//index1
// console.log("array"+array)//[20,40,50,21]
return prev+item
})
console.log(result)//131

举例 --- 使用reduce拼接字符串给prev设置默认值：
1.所有元素参加循环
2.确定返回内容

//给每一个数组元素 <li> 百度 </li> <li>腾讯</li>>
let result=arr.reduce((prev,item)=>{
console.log(prev)
return prev+"<li>"+item+"</li>"
},"")// 给prev设置默认值：""空字符串
console.log(result)

举例 --- 利用reduce实现数组去重
let arr=[“百度”,“腾讯”,“阿里”,“字节”,“阿里”,“腾讯”,“百度”]

let result=arr.reduce((prev,item)=>{
//includes判断是有具有指定元素有t 没有f
if(!prev.includes(item)){
prev.push(item)
}
return prev
},[ ])
console.log(result)

举例 --- 统计字符的出现次数返回一个对象统计每一个字符的出现次数 {a:2,w:3}

let arr=["a","b","a","c","a","c"]
let result=arr.reduce((prev,item)=>{
if(item in prev){ //if条件当前属性是否在对象内部
//找到对应属性值 ++
prev[item]++
}else{
prev[item]=1
}
return prev
},{})
console.log(result) //[a:3,b:1,c:2]

金汤肥牛郭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
数组的新增方法

目录一、map①map方法②map类型二、filter三 some、every方法 ①some方法②every方法四、reduce方法一、map map方法给数组中的每一个元素进行特出处理后，返回一个新的数组举例//单价数组let prices=[50,80,90]prices=prices.map((item,index)=>{ return item+"元...
复制链接

扫一扫