js对象属性名驼峰式转下划线的实例代码


Posted in Javascript onSeptember 17, 2020

一、题目示例:

思路:

1、匹配属性名字符串中的大写字母和数字

2、通过匹配后的lastIndex属性获取匹配到的大写字母和数字的位置

3、判断大写字母的位置是否为首位置以及lastIndex是否为0,为0则表示匹配结束

4、将存放位置的数组进行从小到大排序,排序后将属性名按照字符串的slice方法切割并使用下划线重组

5、遍历对象的属性名并使用函数改变为新的命名,从新赋值到新的对象上(也可以使用改变对象的ES6新语法)

6、注意,每次在调用函数后,需要清空之前存放位置的数组

js对象属性名驼峰式转下划线的实例代码

二、实现代码

let obj = {Id1: 1, idName1: 2, idAgeName1: 3};
let arr = []
function strReplace(str) {
  const UP_CASE_REG =/[A-Z]/g;
  const NUMBER_REG=/[A-Za-z][\d]/g
  let newstr = ""
  getIndex(UP_CASE_REG, str)
  getIndex(NUMBER_REG, str)
  arr.sort((a,b)=> a-b )
  for(let i = 0;i < arr.length; i ++) {
    if(i === 0) {
      newstr += str.slice(0,arr[i]) + "_"
    }
    else {
      newstr += str.slice(arr[i-1],arr[i]) + "_"
    }
  }
  newstr += str.slice(arr[arr.length-1])
  return newstr.toLowerCase()
}
function getIndex(reg, str) {
  do{
    reg.test(str)
    if(reg.lastIndex !== 0 && reg.lastIndex-1 !== 0){//reg.lastIndex-1 !== 0判断首字母是否大写
      arr.push(reg.lastIndex-1)
    }
  }while(reg.lastIndex > 0)
}
 
function strAllReplace(obj) {
  let newObj = {}
  Object.entries(obj).forEach(([key, value]) =>
  {
   newObj[strReplace(key)] = value
   arr = []
  })
  return newObj
}
console.log(strAllReplace(obj))//{id_1: 1, id_name_1: 2, id_age_name_1: 3}

js对象属性名驼峰式转下划线的实例代码

补充知识:JavaScript 对象部署 Iterator 接口

如下所示:

const name = {
      first:"hello",
      last:"world",
      fullname: "hello world"
    }

方式一、Object.keys

for (var i of Object.keys(name)) {
        console.log(i,"-",name[i])
      }

js对象属性名驼峰式转下划线的实例代码

方法二、Object.keys + Generator

function *map(item) {
      for (var i of Object.keys(item)) {
        yield [i,item[i]]
      }
    }
    for(var [key, value] of map(name)) {
      console.log(key,"-",value)
    }

js对象属性名驼峰式转下划线的实例代码

注:generator函数中不能使用箭头函数

例:

*map = (item) => {
      for (var i of Object.keys(item)) {
        yield [i,item[i]]
      }
    }

js对象属性名驼峰式转下划线的实例代码

以上这篇js对象属性名驼峰式转下划线的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中的数学函数
Apr 04 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
javascript的BOM汇总
Jul 16 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
详解vue项目首页加载速度优化
Oct 18 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 #Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 #Javascript
原生js+css实现tab切换功能
Sep 17 #Javascript
vue使用screenfull插件实现全屏功能
Sep 17 #Javascript
Vue使用screenfull实现全屏效果
Sep 17 #Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 #Javascript
JavaScript编码小技巧分享
Sep 17 #Javascript
You might like
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP count()函数讲解
2019/02/03 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
实例解析Array和String方法
2016/12/14 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
python pandas生成时间列表
2019/06/29 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
什么是方法的重载
2013/06/24 面试题
行政经理岗位职责
2013/11/09 职场文书
合伙协议书范本
2014/04/21 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
销售人员求职信
2014/07/22 职场文书
房屋买卖定金协议书
2016/03/21 职场文书