使用 ramdajs 重命名对象的属性

问题描述

我需要使用 ramdajs 将可能包含连字符的对象的所有属性重写为驼峰式大小写.

I would need to rewrite all properties for an object which could contains hyphenated word to camelCase using ramdajs.

例如，每个键的属性名称animation-timing-function应该变成animationTimingFunction等等.

Example, property name animation-timing-function should become animationTimingFunctionand so on for every keys.

能否举个例子:

这是我应该转换的数据:

Here is data I should convert:

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
    }
  ]
};

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

I have tried modify this receipt but with no success:

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

推荐答案

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

It's not clear to me what you tried. With that function and a small bit of infrastructure to apply it to the right objects, it seems to work for me:

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)"
//   },
//   // ...
// ]}

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

But that seems to be the only key having hyphens in the name, so perhaps I'm simply confused. Are there supposed to be others?

您可以在 Ramda REPL.

You can see this in action on the Ramda REPL.

根据后续评论，它看起来像 Ramda's Cookbook 中的条目 就在之前你用的那个更合适:

Based on follow-up comments, it looks like the entry in Ramda's Cookbook right before the one you used is more appropriate:

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

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

Although Ramda does not include a camelCase function, you can find them all over the Web, or create your own quite easily. One version:

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

有了这些，事情就更简单了:

With these, it's even easier:

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.

Again, this version is also available in the Ramda REPL.

这篇关于使用 ramdajs 重命名对象的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！