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 相关文章推荐
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
vue路由插件之vue-route
Jun 13 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
详细分析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
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
JavaScript 空间坐标的使用
2020/08/19 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
python实现Virginia无密钥解密
2019/03/20 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Python中如何添加自定义模块
2020/06/09 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
毕业生多媒体设计求职信
2013/10/12 职场文书
销售实习自我鉴定
2013/12/07 职场文书
电大会计学自我鉴定
2014/02/06 职场文书
创意广告词
2014/03/17 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js