8.Javascript-map、reduce、filter 等高階函數

高階函數

高階函數是對其餘函數進行操做的函數，能夠將它們做爲參數或經過返回它們。簡單來講，高階函數是一個函數，它接收函數做爲參數或將函數做爲輸出返回。

例如Array.prototype.map，Array.prototype.filter而且Array.prototype.reduce是一些高階功能，內置的語言。

1. Array.prototype.map

該map()方法經過調用做爲輸入數組中每一個元素的參數提供的回調函數來建立一個新數組。該map()方法將從回調函數中獲取每一個返回值，並使用這些值建立一個新數組。

傳遞給回調函數map()方法接受3個參數：element，index，和array。

假設咱們有一個數組，咱們想要建立一個新數組，其中包含第一個數組的每一個值的兩倍。讓咱們看看如何使用和不使用高階函數來解決問題。

不用高階函數

1 const arr1 = [1,2,3]; 
2 const arr2 = [];
3 for（let i = 0; i <arr1.length; i ++）{ 
4  arr2.push（arr1 [i] * 2）; 
5 }
6 //打印[2,4,6] 
7 console.log（arr2）;

使用高階函數

 1 const arr1 = [1, 2, 3]; 2 const arr2 = arr1.map(item => item * 2); //使用es6的箭頭函數  打印[2,4,6]     

 建立自定義高階函數  

 1 //假設咱們有一個字符串數組，咱們但願將此數組轉換爲整數數組，其中每一個元素表示原始數組中字符串的長度。
 2 const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C'];
 3 function mapForEach(arr, fn) {
 4  const newArray = [];
 5  for(let i = 0; i < arr.length; i++) {
 6  newArray.push(
 7   fn(arr[i])
 8  );
 9  }
10  return newArray;
11 }
12 const lenArray = mapForEach(strArray, function(item) {
13  return item.length;
14 });
15 // prints [ 10, 6, 3, 4, 1 ]
16 console.log(lenArray);

 

2. Array.prototype.filter

filter() 方法建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素。

注意： filter() 不會對空數組進行檢測。

注意： filter() 不會改變原始數組。

//返回數組 ages 中全部元素都大於 18 的元素:
var ages = [32, 33, 16, 40];
var result = ages.filter( item => { return item >= 18})
// 輸出結果 32,33,40

 

3. Array.prototype.reduce

reduce() 方法接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。

reduce() 能夠做爲一個高階函數，用於函數的 compose。

注意: reduce() 對於空數組是不會執行回調函數的。

語法： arr.reduce(callback,[initialValue]) 

total ：必需。初始值, 或者計算結束後的返回值。
currentValue：必需。當前元素
currentIndex：可選。當前元素的索引
arr：可選。當前元素所屬的數組對象。
initialValue：可選。傳遞給函數的初始值 （做爲第一次調用 callback 的第一個參數。）


// 計算數組元素相加後的總和：
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

打印結果：
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
//這裏能夠看出，上面的例子index是從1開始的，第一次的prev的值是數組的第一個值。數組長度是4，可是reduce函數循環3次。

reduce的簡單用法

// 1.簡單的就是咱們經常使用的數組求和，求乘積了。
var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘積，24


// 2.計算數組中每一個元素出現的次數
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
// 注意這裏設置了 初始值 {} 來存儲 pre[cur] key 值；與pre對比含有就自增

// 3.數組去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

// 4.將二維數組轉化爲一維
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

// 5.對象裏的屬性求和
var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60