React 实用笔记（一）JavaScript 函数式编程

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())