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 事件执行检测代码
Dec 09 Javascript
jquery 插件学习(三)
Aug 06 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 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
PHP环境搭建的详细步骤
2016/06/30 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
离婚协议书标准格式
2014/10/04 职场文书
医院病假条范文
2015/08/17 职场文书
教师学习心得体会范文
2016/01/21 职场文书
党员干部学习心得体会
2016/01/23 职场文书