• 【js】 lodash命名转换和封装


    🛫 导读

    需求

    爬虫中经常出现各种类型的命名,往往一个对象,几十个字段的命名风格都不是自己想要的,这时候就需要将整个对象自动转为自己想要的风格,而不是手动一个个转换。
    {aBc: 1, en: 'khz', cnNew: '华仔'}
    转为
    { a_bc: 1, en: 'khz', cn_new: '华仔' }

    开发环境

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

    1️⃣ 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
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    与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 具有更好的性能,因为它使用了一些优化技术。
    3. 社区和支持 由于历史原因, Underscore.js 的社区更为庞大,使用人数众多。而 Lodash.js 在最近几年得到了更多开发者的支持,因此它在社区和支持方面看起来更为活跃。

    2️⃣ 实战:对象属性名转换

    函数封装

    本节对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,
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70

    单元测试

    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()
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    🛬 文章小结

    本章对lodash进行了介绍,并对其中的转换函数进行了简单的测试。
    然后封装了几个函数用于工作中,节省人工,希望能对大家有所帮助。

    📖 参考资料

  • 相关阅读:
    2-1线性表-顺序表
    Docker网络与资源管理
    Django+vue前后端分离实战--vue后台管理系统--vue环境安装项目创建
    阿里云国际版两个ECS云服务器之间的迁移教程
    汽车EDI:德国大众 EDI 项目案例
    Docker 安装 (完整详细版)
    http协议连接方式 —— 短连接和长连接(请求头Connection属性)
    [附源码]计算机毕业设计springboot养生药膳推荐系统
    ExoPlayer架构详解与源码分析(8)——Loader
    Unity 3D 基础——Coroutine 协同程序
  • 原文地址:https://blog.csdn.net/kinghzking/article/details/134450868