JavaScript函数式编程基础

Posted 2021-11-07 wanluN1

javascript函数式编程基础

函数调用 引用 做返回值

/*javascript函数式编程基础*/
function sayHello(){
    return "hello world";
}
let result=sayHello();//函数调用
let fn=sayHello;//函数引用
console.log(fn());//hello world

//函数做返回值
function ee(){
    return function(){
        return "hello world";
    }
}
console.log(ee()());//hello world

高阶函数，传入参数为函数

//高阶函数，传入参数为函数
let nnjfd=[1,2,3];
nnjfd=nnjfd.map(number=>number*2);
console.log(nnjfd);//[2,4,6]

箭头函数与函数功能流水线化

//箭头函数,与流水线化
input="JS";
trim=str=>str.trim();
wrapInDiv=str=>`<div>${str}</div>`;
toLowerCase=str=>str.toLowerCase();
result=wrapInDiv(toLowerCase(trim(input)));
console.log(result);//<div>js</div>
//当wrapInDiv(toLowerCase(trim(input)));功能越多，代码越来越多
//比较乱，怎么解决看起来好一些呢
let fp=require("lodash/fp");
transform=fp.compose(wrapInDiv,toLowerCase,trim);//何为一个函数,从右到左执行
//每个函数的返回值会成为下个函数的参数
console.log(transform(input));//<div>js</div>
transform=fp.pipe(trim,toLowerCase,wrapInDiv);//何为一个函数,从左到右执行
console.log(transform(input));//<div>js</div>

柯里化

//柯里化
trim=str=>str.trim();
wrapInDiv=type=>str=>`<${type}>${str}<${type}>`;
/*
function(a){
    return function(b){
        return a+b;
    }
}
*/
toLowerCase=str=>str.toLowerCase();
transform=fp.pipe(trim,toLowerCase,wrapInDiv("div"));
console.log(transform(input));//<div>js<div>

纯函数

//纯函数
//纯函数中不能使用随机值
//No random values
//no current date/time
//no global state
function isEligible(age){//it's not pure function
    return age>minAge;
}
function isEligi(age,minAge){//it's pure function
    return age>minAge;
}
//纯函数优点
/*Self-documenting  Easily testable  Concurrency  Cacheable*/

更新对象、浅拷贝问题

//更新对象
const person={name:'John',adress:{city:'san francisco'}};
person.name='Mary';
//Error  person={}
tempObject=Object.assign({},person,{name:'Bob',age:11});//将person对象内的内容复制到{} 再返回
console.log(tempObject);//{ name: 'Bob', adress: { city: 'san francisco' }, age: 11 }
//拆分操作符
tempObject={...person,a:'a',b:'b'};
console.log(tempObject);//{ name: 'Mary', adress: { city: 'san francisco' }, a: 'a', b: 'b' }
tempObject.adress.city='ppp';
console.log(person);//{ name: 'Mary', adress: { city: 'ppp' } }
//上面对象的拷贝都只是一种浅拷贝，拆分操作符与Object.assign都是
//如何深拷贝,手动使用...将adress拆分，重写city
tempObject={...person,adress:{...person.adress,city:'p'}};
tempObject.adress.city='ccc';
console.log(tempObject);//{ name: 'Mary', adress: { city: 'ccc' } }
console.log(person);//{ name: 'Mary', adress: { city: 'ppp' } };
//或者使用深拷贝库来解决问题

更新数组

//更新数组
numbers=[1,2,3];
index=numbers.indexOf(2);
//Adding
added=[
    ...numbers.slice(0,index),
    4,
    ...numbers.slice(index)
];
console.log(added);//[ 1, 4, 2, 3 ]
//Removing
numbers=numbers.filter(n=>{
    return n!==4;
});
console.log(numbers);//[1,2,3]
//Updating
updated=numbers.map(v=>{return v===2?20:v});
console.log(updated);//[ 1, 20, 3 ]

不可变对象 immutable与immer库

//不可变对象immutable库
const { Map } = require('immutable');
let book=Map({title:"Harry Potter"});
function publish(book){
    return book.set("isPublished",true);
}
booked=publish(book);
console.log(book.toJS());//{ title: 'Harry Potter' }
console.log(booked.toJS());//{ title: 'Harry Potter', isPublished: true }

book={title:"Harry Potter"};
const {produce}=require("immer");
function publish1(book){
    return produce(book,draftBook=>{
        draftBook.isPublished=true;
    });
}
temp=publish1(book);
console.log(book);//{ title: 'Harry Potter' }
console.log(temp);//{ title: 'Harry Potter', isPublished: true }
temp.title='OOPOP';
console.log(book);//{ title: 'Harry Potter' }
console.log(temp);//{ title: 'Harry Potter', isPublished: true }