JavaScript进阶6之函数式编程与ES6&ESNext规范

VillanelleS

已于 2024-05-31 08:36:48 修改

阅读量886

点赞数 5

分类专栏： JavaScript 前端文章标签： javascript es6 开发语言

于 2024-04-10 17:47:20 首次发布

本文链接：https://blog.csdn.net/qq_34306228/article/details/137233274

版权

本文深入探讨JavaScript的柯里化（curry）、compose、模板字符串、箭头函数、生成器（generator）和反射（Reflect）等ES6及ESNext特性。通过实例解析curry和compose的使用，同时讨论了css in js方案和不同样式体系的优缺点，特别是针对SSR服务端渲染的解决方案。此外，文章还提到了箭头函数的问题以及生成器在异步处理中的应用场景。

摘要由CSDN通过智能技术生成

函数式编程

柯里化curry
- curry
- compose
- - 示例：
  - - 简化版
    - 展开写：
- debug
- - 示例一：
  - 示例二：
模板字符串
- css in js方案
箭头函数
- 问题
生成器 generator
- 应用场景
反射 Reflect

柯里化curry

compose是curry的应用
在 lodash/fp
underscore
ramba

curry

function curry(fn){
   
    // 统计传入函数的参数个数
    const len=fn.length
    // 函数命名为的后面重复调用
    return function curried(...args){
   
        // 当传入的参数个数大于等于函数需要的参数个数的时候，则执行函数
        if(args.length>=len){
   
            return fn.apply(this,args)
        }else{
   
            // 否则返回函数并且接收后面传入的参数
            return function(...args2){
   
                // 执行回调curried函数，将参数合并传入下一次回调中
                return curried.apply(this,args.concat(args2))
            }
        }
    }
}

compose

两个函数组合：

function compose(f,g){
   
    return function(x){
   
        return f(g(x))
    }
}

不确定个数函数组合：

// 传入多个函数
function compose(...fns){
   
    // 当个数
    if(fns.length===0){
   
        // console.log("-----等于0----");
        // compose不传参数的时候，返回的是一个函数，这个函数传的参数都返回
        return (args)=>args
    }
    if(fns.length===1){
   
        // console.log("----等于1-----");
        // compose传入一个参数的话，就返回这个函数
        return fns[0]
    }
    // compose传入两个及两个以上函数的时候，使用reduce将作为参数的函数从右往左执行
    return fns.reduce((pre,cur)=>(...args)=>pre(cur(...args)))
}

示例：

简化版

var compose=(f,g)=>(x)=>f(g(x))
const curry=require('lodash').curry

var toUpperCase=curry(function(str){
   
    return str.toUpperCase()
})

var head=curry(function(x){
   
    return x[0]
})
var initials=function(name){
   
    return name.split(' ').map(compose(toUpperCase,head)).