Ramda 例子

限于喜欢 提交于 2020-08-10 04:13:45

官方文档, 这个函数确实比rxjs多...而且有些操作符不容易理解

https://ramda.cn/docs/

http://www.ruanyifeng.com/blog/2017/03/ramda.html

https://www.jianshu.com/p/c0e22a548dd5

 

ramda的最后一个参数是入参, 返回的也是一个函数

下面这个是使用pick, 从对象中提取指定的字段, 如果不存在则忽略, pickAll 对于不存在的返回undefined

const R = require('ramda')
let stu = {
  name: 'ace',
  age: 13,
  score: 90,
  addr: 'abcd'
}
const mapStateToProps = R.pick(['name', 'age']);

// { name: 'ace', age: 13 }
console.log(mapStateToProps(stu))

 

pickBy 选取慢足条件的属性

const isUpperCase = (val, key) => key.toUpperCase() === key;
R.pickBy(isUpperCase, {a: 1, b: 2, A: 3, B: 4}); //=> {A: 3, B: 4}

 

找到最低分数的组名

compose是从后向前执行函数, 最后一个是多元函数, 其他都是一元函数

const {compose, pipe, head, sort, descend, prop} = require("ramda");

const teams = [
  {name: 'Lions', score: 5},
  {name: 'Tigers', score: 4},
  {name: 'Bears', score: 6},
  {name: 'Monkeys', score: 2},
];

const sortByScoreDesc = sort(descend(prop("score")));
const getName = prop("name");
const findTheBestTeam = compose(
  getName,
  head,
  sortByScoreDesc
);

let name = findTheBestTeam(teams) // => Bears
console.log(name)
let name2 = pipe(
  sortByScoreDesc, head, getName
)(teams) // => Bears
console.log(name2)

 

解析get参数, 注意map返回的是函数, 而不是处理后的数据

const {compose, fromPairs, map, split, tail} = require("ramda");

const queryString = "?page=2&pageSize=10&total=203";

// fromPairs([['a', 1], ['b', 2], ['c', 3]]); //=> {a: 1, b: 2, c: 3}

const parseQs = compose(
  fromPairs, // 由一系列 “键值对” 创建一个 object。如果某个键出现多次,选取最右侧的键值对。
  map(split("=")),
  split("&"),
  tail // 删除列表中的首个元素(或者调用对象的 tail 方法)。
);

const result = parseQs(queryString); // => { page: '2', pageSize: '10', total: '203' }
console.log(result)

 

为对象添加新计算后的值

const {compose, converge, propOr, assoc, identity} = require("ramda");
// 合并前
const user = {
  id: 1,
  name: 'Joe'
}
const generateUrl = id => `https://img.socialnetwork.com/avatar/${id || 'default'}.png`;
const getUpdatedUser = user => ({...user, avatar: generateUrl(user.id)});

let a = getUpdatedUser(user);
// {
//   id: 1,
//   name: 'Joe',
//   avatar: 'https://img.socialnetwork.com/avatar/1.png'
// }
console.log(a)

const getUrlFromUser = compose(
  generateUrl,
  propOr("default", "id")
);
const getUpdatedUser2 = converge(
  assoc("avatar"), [
    getUrlFromUser,
    identity,
  ]);

let b = getUpdatedUser2(user)
// {
//   id: 1,
//   name: 'Joe',
//   avatar: 'https://img.socialnetwork.com/avatar/1.png'
// }
console.log(b)

 

 

invoker

将具有指定元数(参数个数)的具名方法,转换为可以被给定参数和目标对象直接调用的函数。

返回的函数是柯里化的,它接收 arity + 1 个参数,其中最后一个参数是目标对象。

const R = require('ramda')

const sliceFrom = R.invoker(1, 'slice');
sliceFrom(6, 'abcdefghijklm'); //=> 'ghijklm'
const sliceFrom6 = R.invoker(2, 'slice')(6);
sliceFrom6(8, 'abcdefghijklm'); //=> 'gh'

const dog = {
  speak: async () => 'Woof!'
};
const speak = R.invoker(0, 'speak');
speak(dog).then(console.log) //~> 'Woof!'

 

 

lens

返回封装了给定 getter 和 setter 方法的 lens 。 getter 和 setter 分别用于 “获取” 和 “设置” 焦点(lens 聚焦的值)。setter 不会改变原数据。

const xLens = R.lens(R.prop('x'), R.assoc('x'));

R.view(xLens, {x: 1, y: 2});            //=> 1
R.set(xLens, 4, {x: 1, y: 2});          //=> {x: 4, y: 2}
R.over(xLens, R.negate, {x: 1, y: 2});  //=> {x: -1, y: 2}

 

import {lensProp, view, over, toUpper} from 'ramda';

const person = {
  firstName: 'Fred',
  lastName: 'Flintstone'
}

const fLens = lensProp('firstName')

const firstName = view(fLens, person) // => 'Fred'

const result = over(fLens, toUpper, person)
// => {firstName: 'FRED', lastName: 'Flintstone'}

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!