[Functional Programming] Draw Items from One JavaScript Array to Another using a Pair ADT
We want to be able to pick nine random cards from an array of twelve cards, but can run into problems of keeping both the cards already draw and the cards left to draw from. Tracking two bits of state like this can create some hard to maintain argument gymnastics when creating our functions. Luckily we have a datatype Pair
at our disposal that allows us to combine two values in to one value.
We will use this Pair
type to model both a draw pile and a remaining pile, and take advantage of a couple special properties of Pair
that will allow us to combine two Pair
instances in a meaningful way by chain
ing. Just like we have done time and time again with the State
ADT.
We have generated array of cards:
[ { id: 'orange-square', color: 'orange', shape: 'square' }, { id: 'orange-triangle', color: 'orange', shape: 'triangle' }, { id: 'orange-circle', color: 'orange', shape: 'circle' }, { id: 'green-square', color: 'green', shape: 'square' }, { id: 'green-triangle', color: 'green', shape: 'triangle' }, { id: 'green-circle', color: 'green', shape: 'circle' }, { id: 'blue-square', color: 'blue', shape: 'square' }, { id: 'blue-triangle', color: 'blue', shape: 'triangle' }, { id: 'blue-circle', color: 'blue', shape: 'circle' }, { id: 'yellow-square', color: 'yellow', shape: 'square' }, { id: 'yellow-triangle', color: 'yellow', shape: 'triangle' }, { id: 'yellow-circle', color: 'yellow', shape: 'circle' } ]
By the following code:
const {prop,assoc, pick, State, identity, omit, curry, filter, fanout, converge,map, composeK, liftA2, equals, constant,option, chain, mapProps, find, propEq, isNumber, compose, safe} = require('crocks'); const {get, modify, of} = State; // #region generateCards 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) => ({ id: `${color}-${shape}`, color, shape })); const buildCards = liftA2(buildCard) const generateCards = converge( liftA2(buildCards), getColors, getShapes ) // #endregion
Now what we want to do is split cards array into a Pair,
on the left side pair is the selected card array,
on the rigth side pair is the unselected cards array.
// Splite Cards into two pars //[Selected Cards] - [UnSelected Cards] const getAt = index => array => array[index]; const unsetAt = index => array => ([...array.slice(0, index), ...array.slice(index + 1)]); // Deck :: Pair [Card] [Card] // drawCardAt :: Integer -> [Card] -> Deck const drawCardAt = index => fanout( getAt(index), unsetAt(index) ) console.log( generateCards() .map(drawCardAt(0)) .evalWith(state).fst() ) // { id: 'orange-square', color: 'orange', shape: 'square' } console.log( generateCards() .map(drawCardAt(0)) .evalWith(state).snd() ) /** [ { id: 'orange-triangle', color: 'orange', shape: 'triangle' }, { id: 'orange-circle', color: 'orange', shape: 'circle' }, { id: 'green-square', color: 'green', shape: 'square' }, { id: 'green-triangle', color: 'green', shape: 'triangle' }, { id: 'green-circle', color: 'green', shape: 'circle' }, { id: 'blue-square', color: 'blue', shape: 'square' }, { id: 'blue-triangle', color: 'blue', shape: 'triangle' }, { id: 'blue-circle', color: 'blue', shape: 'circle' }, { id: 'yellow-square', color: 'yellow', shape: 'square' }, { id: 'yellow-triangle', color: 'yellow', shape: 'triangle' }, { id: 'yellow-circle', color: 'yellow', shape: 'circle' } ] */
Here we use 'fanout' to generate a Pair.
Notice that the left side pair is an object, not an array, we need to use 'bimap' to lift left side pair into Array. To do that,. we use 'bimap'
const drawCardAt = index => compose( bimap(Array.of, identity), fanout( getAt(index), unsetAt(index) ) ) console.log( generateCards() .map(drawCardAt(0)) .evalWith(state).fst() ) // [{ id: 'orange-square', color: 'orange', shape: 'square' }]
---
const {prop,assoc, pick, bimap, State, identity, omit, curry, filter, fanout, converge,map, composeK, liftA2, equals, constant,option, chain, mapProps, find, propEq, isNumber, compose, safe} = require('crocks'); const {get, modify, of} = State; // #region generateCards 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) => ({ id: `${color}-${shape}`, color, shape })); const buildCards = liftA2(buildCard) const generateCards = converge( liftA2(buildCards), getColors, getShapes ) // #endregion // Splite Cards into two pars //[Selected Cards] - [UnSelected Cards] const getAt = index => array => array[index]; const unsetAt = index => array => ([...array.slice(0, index), ...array.slice(index + 1)]); // Deck :: Pair [Card] [Card] // drawCardAt :: Integer -> [Card] -> Deck const drawCardAt = index => compose( bimap(Array.of, identity), fanout( getAt(index), unsetAt(index) ) ) console.log( generateCards() .map(drawCardAt(0)) .map(chain(drawCardAt(2))) .map(chain(drawCardAt(3))) .map(chain(drawCardAt(4))) .evalWith(state).fst() ) /** [ { id: 'orange-square', color: 'orange', shape: 'square' }, { id: 'green-square', color: 'green', shape: 'square' }, { id: 'green-circle', color: 'green', shape: 'circle' }, { id: 'blue-triangle', color: 'blue', shape: 'triangle' } ] */ console.log( generateCards() .map(drawCardAt(0)) .map(chain(drawCardAt(2))) .map(chain(drawCardAt(3))) .map(chain(drawCardAt(4))) .evalWith(state).snd() ) /** [ { id: 'orange-triangle', color: 'orange', shape: 'triangle' }, { id: 'orange-circle', color: 'orange', shape: 'circle' }, { id: 'green-triangle', color: 'green', shape: 'triangle' }, { id: 'blue-square', color: 'blue', shape: 'square' }, { id: 'blue-circle', color: 'blue', shape: 'circle' }, { id: 'yellow-square', color: 'yellow', shape: 'square' }, { id: 'yellow-triangle', color: 'yellow', shape: 'triangle' }, { id: 'yellow-circle', color: 'yellow', shape: 'circle' } ] */
相关文章
- JavaScript与有限状态机
- 解决Eclipse报errors running builder ‘javascript validator’ on project
- javascript选项卡2
- [Javascript] Filter out Duplicates from Flat JavaScript Array with array.filter / reduce / Set
- [Javascript] 4 ways to remove duplicates elements from an array with Javascript
- [Javascript] Conditionally spread entries to a JavaScript object
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain
- [Javascript] Introduce to Webpack
- [Javascript] Filter out Duplicates from Flat JavaScript Array with array.filter / reduce / Set
- [Javascript] Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()
- [Javascript] Avoiding Mutations in JavaScript with Immutable Data Structures
- [Functional Programming] Draw Items from One JavaScript Array to Another using a Pair ADT
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Rust] Pass a JavaScript Function to WebAssembly and Invoke it from Rust
- [Javascript] Delegate JavaScript (ES6) generator iteration control
- [Javascript] Different ways to create an new array/object based on existing array/object
- [Javascript] Decorators in JavaScript
- [Javascript] Intro to Recursion
- Atitit.javascript 实现类的方式原理大总结