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