数组新增方法

最新推荐文章于 2024-07-03 02:47:20 发布

等雪落江南

最新推荐文章于 2024-07-03 02:47:20 发布

阅读量1k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qaq99625/article/details/124218872

版权

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

一般使用场景：前端校验器

        //提交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}