vue学习记录-08(二) 高阶函数

vue学习记录-08(二) 高阶函数

这篇文章是根据codewhy老师在b站的视频进行的学习记录

---

---

一、编程范式

1、命令式编程与声明式编程

命令式编程：一步一步的告诉计算机怎么做。几乎所有编程语言都可以这么写
声明式编程：告诉计算机你需要什么，怎么做由计算机决定。例如HTML、CSS、SQL等都属于声明式编程。

2、面向对象编程与函数式编程

面向对象编程：第一公民是对象，优先考虑对象与对象之间的关系。
函数式编程：第一公民是函数，以函数计算为核心进行的编程方式，更符合人类语言习惯。

二、一个数据处理的小案例

公共数据：

	const nums = [10, 20, 111, 222, 444, 40, 50]

1、三个需求的解决方法

（一）取出所有小于100的数字

let newNums=[]
for(let n of nums){
  if(n<100){
    newNums.push(n)
  }
}
console.log(newNums);

（二）将所有小于100的数字进行转化：全部*2

let new2Nums=[]
for(let n of newNums){
  new2Nums.push(n*2)
}
console.log(new2Nums);

（三）将所有new2Nums数字相加，得到最终的结果

let total=0
for(let n of new2Nums){
  tatal+=n
}
console.log(total);

2、使用函数式编程如何解决

如果使用函数式编程，这个案例的代码量将会大大减小：

let total=nums.filter(function(n){
  return n<100
}).map(function(n){
  return n*2
}).reduce(function(preValue,n){
  return preValue+n
},0)
console.log(total);

这种大括号内只有一个return的代码也可以用箭头函数来写。

let total = nums.filter(n=>n<100).map(n=>n*2).reduce((pre,n)=>pre+n);
console.log(total);

下面来以此讲解这个案例中所使用的函数。

（一）filter函数的使用

用法：过滤出数组中符合要求的元素并返回一个新数组
格式：array.filter(function(currentValue,index,arr), thisValue)
filter包含一个回调函数function(currentValue,index,arr)，回调函数有一个要求：必须返回一个boolean值。
当返回true时，函数内部会自动将这次回调的currentValue加入到新的数组中；
当返回false时，函数内部会过滤掉这次的currentValue。

let newNums = nums.filter(function (n) {
  return n < 100
})
console.log(newNums);

（二）map函数的使用

用法：对数组内的所用数据按顺序处理并返回一个新数组

let new2Nums=newNums.map(function(n){
  return n*2
})
console.log(new2Nums);

（三）reduce函数的使用

用法：对数组内的所有元素进行汇总并返回一个值

let total=new2Nums.reduce(function(preValue,n){
  return preValue+n
},0)
console.log(total);