程序员经验分享-hwhale

在不使用 Lodash 的情况下递归地将对象键从蛇形命名法重命名为驼峰式命名法

2024-01-29

如何使用纯 JavaScript 将对象键从蛇形命名法递归转换为骆驼命名法，而不依赖于 Lodash 等外部库。以下是仅适用于对象第一级的尝试。最好的方法是什么？

const obj = {
  key_first: 'firstVal',
  key_second: 'secondVal',
  key_third: null,
  nested_obj: {
    nested_one: 'nested 1 value',
    nested_two: 'nested 2 value'
  },
  nested_arr: [{
    nested_obj_one: 'nested obj val 1'
  }, {
    nested_obj_two: 'nested obj val 2'
  }, {
    level_3_nested: [{
      level_3_key: 'level 3 value',
      level_3_another_key: 'another level 3 value'
    }]
  }]
};

const renameKeys = obj => Object
  .entries(obj)
  .reduce((acc, [key, val]) => {
    const modifiedKey = key.replace(/_([a-z])/g, g =>  g[1].toUpperCase());
    return ({
      ...acc,
      ...{ [modifiedKey]: val },
    });
  }, {});

console.log(renameKeys(obj));

Update:添加了值为 null 的键。


I'd .map the Object.entries，替换条目中的键，同时递归调用renamekeys值，并将整个数组条目传递给Object.fromEntries将其变回物体。

因为您也有嵌套数组，而不仅仅是嵌套对象。你必须测试它们并且.map每个项目通过renameKeys如果找到的话。

您可能还想调整正则表达式，以便all下划线被替换，而不仅仅是那些后面跟着字母字符的：

const obj = {
  key_first: 'firstVal',
  key_second: 'secondVal',
  nested_obj: {
    nested_one: 'nested 1 value',
    nested_two: 'nested 2 value'
  },
  nested_arr: [{
    nested_obj_one: 'nested obj val 1'
  }, {
    nested_obj_two: 'nested obj val 2'
  }, {
    level_3_nested: [{
      level_3_key: 'level 3 value',
      level_3_another_key: 'another level 3 value'
    }]
  }]
};

const processVal = val => (
  typeof val !== 'object'
  ? val
  : Array.isArray(val)
    ? val.map(renameKeys)
    : renameKeys(val)
);
const renameKeys = obj => Object.fromEntries(
  Object.entries(obj)
    .map(([key, val]) => [
      key.replace(/_(.)/g, g =>  g[1].toUpperCase()),
      processVal(val)
    ])
);
console.log(renameKeys(obj));

以准许null值以及：

const obj = {
  key_first: 'firstVal',
  key_second: 'secondVal',
  nested_obj: {
    nested_one: 'nested 1 value',
    nested_two: 'nested 2 value'
  },
  nested_arr: [{
    nested_obj_one: 'nested obj val 1'
  }, {
    nested_obj_two: 'nested obj val 2'
  }, {
    level_3_nested: [{
      level_3_key: 'level 3 value',
      level_3_another_key: 'another level 3 value'
    }]
  }]
};

const processVal = val => (
  (typeof val !== 'object' || val === null)
  ? val
  : Array.isArray(val)
    ? val.map(renameKeys)
    : renameKeys(val)
);
const renameKeys = obj => Object.fromEntries(
  Object.entries(obj)
    .map(([key, val]) => [
      key.replace(/_(.)/g, g =>  g[1].toUpperCase()),
      processVal(val)
    ])
);
console.log(renameKeys(obj));

如果数组可以位于第一级，则使用val.map(processVal) in processVal，并首先调用processVal代替renameKeys:

const obj = {
  simple_arr: ['a1', 'b1', 'c1'],
  key_first: 'firstVal',
  key_second: 'secondVal',
  nested_obj: {
    nested_one: 'nested 1 value',
    nested_two: 'nested 2 value'
  },
  nested_arr: [{
    nested_obj_one: 'nested obj val 1'
  }, {
    nested_obj_two: 'nested obj val 2'
  }, {
    level_3_nested: [{
      level_3_key: 'level 3 value',
      level_3_another_key: 'another level 3 value'
    }]
  }]
};

const processVal = val => (
  (typeof val !== 'object' || val === null)
  ? val
  : Array.isArray(val)
    ? val.map(processVal)
    : renameKeys(val)
);
const renameKeys = obj => Object.fromEntries(
  Object.entries(obj)
    .map(([key, val]) => [
      key.replace(/_(.)/g, g =>  g[1].toUpperCase()),
      processVal(val)
    ])
);
console.log(processVal(obj));
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

在不使用 Lodash 的情况下递归地将对象键从蛇形命名法重命名为驼峰式命名法 的相关文章

  • 如何使用 jQuery 检查文件输入大小？

    我有一个具有文件上传功能的表单 如果用户尝试上传的文件太大 我希望能够有一些不错的客户端错误报告 是否有一种方法可以使用 jQuery 检查文件大小 或者纯粹是在客户端上或以某种方式将文件发送回服务器进行检查 您实际上无权访问文件系统 例如

  • 将浮点值转换为灰度十六进制颜色值

    这个问题又快又简单 我有一个二维浮点数组 0 0000000 到 1 0000000 我想将这些数字转换为颜色值 000000 到 ffffff 请注意 我所说的只是灰度值 0 黑色 0 5 中灰色 1 白色 有谁知道如何用 javascr

  • 获取预转译源代码的 Karma 代码覆盖率

    我使用 Karma 来运行测试 使用 webpack 来捆绑文件 并使用 babel 进行 es6 gt es5 转译 我已经运行了测试并生成了代码覆盖率 但代码覆盖率数字是针对转译后的源文件的 是否有办法获得原始源文件的代码覆盖率 我尝试

  • jQuery：如何将 jQuery 日期选择器放入 Bootstrap Popover 中？ [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我试图在引导弹出窗口中显示 jquery datepicker 并尝试了解决方案引导程序弹出窗口内的日期选择器 关闭 https

  • 谁添加“_”单下划线查询参数？

    我有一个在 Apache 上运行的 PHP 服务器 我收到很多类似这样的请求 10 1 1 211 02 Sep 2010 16 14 31 0400 GET request 1283458471913 action get list HT

  • 在 PHP 中合并文件块

    出于教育目的 我想创建文件块上传 你们怎么知道所有块何时上传 我试图从temp并重命名它们 使它们按正确的顺序排列 然后与最后一个块将它们合并在一起 然而 我猜最后发送的并不是最后收到的 所以fopen on chunks 失败 因为它们尚

  • 在 HTML5 中堆叠多个画布

    我试图使用相互堆叠的四块画布 但除了顶部画布的内容外 它们的内容不会显示 我按照我希望它们显示的顺序将 z index 值放入其中 但只有最上面的一个显示内容 它们的位置是绝对的 z 索引是 1 2 3 和 4 是否还有其他原因导致它们不显

  • jQuery 显示隐藏左侧滑动面板

    我希望在单击按钮时面板从浏览器的左边缘滑动 并在单击同一按钮 切换 时隐藏面板 Html div class panel div a href class slider arrow show raquo a CSS panel width

  • Elasticsearch 前缀匹配消失且未添加 (QueryString)

    结转自Elasticsearch QueryStrings 部分匹配 NOT 查询 https stackoverflow com questions 40100006 elasticsearch querystrings partiall

  • 如何让 jQuery 选择带有 . （句号）在他们的身份证件中？

    给定以下类和控制器操作方法 public School public Int32 ID get set publig String Name get set public Address Address get set public cla

  • 指令可以从父作用域中删除自身吗

    假设我有以下代码 div div div div 我的自定义指令有一个独立的范围 定义为 app directive customDirective function log return restrict E templateUrl te

  • 在网站的一次导航中仅显示一次弹出窗口

    我有一个使用 Laravel 创建的网站 我希望用户第一次访问我的网站时能够看到弹出窗口 我的意思是第一次 用户访问我网站上的任何页面 这是第一次 访问网站上的一些链接页面 现在 这些页面访问不是第一次 在同一选项卡中打开 facebook

  • 如何在 blob 类型中使用 UTF-8？

    我必须通过 csv 文件导出表 csv 文件数据来自服务器 按 Blob 类型 Blob size 2067 type text csv async exportDocumentsByCsv this commonStore setLoad

  • 如何检查浏览器中消失的元素？

    How can I inspect an element which disappears when my mouse moves away 我不知道它的 ID 类别或其他任何信息 但想检查它 我尝试过的解决方案 在控制台内运行 jQuer

  • 点击事件的事件处理程序自动触发 - jQuery [重复]

    这个问题在这里已经有答案了 可能的重复 为什么单击事件处理程序会在页面加载后立即触发 https stackoverflow com questions 7102413 why does click event handler fire i

  • 在 jQuery 中获取最接近元素的形式

    我编写了这个 js jquery 脚本来检查表单中的所有复选框 它工作得很好 但是这会检查页面上的所有复选框 无论它们是什么表单包装器 这是函数 function toggleCheck state var checkboxes jQuer

  • HighCharts - 两个 Y 轴，一个具有最大值

    我在使用 Highcharts 时遇到问题 我已将右 Y 轴设置为 min 0 和 max 100 它是 但它不起作用并生成 125 百分比 怎么了 http jsfiddle net SdTcU http jsfiddle net SdT

  • 是否可以对 Flexbox 插入、删除和项目位置进行动画处理？

    这个问题最初是在 2012 年提出的 https stackoverflow com questions 11106876 is it possible to animate flexbox inserts removes但是提供的答案并未

  • 何时使用node.js、sinatra、rails？ [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 这 3 种语言 框架的最佳用途是什么 混合所有 或 2 个 有用吗 如果您正在构建一个完整的 Web 应用程序 您可能应该使用 Rails 因为

  • 如何从 fetch API 返回 json 响应

    我有一个像这样的函数 check auth fetch Urls check auth credentials include method GET then response gt if response ok return respon

随机推荐

热门标签