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 - 22H2	19045.3570
lodash	4.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命名转换和封装的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Textarea输入字数限制实例(兼容iOS&安卓)
下面小编就为大家带来一篇Textarea输入字数限制实例(兼容iOS&安卓)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
javascript中数组的sort()方法的使用介绍
数组的sort()方法用于排序，在本文将为大家介绍下javascript中sort()方法的具体使用
2013-12-12
在JavaScript 中按字母排序之如何在 JS 中按名称排序
有时你可能有一个单词数组,你想按字母顺序（从 a-z）对每个单词进行排序,或者你可能有一个包含用户信息（包括名字）的对象数组,例如,你想按照用户的名字来排序,接下来通过本文给大家介绍在JavaScript 中按字母排序之如何在 JS 中按名称排序,需要的朋友可以参考下
2023-09-09
Javascript获取随机数的实现方法
下面小编就为大家带来一篇Javascript获取随机数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
TypeScript 泛型的使用
这篇文章主要介绍了TypeScript 泛型的使用，在JavaScript中，封装一个API可以具有多种用途，因为其实弱类型语言，但是就因为是弱类型可以最终得到的结果并不是我们想要的，下面我们就来看看具体TypeScript 泛型的使用吧
2021-12-12
JavaScript中的高级特性分享
JavaScript是一种功能强大的编程语言，具有许多高级特性，本文将介绍JavaScript中的一些高级特性，包括闭包、原型继承、高阶函数、异步编程和模块化，希望对大家有所帮助
2023-06-06
javascript重写alert方法的实例代码
最近因为在flash项目中遇到as调用js函数马上弹出alert，在火狐浏览器下会卡死浏览器。介于这样我们重写alert，让alert弹出一个自定义的div弹层，来实现提示效果！
2013-03-03
JavaScript canvas绘制圆弧与圆形
这篇文章主要为大家详细介绍了JavaScript canvas绘制圆弧与圆形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
js使用xml数据载体实现城市省份二级联动效果
这篇文章主要为大家详细介绍了js使用xml数据载体实现城市省份二级联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
jstree中的checkbox默认选中和隐藏示例代码
这篇文章主要介绍了jstree的checkbox默认选中和隐藏,需要的朋友可以参考下
2019-12-12