將 Object 部分 Property 取出為 Array

Ramda 的 prop() 只能取出 object 單一 Property,若要取出多個 Property 成 Array,就要使用 props()

Version


VS Code 1.33.0
Quokka 1.0.205
Ramda 0.26.1

values()


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

let data = {
firstName: 'Sam',
lastName: 'Xiao',
age: 20
};

console.dir(values(data));

Ramda 的 values() 雖然能取得 property 值成 array,但會取得所有 property,若我們只想要 firstNamelastName 兩個 property 就好呢 ?

props000

pick()


1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { values, pipe, pick } from 'ramda';

let data = {
firstName: 'Sam',
lastName: 'Xiao',
age: 20
};

let props = names => pipe(
pick(names),
values
);

console.dir(props(['firstName', 'lastName'])(data));

自己實作了 props(),將想要取得 property 以 array 傳入,先經過 pick() 取得部分 property 的 object,再以 values() 將全部 property 取出成 array。

props001

Point-free


1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { values, pick, pipe, curry } from 'ramda';

let data = {
firstName: 'Sam',
lastName: 'Xiao',
age: 20
};

let props = curry(pipe(
pick,
values
));

console.dir(props(['firstName', 'lastName'])(data));

目前 props() 還不是 Point-free,也可以重構成 Point-free 版本。

props002

props


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

let data = {
firstName: 'Sam',
lastName: 'Xiao',
age: 20
};

console.dir(props(['firstName', 'lastName'])(data));

Point-free 並不是重點,事實上 Ramda 已經內建 props(),可直接使用。

props()
[k] → {k: v} → [v]
將 object 部分 property 取出為 array

[k]:將要取出的 property 以 array 傳入

{k: v}:data 為 object

[v]:回傳 value 的 array

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { props, join, pipe } from 'ramda';

let data = {
firstName: 'Sam',
lastName: 'Xiao',
age: 20
};

let fullName = pipe(
props(['firstName', 'lastName']),
join(' ')
);

console.dir(fullName(data));

Q:使用 props() 回傳部分 property 的 array 能做什麼呢 ?

Ramda 內建最多的 function 就是 array,當由 object 變成 array 後,就有眾多的 function 可以組合,比如說目前 firstNamelastName 還在 array 內,只要組合 join 之後,就能以 string 顯示 fullName 了。

props003

Conclusion


  • props() 的 source code 雖然使用 Imperative 實作,但我們也可以自己組合 pick()values() 實踐
  • 一旦將資料轉成最多 function 的 array 後,就更容易組合其他 function 做出想要的結果

Reference


Ramda, props()
Ramda, values()
Ramda, pipe()
Ramda, pick()
Ramda, curry()
Ramda, join()