ES6新增的数组方法

本文整理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新增的一些数组方法 如有错误还望大牛们指正 感谢阅读