函数式编程-函数篇

函数在jJavaScript中是一等公民

函数的用法

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

2、函数作为参数使用

3、函数作为返回值使用

1、函数赋值给变量

const fun3 = () => {
    console.log('this is function');
}

2、函数作为参数使用

通过重写高阶函数带大家认识一下

重写数组 forEach 方法 遍历数组中的每一个元素

let arr = [1, 3, 5, 7, 9, 11, 33, 55, 66, 77, 88, 99]

function forEach(array, fn) {
    for (let index = 0; index < array.length; index++) {
        const element = array[index];
        fn(element)
    }
}
forEach(arr, function(item) {
    console.log(item);
})


//模拟数组中filter方法

function filter(array, fn) {
    let result = [];
    for (let index = 0; index < array.length; index++) {
        const element = array[index];
        if (fn(element)) {
            result.push(element)
        }
    }
    return result;
}

let result = filter(arr, function(item) {
    return item % 2 === 0
});

3、函数作为返回值的使用

函数作为返回值的使用方法如下

function makeFn(param) {
    return function() {
        console.log('这是函数式编程')
    }
}

const make = makeFn();
调用方法1
make(); //这是函数式编程

调用方法2
makeFn()(); //这是函数式编程

重写jQuery 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(600) //支付了600RMB

4、使用高阶函数的意义

1、抽象可以帮我们屏蔽细节，只需要关注与我们的目标
2、高阶函数是用来抽象通用问题的

//面向过程的方式

let arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let index = 0; index < arr3.length; index++) {
    const element = arr3[index];
    console.log(element);
}

//高级高阶函数

let arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
forEach(arr4, item => {
    console.log(item);
});

let arr5 = filter(arr4, item => item > 3)
console.log(arr5);

模拟常用高阶函数

map函数

const map = (arr, fn) => {
    let results = [];
    for (const item of arr) {

        results.push(fn(item))
    }
    return results
};

let arr6 = [1, 2, 3, 4];

arr6 = map(arr6, (value) => value * value);

console.log(arr6);

every函数

let arr7 = [1, 2, 3, 4];

const every = (arr, fn) => {
    let result = true
    for (const item of arr) {
        result = fn(item)
        if (!result) {
            break;
        }
    }
    return result
};

let res = every(arr7, (item) => item > 2);

console.log(res); //false

some函数

let arr8 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const some = (arr, fn) => {
    let result = false
    for (const item of arr) {
        result = fn(item);
        if (result) {
            break;
        }
    };
    return result
}

let target = some(arr8, item => item % 2 === 0);

console.log(target);//true

谢谢观看，如有不足敬请指教