React 实用笔记(一)JavaScript 函数式编程

本文探讨了函数式编程在JavaScript中的应用,特别是在React开发中的重要性。介绍了函数编程的基本概念,如不可变性、纯函数,以及如何通过数据转换和递归来简化代码。还讨论了合成(compose)函数在构建高阶函数中的作用,帮助开发者更好地理解和应用函数式编程技巧。
摘要由CSDN通过智能技术生成
  1. 什么是函数编程

    在JavaScript中,函数可以表示应用程序中的数据。函数就是变量,可以将它添加到对象中。

    可以将函数添加到数组中
    函数可以像其他变量那样,作为其他函数的参数进行传递
    函数可以像其他变量那样,作为其他函数的执行结果被返回

  2. 函数式编程基本概念

    不可变性:在不修改原生数据结构的前提下,我们在这些数据结构的拷贝上进行编辑,并使用它们取代原生的数据。

     var rateColor=function(color,rating){
         return Object.assign({},color,{rating:rating});
     }
     //或使用ES7规范下的对象扩展运算符编写
     const rateColor = (color,rating)=>
    	 ({
    		 ...color,
    		 rating
    	 })
     //Array.push 方法并不是一个不可变函数,我们必须使用Array.concat取代它
     let list = [
     	{ title:"Rad Red" },
     	{ title:"Lawn" }
     ]
     const addColor=(title,array) => array.concat({title});
     addColor("Glam Green",list)
    

    纯函数
    纯函数是一个返回结果只依赖于输入参数的函数。纯函数至少需要接收一个参数并且总是返回一个值或者其他函数。它们不会产生副作用、不修改全局变量,或者任何应用程序的state。它们将输入的参数当作不可变数据。

    const frederick = {
    	name:"Zhang San",
    	canRead:false,
    	canWrite:false
    }
    const selfEducate = person =>({
    	...person,
    	canRead:true,
    	canWrite:true
    })
    selfEducate(frederick);
    

    数据转换
    如果数据是不可变的,函数式编程的做法是将一种数据转换成另外一种数据。我们使用函数生成转换后的副本。这些函数使命令式的代码更少,并且大大降低了复杂度。

    const schools = [
    	"school1",
    	"school2",
    	"school3"
    ]
    console.log(schools.join(","));
    //Array.filter 创建一个新数组,该函数会使用一个谓词作为它的一位参数,返回值将会用来决定该元素是否可以被添加到新的数组
    const wSchools = schools.filter(school => school[0] === "W");
    //Array.map 创建一个新数组,该函数会接收一个函数作为它的参数,该函数会在访问数组中每个元素时执行。
    const higthSchool = schools.map(school => `${school} Hight School`)
    //Object.keys 方法可以用来获得某个对象中属性键的数组
    const schools ={
    	"Yorktown":10,
    	"Wakefield":5
    }
    const schoolArray = Object.keys(schools).map(key => 
    ({
    	name:key,
    	wins:schools[key]
    }))
    console.log(schoolArray);
    	//[
    	//	{
    	//		name: "Yorktown",
    	//		wins: 10
    	//	},
    	//	{
    	//		name: "Wakefield",
    	//		wins: 5
    	//	}
    	//]
    //reduce和reduceRight 函数可以用来将数组装换成任意值,reduceRight与reduce工作原理类似,主要区别在于它是从末尾开始处理元素的
    //reduce方法会接收两个参数:回调函数和原生值,注意:需要初始化赋值给回调函数返回值
    const ages = [21,235,45,23,12]
    const maxAge = ages.reduce((max,age) => {
    	if(age>max){
    		return age;
    	}else{
    		return max;
    	}
    } , 0)
    
  3. 递归

    const countDown = (value, fn) => {
    	fn(value);
    	let result;
    	if(value > 0)
    		result = countDown(value-1,fn)
    	else
    		result = value;
    	return result;
    }
    
  4. 合成
    合成的目标是“通过整合若干简单函数,构造一个更高阶的函数”
    replace方法可以串联起来实现链式调用
    compose函数是一个高阶函数,它将函数作为参数,然后返回单一的值。

    const both = date => appendAMPM(civilianHours(date));
    //或
    const both = compose(
    	civilianHours,
    	appendAMPM
    ) 
    both(new Date())
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值