高階函數(shù)之map filter reduce

記錄一下最近看的高階函數(shù)~

參考鏈接
https://juejin.im/post/5cb30e2ce51d456e63760450#heading-9
https://www.cnblogs.com/chengxs/p/11088238.html

高階函數(shù)

高階函數(shù)指的是一個函數(shù)以函數(shù)為參數(shù)，或以函數(shù)為返回值莱睁，或者既以函數(shù)為參數(shù)又以函數(shù)為返回值

高階函數(shù)經常用于：

抽象或隔離行為崎脉、作用阀蒂，異步控制流程作為回調函數(shù)何鸡，promises肾扰，monads等
創(chuàng)建可以泛用于各種數(shù)據(jù)類型的功能
部分應用于函數(shù)參數(shù)（偏函數(shù)應用）或創(chuàng)建一個柯里化的函數(shù)抄伍，用于復用或函數(shù)復合熏挎。
接受一個函數(shù)列表并返回一些由這個列表中的函數(shù)組成的復合函數(shù)

js一些內置的高階函數(shù)

Array.prototype.map
Array.prototype.filter
Array.prototype.reduce

一張圖講清三者區(qū)別

區(qū)別

map

map() 方法創(chuàng)建一個新數(shù)組，其結果是該數(shù)組中的每個元素都調用一個提供的函數(shù)后返回的結果前痘。map 不會改變原數(shù)組凛捏。

var animals = [
  { name: "Fluffykins", species: "rabbit" },
  { name: "Caro", species: "dog" },
  { name: "Hamilton", species: "dog" },
  { name: "Harold", species: "fish" },
  { name: "Ursula", species: "cat" },
  { name: "Jimmy", species: "fish" }
];

// 不使用高階函數(shù)
var names = [];
for (let i = 0; i < animals.length; i++) {
  names.push(animals[i].name);
}
console.log(names); //["Fluffykins", "Caro", "Hamilton", "Harold", "Ursula", "Jimmy"]


// 使用高階函數(shù)
var names = animals.map(x=>x.name);
console.log(names); //["Fluffykins", "Caro", "Hamilton", "Harold", "Ursula", "Jimmy"]

filter

filter() 方法會創(chuàng)建一個新數(shù)組，其中包含所有通過回調函數(shù)測試的元素芹缔。
filter 為數(shù)組中的每個元素調用一次 callback 函數(shù)坯癣， callback 函數(shù)返回 true 表示該元素通過測試，保留該元素最欠，false 則不保留示罗。filter 不會改變原數(shù)組惩猫，它返回過濾后的新數(shù)組。

var animals = [
  { name: "Fluffykins", species: "rabbit" },
  { name: "Caro", species: "dog" },
  { name: "Hamilton", species: "dog" },
  { name: "Harold", species: "fish" },
  { name: "Ursula", species: "cat" },
  { name: "Jimmy", species: "fish" }
];

// 不使用高階函數(shù)
var dogs = [];
for (var i = 0; i < animals.length; i++) {
  if (animals[i].species === "dog") dogs.push(animals[i]);
}
console.log(dogs); 


// 使用高階函數(shù)
var dogs = animals.filter(x => x.species === "dog");
console.log(dogs); // {name: "Caro", species: "dog"} // { name: "Hamilton", species: "dog" }

reduce

reduce 方法對調用數(shù)組的每個元素執(zhí)行回調函數(shù)蚜点，最后生成一個單一的值并返回轧房。 reduce 方法接受兩個參數(shù)：1）reducer 函數(shù)（回調），2）一個可選的 initialValue绍绘。
reduce() 方法接收一個函數(shù)作為累加器奶镶，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值陪拘。

語法

arr.reduce(callback,initialValue)

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.計算數(shù)組中每個元素出現(xiàn)的次數(shù)

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}

3.數(shù)組去重

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.將二維數(shù)組轉化為一維

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.將多維數(shù)組轉化為一維

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

6.對象里的屬性求和

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

7.將[1,3,1,4]轉為數(shù)字1314

function addDigitValue(prev,curr,curIndex,array){
    var exponent = (array.length -1) -curIndex;
    var digitValue = curr*Math.pow(10,exponent);
    return prev + digitValue;
}
var arr6 = [1,3,1,4];
var result7 = arr6.reduce(addDigitValue,0)
console.info('result7',result7)