將 Array 中特定 Property 的 Value 取出,成為新的 Array

實務上我們有時會想將 Array 中 Object 的某個 Property 取出其 Value 成為新的 Array,但不希望有 Object 與 Key,此時可使用 Ramda 的 pluck() 大幅簡化程式碼。

Version


VS Code 1.31.1
Quokka 1.0.136
Ramda 0.26.1

map()


1
2
3
4
5
6
7
8
9
10
import { map } from 'ramda';

const data = [
{ id: 1, title: 'FP in JavaScript' },
{ id: 2, title: 'RxJS in Action' },
{ id: 3, title: 'Speaking JavaScript' }
];

const getBooks = map(x => x.title);
console.dir(getBooks(data));

希望只取出 title 的 value 成為新的 array,不想要 object 與 key,可直接使用 map(),projection function 則使用 arrow function 表示。

map()
(a -> b) -> [a] -> [b]
將 a 格式 array 轉換成 b 格式 array,且筆數不變

pluck000

prop()


1
2
3
4
5
6
7
8
9
10
import { map, prop } from 'ramda';

const data = [
{ id: 1, title: 'FP in JavaScript' },
{ id: 2, title: 'RxJS in Action' },
{ id: 3, title: 'Speaking JavaScript' }
];

const getBooks = map(prop('title'));
console.dir(getBooks(data));

若想讓 map() 的 projection function 也 Proint-free,可使用 Ramda 的 prop() 產生。

prop()
s -> {s: a} -> a | undefined
傳入 key 與 object,傳回 value

pluck002

pluck()


1
2
3
4
5
6
7
8
9
10
import { pluck } from 'ramda';

const data = [
{ id: 1, title: 'FP in JavaScript' },
{ id: 2, title: 'RxJS in Action' },
{ id: 3, title: 'Speaking JavaScript' }
];

const getBooks = pluck('title');
console.dir(getBooks(data));

map()prop() 可簡化成 pluck()

pluck()
Functor f => k → f {k: v} → f v
將 array 中特定 property 的 value 取出,成為新的 array

k:object 的 key

f {k: v}: Functor 內為 object

f v: Functor 內為 value

pluck001

Conclusion


  • 若對 pluck() 定義中的 functor 不清楚,可先想成 array 即可
  • pluck() 相當於 map(prop(k), f),其中 f 為 functor

Reference


Ramda, map()
Ramda, prop()
Ramda, pluck()