数组的高阶函数使用

数组的高阶函数及使用

数组有很多的方法，都很简单方便，向push,pop等等，但是对于高阶函数在实际使用用的很多，现在就来总结一下方法使用及场景

首先，什么是高阶函数：高阶函数，就是函数中可以传入另一个函数作为参数的函数。

1.forEach

  forEach是对数组每个数据进行遍历，与for的差别是，for可以将遍历的数组的每一项修改，而forEach并不会改变原数组（如果是数组对象值的修改，forEach也修改到对象的值）

 简单的使用 - 数组中的某个数据为判断依据修改其他数据

        let arr = [  {name:1}, {name:2}, {name:3},{name:4}];  
        let num;       
        arr.forEach((item,index) => { 
             if(item.name === 1){
                 num = 10          
               }});

2.filter

  filter筛选出满足条件的数组，满足条件 === 返回写的条件为true的每一项组成一个新的数     组，并不会改变原数组

简单的使用 - 筛选出数组中number大于8的数字

 let arr = [
 { name: 'a', number: 12 },
 { name: 'b', number: 8 },
 { name: 'c', number: 7 }, 
 { name: 's', number: 5 }]

 let arr1 = arr.filter((item, index) => { return item.number > 8 })

这时的数组的每一项只有大于8的对象

注意：filter.不管你的返回条件是什么，他都会返回满足条件的数组的某个整体元素，比如

       let arr = [    
         { name: 'c', id: 1 },      
         { name: 'c', id: 3 },       
         { name: 'c', id: 8 }        ]       

      let arr2 = [1, 5]       
      let a = arr.filter(item => arr2.includes(item.id))     

       console.log(a)

这个时候返回的满足条件（数组中含有id为1,5）的整个对象 {name: 'c', id: 1 }

3.map

  map遍历，返回**处理过的数组的每一项组成一个新的数组(需要数组的每一项的时候一般都会    用到map)，**通常应用于对数组的对象进行重新组合，或者需要向数组添加新数据

简单的实例 1  - 将一个数组对象的数据进行重新组合

       let arr = [
          { name: 'a', age: 15, fav: "篮球" },
          { name: 'b', age: 15, fav: "足球" },
          { name: 'c', age: 15, fav: "乒乓球" }, 
          { name: 'd', age: 15, fav: "排球" },  
          { name: 'e', age: 15, fav: "羽毛球" }]; 

      let arr1 = arr.map((item, index) => { 
       return { pepleName: item.name, myFav: item.fav, index: index + 1 }})

  打印arr1 - 是数据重构之后的数组

简单的实例 2 - 向数组添加新数据

       let arr = [ 
         { name: 'a', age: 15, fav: "篮球" },  
         { name: 'b', age: 15, fav: "足球" },  
         { name: 'c', age: 15, fav: "乒乓球" },  
         { name: 'd', age: 15, fav: "排球" },  
         { name: 'e', age: 15, fav: "羽毛球" }];

       let arr1 = arr.map((item, index) => {   
        return { ...item, index: index + 1 } })

当然利用深拷贝结合map ,将返回语句替换一个，结果都是一样的

 return Object.assign(item,{index:index+1})

打印-arr1

简单实例 3 - 将数组利用索引对应起来

       let arr = [  
          { name: 'a', age: 15, fav: "篮球" }, 
          { name: 'b', age: 15, fav: "足球" },  
          { name: 'c', age: 15, fav: "乒乓球" },  
          { name: 'd', age: 15, fav: "排球" },  
          { name: 'e', age: 15, fav: "羽毛球" }];       

      let arr1 = [  
        { key: '1', val: 'sss' },   
        { key: '2', val: 'fsd' },   
        { key: '3', val: 'fds' }, 
        { key: '4', val: 'fewf' },  
        { key: '5', val: 'ewd' }]  

     let arr2 = arr.map((item, index) => {  
         return { ...arr1[index], ...item } });        

打印arr2 -

注意：小坑 - map会返回undeifed

例如：

      let arr = [   
         { name: 'c', id: 1 },  
         { name: 'c', id: 3 },  
         { name: 'c', id: 8 }    ]      

     let arr2 = [1, 5]        

    let a = arr.map((item) => {  
      if (arr2.includes(item.id)) {    
         return item.id  } })

这个时候的a,会是[1,undefined,undefined],即便没有没有满足条件，他也会返回

4.sort

  sort是将数组进行排序，主要是根据传入的函数进行排序，最简单的就是数字排序

  简单实例 - 1 - 数字排序

        let arr = [1, 5, 2, 8, 10, 53, 9, 4]      
        let arr2 = arr.sort((a, b) => { return a - b }) 
        let arr3 = arr.sort((a, b) => { return b - a })

打印arr2,arr3 - 一个升序，一个降序

简单白话解释 - 给sort方法传递一个比较函数，而这个函数决定了它的两个参数(a,b)在排好序的数组中的先后顺序：假设第一个参数应该在前，比较函数应该返回一个小于0的数值，反之，假设第一个参数应该在后，函数应该返回一个大于0的数值，并且，假设两个值相等，函数应该返回0。可以利用这个做复杂一点的排序

简单案例 - 2  - 

        let arr = [  
          { name: 'a', score: 85 },  
          { name: 'b', score: 56 },   
          { name: 'c', score: 68 },    
          { name: 'd', score: 89 },   
          { name: 'e', score: 88 }]        

     let arr2 = arr.sort((a, b) => {    
        if (a.score > b.score) {       
           return 1  //第二参数在前面           
         } if (a.score < b.score) {     
           return -1  //第一个参数在前面，小的在前面     
        } else {       
           return 0   }})

 进行简写 - 

        let arr2 = arr.sort((a, b) => {          
        if (a.score === b.score) 
           { return a.score - b.score }       
           return a.score - b.score })

下面是检测数组中的元素是否满足条件，最后需要boolean的一些高阶函数

5.some

some方法会检测，返回布尔值，不改变原数组。在执行中，有一个满足就返回true，不再继续执行

简单案例 - 检查数组对象中是否含有某个值

      let arr = [ 
        { name: 'a', age: 15},  
        { name: 'c', age: 55}
        { name: 'v', age: 14},   
        { name: 'd', age: 18} ]   

     arr.some(item => item.name.includes('a'))

检测数组，当检测到第一个对象有a,直接返回true

6.every

  与some不同，它会去检测数组中的每一项是否满足条件，所有都满足才会返回true

简单案例 - 检测数组中的所有对象是否满足条件

    let arr = [  
      { name: 'a', age: 15},   
      { name: 'c', age: 55},        
      { name: 'v', age: 14},         
      { name: 'd', age: 18} ]

   arr.every(item => item.age>10)

7.reduce

会对数组中的元素进行回调函数中的方法，经常都用于累加

reduce的语法：

//init 表示初始值
//prev 表示上一次调用回调时的返回值，或者初始值 init;
//cur 表示当前正在处理的数组元素；
//index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
//arr 表示原数组；
arr.reduce((prev,cur,index,arr) => {

}, init);

简单实例 - 数组的累加

       let arr = [1,5,8,2,10 ]       

       let a =  arr.reduce((total,num)=>{   
         return total+num        })  

        console.log(a)

 同理 - 可以累乘，将total理解为数组的第一个对象，num是第二个，然后对其进行操作，循环，第二次的total就是已经执行了函数的数据，num就是第三个值

简单实例 - 数组去重

var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

简单实例 - 求数组中的最大值

var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

这个函数如果处理的好，很多时候可以简化很多代码

8.find

找出数组中满足条件项，找到一项直接返回满足条件的项，不在进行往下寻找

简单案例

        let arr = [   
         { name: 'a', age: 15},    
         { name: 'c', age: 55},
         { name: 'v', age: 14}, 
         { name: 'd', age: 18} ]      

        let a =  arr.find(item => item.age>10)     
        console.log(a)

将打印数组中第一项