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 void(0)的妙用
Oct 21 Javascript
Javascript变量函数浅析
Sep 02 Javascript
瀑布流布局代码一例
Apr 11 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 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 全文搜索和替换的实现代码
2008/07/29 PHP
php 定界符格式引起的错误
2011/05/24 PHP
用php解析html的实现代码
2011/08/08 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python单元测试unittest实例详解
2015/05/11 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
产品促销活动策划书
2014/01/15 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
董事长致辞
2015/07/29 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书