【js】 lodash命名转换和封装

▒ 目录 ▒

    • 导读
      • 需求
      • 开发环境
    • 1️⃣ lodash转换函数
      • h3
      • 与underscore比较
    • 2️⃣ 实战:对象属性名转换
      • 函数封装
      • 单元测试
    • 文章小结
    • 参考资料

导读

需求

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

开发环境

版本号 描述
文章日期 2023-11-16
操作系统 Win10 - 22H2 19045.3570
lodash 4.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
}

与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,
}

单元测试

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进行了介绍,并对其中的转换函数进行了简单的测试。
然后封装了几个函数用于工作中,节省人工,希望能对大家有所帮助。

参考资料

  • lodash官网: https://www.lodashjs.com/

你可能感兴趣的:(#,js爬虫,#,Javascript随笔,javascript,前端,开发语言,lodash,字符串转换)