[Javascript] Multiply Two Arrays over a Function in JavaScript
Just like the State ADT an Array is also an Applicative Functor. That means we can do the same tricks with liftA2
with Array
that we have been doing with State
.
While the Applicative aspect of State
allows use to combine multiple stateful transitions over a function, Array
allows us to create a new Array
that contains the results of calling every permutation of each element in two arrays over a function. We will use this ability to pull from two separate locations in our AppState
and generate an Array
of Card
s.
liftA2 from crocks.js "Ever see yourself wanting to
map
a binary or trinary function, butmap
only allows unary functions? Both of these functions allow you to pass in your function as well as the number ofApplicative
s (containers that provide bothof
andap
functions) you need to get the mapping you are looking for."lift from Ramda.js "lifts" a function of arity > 1 so that it may "map over" a list, Function or other object that satisfies the FantasyLand Apply spec.
// Crocks.js
const buildCard = curry((color, shape) => console.log(color, shape) || ({
id: `${color}-${shape}`,
color,
shape
}));
// buildCards :: [String] -> [String] -> [Card]
const buildCards = liftA2(buildCard);
// Ramda.js
const build = lift(buildCard);
---
const {prop,assoc, pick, State, identity, omit, curry, filter, converge,map, composeK, liftA2, equals, constant,option, chain, mapProps, find, propEq, isNumber, compose, safe} = require('crocks'); const {get, modify, of} = State; const {lift} = require('ramda'); const state = { colors: [ 'orange', 'green', 'blue', 'yellow' ], shapes: [ 'square', 'triangle', 'circle' ] }; const getState = (key) => get(prop(key)) const getColors = () => getState('colors').map(option([])); const getShapes = () => getState('shapes').map(option([])); const buildCard = curry((color, shape) => console.log(color, shape) || ({ id: `${color}-${shape}`, color, shape })); // buildCards :: [String] -> [String] -> [Card] const buildCards = liftA2(buildCard); const generateCards = converge( liftA2(buildCards), getColors, getShapes ) console.log( generateCards() .evalWith(state) ) const build = lift(buildCard); console.log('build', build([1,2,3], ['c', 'd']))
相关文章
- javascript访问html元素的内容(2)
- 细说JavaScript对象(4): for in 循环
- [Javascript] Keyword 'in' to check prop exists on Object
- [Functional Programming] Create Reusable Functions with Partial Application in JavaScript
- [HTML5] Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript
- [WASM] Set up wasm-bindgen for easy Rust/JavaScript Interoperability
- [Rust] Load a WebAssembly Function Written in Rust and Invoke it from JavaScript
- [Javascript] this in Function Calls
- [Javascript] Wrap a Javascript Built-in constructor with Proxy
- [Javascript] Run asynchronous functions in sequence using reduce
- [Algorithms] Classify Mystery Items with the K-Nearest Neighbors Algorithm in JavaScript
- [Algorithm] Write a Depth First Search Algorithm for Graphs in JavaScript
- [Algorithom] Stack Data Structure in JavaScript
- [Rust] Load a WebAssembly Function Written in Rust and Invoke it from JavaScript
- [Javascript] Flattening nested arrays: a little exercise in functional refactoring
- [Javascript Crocks] Apply a function in a Maybe context to Maybe inputs (curry & ap & liftA2)
- [Javascript] Array methods in depth - indexOf
- [Javascript] Array methods in depth - slice
- [Javascript] Hoisting in JavaScript
- [Javascript] Private, public variables and method in Name Space
- atitit.javascript调用java in swt attilax 总结
- initializeCachedDB function in JavaScript - how is the call delegated to
- JavaScript练习:创建数组。并使用 for...in 声明来循环输出数组中的元素
- javascript中的数据类型
- 〖大前端 - 基础入门三大核心之JS篇⑥〗- JavaScript中的数据类型之布尔类型、undefined 与 null类型详解
- JavaScript 框架(库)
- 原生JavaScript实现可自定义缩放轮播图效果