點燈坊

學而時習之,不亦悅乎

使用 addIndex() 替 Callback 加上 Index

Sam Xiao's Avatar 2019-07-07

若想在 Array.prototype.map() 的 Callback 得知目前 Element 的 Index,其 Callback 的第二個參數就是 Index,但 Ramda 的 map() 並沒有提供此功能,該如何解決呢 ?

Version

macOS Mojave 10.14.5
VS Code 1.33.1
Quokka 1.0.209
Ramda 0.26.1

Array.prototype.map()

let data = [
  { title: 'FP in JavaScript', price: 100 },
  { title: 'RxJS in Action', price: 200 },
  { title: 'Speaking JavaScript', price: 300 }
];

// mapIndex :: [a] -> [b]
let mapIndex = arr => arr.map((x, i) => `${i}.${x.title}`);

console.dir(mapIndex(data));

第 7 行

// mapIndex :: [a] -> [b]
let mapIndex = arr => arr.map((x, i) => `${i}.${x.title}`);

第二個參數 i 就是 index,可直接使用。

index000

Ramda

import { map, addIndex } from 'ramda';

let data = [
  { title: 'FP in JavaScript', price: 100 },
  { title: 'RxJS in Action', price: 200 },
  { title: 'Speaking JavaScript', price: 300 }
];

// mapIndex :: (a -> b) -> [a] -> [b]
let mapIndex = addIndex(map);

console.dir(mapIndex((x, i) => `${i}.${x.title}`)(data));

第 9 行

// mapIndex :: (a -> b) -> [a] -> [b]
let mapIndex = addIndex(map);

map() 必須經過 addIndex() 包裝後,其 callback 才有 index 可用。

addIndex()
((a … → b) … → [a] → *) → ((a …, Int, [a] → b) … → [a] → *)
將 callback 加上 index

index001

Point-free

import { map, addIndex, useWith, concat, identity, compose, flip, prop } from 'ramda';

let data = [
  { title: 'FP in JavaScript', price: 100 },
  { title: 'RxJS in Action', price: 200 },
  { title: 'Speaking JavaScript', price: 300 }
];

// mapIndex :: (a -> b) -> [a] -> [b]
let mapIndex = addIndex(map);

// getTitle :: Object -> String
let getTitle = compose(concat('.'), prop('title'));

// getIndex :: Object -> String
let getIndex = compose(String, identity);

let cb = useWith(
  flip(concat), [getTitle, getIndex]
);

console.dir(mapIndex(cb)(data));

也可以將 callback 進一步 point-free。

這個 point-free 在 production code 就不建議使用,因為太複雜了,可讀性不高,僅適合拿來練習 point-free

index002

Conclusion

  • 其他沒有 index 的 callback,也可使用 addIndex() 加上 index
  • 有些 point-free 會使 callback 更為複雜,已失去其本意,在 production code 不建議使用,只適合拿來練功

Reference

Ramda, map()
Ramda, addIndex()