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

標籤：JavaScript

上一篇：7.JavaScript-Promise的并行和串行

下一篇：jquery獲取input輸入框中的值