什么是函数柯里化,函数柯里化的应用场景,函数柯里化的优缺点

函数柯里化

  • 1. 什么是函数柯里化?
  • 2. 函数柯里化面试题
  • 3. 应用场景

1. 什么是函数柯里化?

函数柯里化是js闭包的典型应用。所以缺点就是闭包造成的缺点,占用内存较多等

什么是函数柯里化?
   就是将一个函数的多个参数,分成多个单一参数的函数返回
好处:入口单一,便于测试和复用; 易于定位bug
坏处:嵌套的函数多,占用内存多,效率低,每个函数都会在栈中占据内存,都有单独的函数级作用域
		// 普通函数
        function fn(n,m,z){
            console.log(n+m+z);
        }
        fn(1,2,3)

        // 柯里化之后 --- 每次只传入一个参数,而且内部是以函数形式嵌套的
        function xx(n){
            return function(m){
                return function(z){
                    console.log(n + m + z);
                }
            }
        }

2. 函数柯里化面试题

    /**题目:
     * 函数柯里化
     * add(1,2,3)
     * add(1)(2)(3)
     * add(1,2)(3)
     * add(1)(2,3) 
     */

        // 函数柯里化
        function add(){
            // let args = arguments; // 第一个括号里的参数 // 但args不是一个数组,要进行数组转换
            let args = [...arguments]; // args接收第一个括号里的参数
            
            let inner = function(){ // 接收第二个括号里的参数
                args.push(...arguments) // 将第二个括号里的参数push到args中
                return inner
            }
            // 重写函数的toString方法,利用它返回计算值
            inner.toString = function(){
                return args.reduce((prev,current)=>{
                    return prev + current;
                },0)
            }
            return inner
        }
        
        console.log(+add(1)(3)); // 4
        console.log(+add(1,2)(3)); // 6
        console.log(+add(1)(2)(3)) // 6
        console.log(+add(1)(2)(3)(1,4)) // 11

3. 应用场景

两个数组中都是对象元素集合,但是两个数组中对象的键值对名字不同
单纯获取两个数组中的名字,可以用数组的map方法直接实现
问题:如果有多个不同数组,他们对象键值对名字都不同,这种方式就不太友好
        const nameList1 = [
            {mid:"妲己",profession:"中单"},
            {mid:"安其拉",profession:"中单"},
            {mid:"王昭君",profession:"中单"},
            {mid:"扁鹊",profession:"中单"},
        ];
        const nameList2 = [
            {sup:"庄周",profession:"辅助"},
            {sup:"大乔",profession:"辅助"},
            {sup:"蔡文姬",profession:"辅助"}
        ];
        console.log(nameList1.map(hero => hero.mid)); // (4) ['妲己', '安其拉', '王昭君', '扁鹊']
        console.log(nameList2.map(hero => hero.sup)); // (3) ['庄周', '大乔', '蔡文姬']
改进为柯里化函数   
        // 应用场景
        const nameList1 = [
            {mid:"妲己",profession:"中单"},
            {mid:"安其拉",profession:"中单"},
            {mid:"王昭君",profession:"中单"},
            {mid:"扁鹊",profession:"中单"},
        ];
        const nameList2 = [
            {sup:"庄周",profession:"辅助"},
            {sup:"大乔",profession:"辅助"},
            {sup:"蔡文姬",profession:"辅助"}
        ];

        // 函数柯里化
        // 先传入第一个参数name,再返回一个箭头函数同时传入第二个参数element,再以[]的形式读取数组元素
        const curring = name => element => element[name]; 
        const name_mid = curring('mid')
        const name_sup = curring('sup')
        
        // map()中的函数,数组中的每一个元素都要调用该函数执行
        console.log(nameList1.map(name_mid)); // (4) ['妲己', '安其拉', '王昭君', '扁鹊']
        console.log(nameList2.map(name_sup)); // (3) ['庄周', '大乔', '蔡文姬']

你可能感兴趣的:(web前端,javascript,前端,开发语言)