javascript - 使用 ramdajs 重命名对象的属性

Question

我需要使用 ramdajs 将可能包含连字符的单词的对象的所有属性重写为驼峰命名法。

例如，每个键的属性名称 animation-timing-function 应变为 animationTimingFunction，依此类推。

您能否举个例子:

这是我应该转换的数据:

var data = {
  "bounce": [
    {
      "animation-timing-function": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
      "transform": "translate3d(0,0,0)",
      "offset": 0
    },
    {
      "animation-timing-function": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
      "transform": "translate3d(0,0,0)",
      "offset": 0.2
    },
    {
      "animation-timing-function": "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
      "transform": "translate3d(0, -30px, 0)",
      "offset": 0.4
    },
    {
      "animation-timing-function": "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
      "transform": "translate3d(0, -30px, 0)",
      "offset": 0.43
    },
    {
      "animation-timing-function": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
      "transform": "translate3d(0,0,0)",
      "offset": 0.53
    },
    {
      "animation-timing-function": "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
      "transform": "translate3d(0, -15px, 0)",
      "offset": 0.7
    },
    {
      "animation-timing-function": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
      "transform": "translate3d(0,0,0)",
      "offset": 0.8
    },
    {
      "transform": "translate3d(0,-4px,0)",
      "offset": 0.9
    },
    {
      "animation-timing-function": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
      "transform": "translate3d(0,0,0)",
      "offset": 1
    }
  ]
};

我尝试修改此收据但没有成功:

const renameKeys = R.curry((keysMap, obj) => {
  return R.reduce((acc, key) => {
    acc[keysMap[key] || key] = obj[key];
    return acc;
  }, {}, R.keys(obj));
});

Answer 1

我不清楚你尝试了什么。有了这个函数和一点基础设施来将其应用到正确的对象，它似乎对我有用:

R.over(lensProp('bounce'), map(renameKeys({
  'animation-timing-function': 'animationTimingFunction'
})), data)

//=> {bounce: [
//   {
//     animationTimingFunction: "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
//     offset: 0,
//     transform: "translate3d(0,0,0)"
//   },
//   {
//     animationTimingFunction: "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
//     offset: 0.2,
//     transform: "translate3d(0,0,0)"
//   },
//   // ...
// ]}

但这似乎是名称中唯一带有连字符的键，所以也许我只是感到困惑。应该还有其他人吗？

您可以在 Ramda REPL 上看到此操作的实际效果。 。

更新

根据后续评论，它看起来像 Ramda's Cookbook right before 中的条目您使用的那个更合适:

const mapKeys = R.curry((fn, obj) =>
  R.fromPairs(R.map(R.adjust(fn, 0), R.toPairs(obj)))
);

虽然 Ramda 不包含 camelCase 函数，但您可以在网络上找到它们，或者很容易地创建自己的函数。一个版本:

const camelCase = (str) => str.replace(/[-_]([a-z])/g, 
  (m) => m[1].toUpperCase()
)

有了这些，就更容易了:

R.over(lensProp('bounce'), map(mapKeys(camelCase)), data)

//=> {bounce: [
//   {
//     animationTimingFunction: "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
//     anotherHyphenatedEntry: "foo",
//     offset: 0,
//     transform: "translate3d(0,0,0)"
//   },
//   {
//     animationTimingFunction: "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
//     offset: 0.2,
//     transform: "translate3d(0,0,0)"
//   },
//   // ...

同样，此版本也可以在 Ramda REPL 中找到。 。