如何使用 Ramda 更改 Object 的 Property ?

實務上由 API 取得的 Array，其 Object 的 Property 不是我們所要的，因此要加以改變，我們會想保留原本 Object 的所有 Property，並且新增 Property 以配合需求，這該如何使用 Ramda 實現呢 ?

Version

WebStorm 2018.3.3

Quokka 1.0.134

Ramda 0.26.1

Imperative

const data = [
  { name: 'Sam' },
  { name: 'Kevin' },
  { name: 'Mike' },
];

let result = [];
for(let item of data) {
  let obj = Object.assign({}, item);
  obj['firstName'] = item.name;
  result.push(obj);
}

console.log(result);

原本的 array 中的 object，其 property 為 name ，想將其改為 firstName ，並保留原本 name 。

Imperative 會先建立 result array，然後搭配 for loop，使用 Object.assign() 保留原本 object 所有的 property，並直接建立 firstName property，其值為原本的 name ，最後再將新的 object push() 進 result array。

Array.Prototype

const data = [
  { name: 'Sam' },
  { name: 'Kevin' },
  { name: 'Mike' },
];

const result = data.map(x => ({ ...x, firstName: x.name }));
console.log(result);

Array.prototype 內建的 map() 也能達成需求，先透過 ECMAScript 2015 的 ... Spread Operator 保留原本 object 所有 property，再加上新的 firstName ，其值為原本的 x.name 。

ECMAScript 2015 的寫法相當清爽，可讀性也很高。

Ramda

import { map } from 'ramda';

const data = [
  { name: 'Sam' },
  { name: 'Kevin' },
  { name: 'Mike' },
];

const result = map(x => ({...x, firstName: x.name }), data);
console.log(result);

Ramda 亦提供 map() operator，其 callback 部分與 ECMAScript 的 map() 完全一樣，而 Ramda 的 data 在 map() 最後一個參數，因此特別適合使用 Point-free。

import { assoc, chain, map, prop } from 'ramda';

const data = [
  { name: 'Sam' },
  { name: 'Kevin' },
  { name: 'Mike' },
];

const result = map(chain(assoc('firstName'), prop('name')), data);
console.log(result);

map() 的 callback 部分，可在加以簡化。

Ramda 提供了 assoc() operator，除了複製原本 object 的 property 外，還可新增 property。

string : 新 propert 的 key

a ：新 property 的 value

{k: v} ：data 為原 object

{k: v} ：回傳的新 object

由於新 property 的 value 要由 prop('name') 提供，由於符合 chain(f, g)(x) === f(g(x), x) 格式，因此可用 chain() 結合 assoc() 與 prop() ，如此 callback 部分也可以 Point-free。

Conclusion

• Array.prototype.map() 的寫法已經相當清爽，可讀性也很高
• Ramda 的 map() 寫法與 Array.prototyp.map() 的寫法也很類似
• Ramda 的 map() ，若連 callback 部分也要 Point-free，可以使用 chain() 搭配 assoc() 與 prop()

Reference

Ramda , chain()

Ramda , assoc()