函数式编程—高阶函数 学习笔记

文章内容输出来源：拉勾大前端高薪训练营

函数式编程就是对运算过程的抽象， 用来描述 数据（函数）之间的映射

• 函数可以存储在变量中
• 函数可以作为返回值
• 函数可以作为参数

JavaScript中函数就是一个普通的对象（可以通过 new Function() 创建），我们可以把函数存储到变量/数组中，，它还可以作为另一个函数的参数和返回值，我们也可以在程序运行的时候通过new Function() 来构造一个新的函数。

//面向过程编程
let sum1 = 1;
let sum2 = 2;
let sum = sum1 + sum2;
console.log(sum);

//函数式编程
function add(n1, n2){
  return n1 + n2;
}
let sum = add(1, 2);
console.log(sum);

1、函数可以存储在变量中

let fn = function () {
  console.log('哈哈哈')
}
//实例,
const BlogController= {
  index(posts) { return Views.index(posts) }
  show(posts) { return Views.show(posts) }
}
//如果一个函数包裹另一个函数，并且形式（参数和返回值）也相同的时候，我们就认为这是两个一样的函数
//优化
const BlogController= {
  index: Views.index,
  show: Views.show
}

高阶函数

高阶函数定义:
a、可以把函数作为参数传递给另一个函数
b、可以把函数作为另一个函数的返回结果

使用高阶函数的意义：
a、抽象可以帮我们屏蔽实现的细节，调用的时候只需要关注我们的目标就可以了
b、高阶函数是用来抽象通用的问题

2、高阶函数—函数作为参数

//数组中有很多方法，他们的参数就是函数，例如 forEach、filter、map 等等 他们都是高阶函数
// 模拟 forEach、filter
function forEach (array,  fn){
  for(let i = 0; i < array.length; i++){
    fn(array[i]);
  }
}
//过滤数组
function filter (array, fn){
  let results = [];
  for(let i = 0; i < array.length; i++){
    if(fn(array[i])){
      results.push(array[i]);
    }
  }
  return results;
}

let array = [1, 2, 3, 4 ];
//打印数组中的元素
forEach(array, function (item) {
  console.log(item);
});
//找到数组中的偶数
let r = filter(array, function(item) {
  return item % 2 === 0;
});
console.log(r);

3、高阶函数—函数作为返回值

function makeFn(){
   let msg = '测试一下';
   return function(){
    console.log(msg)  
  }
}
//调用
makeFn()();

//once, 一个函数只执行一个
function once (fn){
  let done = false;
  return function(){
    if(!done){
      done = true;
      return fn.apply(this, arguments);
    }  
  }
}
let pay = once(function (money){
  console.log(`支付了 ${money} RMB`);
});
pay(2);
pay(5);
pay(5);

常用的高阶函数，数组中
forEach、map、filter、every、some、find\index、reduce、sort .....

//模拟数组的map，作用对数组中的每一个元素进行遍历和处理，把处理的结果存储在一个新的数组中进行返回
const map = (array, fn) => {
  let results = [];
  for(let value of array){
    results.push(fn(value));
  }
  return results;
}
let arr = [1, 2, 3, 4];
arr = map(arr, v => v * v);
console.log(arr);

//模拟数组的every,  作用检测数组中的每一个元素是否都匹配我们指定的条件
const every = (array, fn) => {
   let result = true;
   for(let value of array){
     result = fn(value);
     if(!result) break;
  }
  return result;
}
let arr = [11, 29, 32, 14];
let r = every(arr, v => v > 10 );
console.log(r); //true

//模拟数组的some,  作用检测数组中元素是否有一个匹配我们指定的条件
const some = (array, fn) => {
   let result = false;
   for(let value of array){
     result = fn(value);
     if(result) break;
  }
  return result;
}
let arr = [1, 2, 3, 4];
let r = some(arr, v => v%2 === 0);
console.log(r); //true