文章内容输出来源:拉勾大前端高薪训练营
函数式编程就是对运算过程的抽象, 用来描述 数据(函数)之间的映射
- 函数可以存储在变量中
- 函数可以作为返回值
- 函数可以作为参数
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