JavaScript使用lodash实现命名转换和函数封装

 更新时间:2023年11月20日 14:24:11   作者:夜猫逐梦  
Lodash 是一个 JavaScript 的工具库,它提供了一系列的函数来简化代码编写,本文主要为大家介绍了如何使用lodash实现命名转换和函数封装,感兴趣的小伙伴可以了解下

导读

需求

爬虫中经常出现各种类型的命名,往往一个对象,几十个字段的命名风格都不是自己想要的,这时候就需要将整个对象自动转为自己想要的风格,而不是手动一个个转换。

{aBc: 1, en: 'khz', cnNew: '华仔'}

转为

{ a_bc: 1, en: 'khz', cn_new: '华仔' }

开发环境

版本号描述
文章日期2023-11-16
操作系统Win10 - 22H219045.3570
lodash4.17.21

lodash转换函数

Lodash 是一个 JavaScript 的工具库,它提供了一系列的函数来简化代码编写。Lodash 提供了很多功能,包括数组操作、对象操作、字符串操作等。

使用 Lodash 可以大大简化代码,提高代码的可读性和可维护性。它的函数提供了简单且一致的接口,可以帮助开发人员快速编写干净、可扩展的代码。

h3

lodash支持6个转行函数:

  • camelCase 转换字符串string为驼峰写法。
  • kebabCase 转换字符串string为烤串写法。
  • snakeCase 转换字符串string为下划线写法。
  • lowerCase 转换字符串string为小写 空格写法。
  • upperCase 转换字符串string为大写 空格写法。
  • startCase 转换字符串string为所有单词首字母大写,标题中常见写法。

本章节只关心前三种,示例如下: 

import _ from 'lodash'

function test() {
  // lodash库函数测试
  console.log(_.camelCase('a_bc')) // aBc
  console.log(_.snakeCase('aBc')) // a_bc
  console.log(_.kebabCase('aBc')) // a-bc
}

与underscore比较

underscore 库提供了一些实用的函数,用于简化 JavaScript 编程和提高开发效率。

underscore 内置了多种实用的函数,例如字符串操作、数组操作、对象操作、日期操作等等。这些函数都非常实用,可以在开发中大大简化代码,提高开发效率。

Underscore.js 和 Lodash.js 是 JavaScript 中开发人员使用最广泛的两个扩展库,它们主要用于简化和增强 JavaScript 代码。它们的名字很相似,功能也相似,但它们也存在一些差异:

1.发行时间 Underscore.js 发行于 2010 年,是最早的 JavaScript 扩展库,而 Lodash.js 发行于 2012 年。

2.函数数量和功能 Underscore.js 和 Lodash.js 都提供了大量的函数,以帮助开发人员处理常见的 JavaScript 操作。但 Lodash.js 比 Underscore.js 提供了更多的函数。总的来说,Lodash.js 在功能上比 Underscore.js 更为强大。

3.性能 在某些情况下,Lodash.js 比 Underscore.js 具有更好的性能,因为它使用了一些优化技术。

4.社区和支持 由于历史原因, Underscore.js 的社区更为庞大,使用人数众多。而 Lodash.js 在最近几年得到了更多开发者的支持,因此它在社区和支持方面看起来更为活跃。

实战:对象属性名转换

函数封装

本节对snakeCase、camelCase、kebabCase进行封装,三个函数结构类似,主要逻辑都是遍历对象key,将key转换后返回新的对象。

代码如下:

/*
1. 转换测试
2. 编写函数
3. 单元测试
*/

import _ from 'lodash'

function snakeCaseObject(originObj) {
  if (!_.isObject(originObj)) {
    return originObj
  }

  const ret = {};

  for (let key in originObj) {
    let val = originObj[key]
    // console.log(key, val)

    // 将key转换为下划线方式
    let keyNew = _.snakeCase(key)
    ret[keyNew] = val
  }

  return ret
}

function camelCaseObject(originObj) {
  if (!_.isObject(originObj)) {
    return originObj
  }

  const ret = {};

  for (let key in originObj) {
    let val = originObj[key]
    // console.log(key, val)

    // 将key转换为驼峰方式
    let keyNew = _.camelCase(key)
    ret[keyNew] = val
  }

  return ret
}

function kebabCaseObject(originObj) {
  if (!_.isObject(originObj)) {
    return originObj
  }

  const ret = {};

  for (let key in originObj) {
    let val = originObj[key]
    // console.log(key, val)

    // 将key转换
    let keyNew = _.kebabCase(key)
    ret[keyNew] = val
  }

  return ret
}

export {
  camelCaseObject,
  snakeCaseObject,
  kebabCaseObject,
}

单元测试

import _ from 'lodash'
import {camelCaseObject, snakeCaseObject, kebabCaseObject} from '../../js/object.js'

function test() {
  // 单元测试
  let obj = {aBc: 1, en: 'khz', cnNew: '华仔'}
  let objSnake = snakeCaseObject(obj)
  console.log(objSnake)  // { a_bc: 1, en: 'khz', cn_new: '华仔' }
  let objCamel = camelCaseObject(objSnake)
  console.log(objCamel)  // { aBc: 1, en: 'khz', cnNew: '华仔' }
  let objKebab = kebabCaseObject(objSnake)
  console.log(objKebab)  // { 'a-bc': 1, en: 'khz', 'cn-new': '华仔' }
}

test()

文章小结

本章对lodash进行了介绍,并对其中的转换函数进行了简单的测试。

然后封装了几个函数用于工作中,节省人工,希望能对大家有所帮助。

以上就是JavaScript使用lodash实现命名转换和函数封装的详细内容,更多关于JavaScript lodash命名转换和封装的资料请关注脚本之家其它相关文章!

相关文章

  • js倒计时简单实现方法

    js倒计时简单实现方法

    这篇文章主要介绍了js倒计时简单实现方法,方便一些提示重要日期的来临,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 浅聊一下为什么能用RxJS取代Redux

    浅聊一下为什么能用RxJS取代Redux

    本文我们将和大家浅聊一下为什么能用RxJS取代Redux,RxJS 在现在的前端用比较少,但是 RxJS 作为响应式和函数式编程的集大成者,似乎被前端开发者遗忘,可能是学习难度大,可能是有更加方便的解决方案,需要的朋友可以参考下
    2024-02-02
  • js实现随机数字字母验证码

    js实现随机数字字母验证码

    这篇文章主要为大家详细介绍了js随机验证码的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 微信小程序 下拉列表的实现实例代码

    微信小程序 下拉列表的实现实例代码

    这篇文章主要介绍了微信小程序 下拉列表的实现实例代码的相关资料,需要的朋友可以参考下
    2017-03-03
  • js星星评分效果

    js星星评分效果

    在这里和广大脚本之家站的朋友们分享一个使用js实现商城星星评分的效果,希望能给大家点帮助
    2014-07-07
  • websocket直接绕过JS加密示例及思路原理

    websocket直接绕过JS加密示例及思路原理

    这篇文章主要为大家介绍了websocket直接绕过JS加密的示例及思路原理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • 基于微信小程序实现人脸数量检测的开发步骤

    基于微信小程序实现人脸数量检测的开发步骤

    最近项目需求是统计当前摄像头中的人脸个数,所以下面这篇文章主要给大家介绍了关于基于微信小程序实现人脸数量检测的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 小程序中监听页面滚动的几种方法实例

    小程序中监听页面滚动的几种方法实例

    这段时间接了一个微信小程序项目,从此打开小程序的新世界大门,下面这篇文章主要给大家介绍了关于小程序中监听页面滚动的几种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • js简单遍历获取对象中的属性值的方法示例

    js简单遍历获取对象中的属性值的方法示例

    这篇文章主要介绍了js简单遍历获取对象中的属性值的方法,涉及javascript使用for循环遍历json对象属性值的简单操作技巧,需要的朋友可以参考下
    2019-06-06
  • Javascript条件判断使用小技巧总结

    Javascript条件判断使用小技巧总结

    我们已经知道,null 没有任何的属性值,并且无法获取其实体(existence)值。所以 null.property 返回的是错误(error)而不是 undefined 。
    2008-09-09

最新评论