導(dǎo)讀

需求

爬蟲中經(jīng)常出現(xiàn)各種類型的命名，往往一個對象，幾十個字段的命名風(fēng)格都不是自己想要的，這時候就需要將整個對象自動轉(zhuǎn)為自己想要的風(fēng)格，而不是手動一個個轉(zhuǎn)換。

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

轉(zhuǎn)為

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

開發(fā)環(huán)境

lodash轉(zhuǎn)換函數(shù)

Lodash 是一個 JavaScript 的工具庫，它提供了一系列的函數(shù)來簡化代碼編寫。Lodash 提供了很多功能，包括數(shù)組操作、對象操作、字符串操作等。

使用 Lodash 可以大大簡化代碼，提高代碼的可讀性和可維護(hù)性。它的函數(shù)提供了簡單且一致的接口，可以幫助開發(fā)人員快速編寫干凈、可擴(kuò)展的代碼。

h3

lodash支持6個轉(zhuǎn)行函數(shù)：

• camelCase 轉(zhuǎn)換字符串string為駝峰寫法。
• kebabCase 轉(zhuǎn)換字符串string為烤串寫法。
• snakeCase 轉(zhuǎn)換字符串string為下劃線寫法。
• lowerCase 轉(zhuǎn)換字符串string為小寫 空格寫法。
• upperCase 轉(zhuǎn)換字符串string為大寫 空格寫法。
• startCase 轉(zhuǎn)換字符串string為所有單詞首字母大寫，標(biāo)題中常見寫法。

本章節(jié)只關(guān)心前三種，示例如下： 

import _ from 'lodash'

function test() {
  // lodash庫函數(shù)測試
  console.log(_.camelCase('a_bc')) // aBc
  console.log(_.snakeCase('aBc')) // a_bc
  console.log(_.kebabCase('aBc')) // a-bc
}

與underscore比較

underscore 庫提供了一些實用的函數(shù)，用于簡化 JavaScript 編程和提高開發(fā)效率。

underscore 內(nèi)置了多種實用的函數(shù)，例如字符串操作、數(shù)組操作、對象操作、日期操作等等。這些函數(shù)都非常實用，可以在開發(fā)中大大簡化代碼，提高開發(fā)效率。

Underscore.js 和 Lodash.js 是 JavaScript 中開發(fā)人員使用最廣泛的兩個擴(kuò)展庫，它們主要用于簡化和增強(qiáng) JavaScript 代碼。它們的名字很相似，功能也相似，但它們也存在一些差異：

1.發(fā)行時間 Underscore.js 發(fā)行于 2010 年，是最早的 JavaScript 擴(kuò)展庫，而 Lodash.js 發(fā)行于 2012 年。

2.函數(shù)數(shù)量和功能 Underscore.js 和 Lodash.js 都提供了大量的函數(shù)，以幫助開發(fā)人員處理常見的 JavaScript 操作。但 Lodash.js 比 Underscore.js 提供了更多的函數(shù)?？偟膩碚f，Lodash.js 在功能上比 Underscore.js 更為強(qiáng)大。

3.性能 在某些情況下，Lodash.js 比 Underscore.js 具有更好的性能，因為它使用了一些優(yōu)化技術(shù)。

4.社區(qū)和支持 由于歷史原因， Underscore.js 的社區(qū)更為龐大，使用人數(shù)眾多。而 Lodash.js 在最近幾年得到了更多開發(fā)者的支持，因此它在社區(qū)和支持方面看起來更為活躍。

實戰(zhàn)：對象屬性名轉(zhuǎn)換

函數(shù)封裝

本節(jié)對snakeCase、camelCase、kebabCase進(jìn)行封裝，三個函數(shù)結(jié)構(gòu)類似，主要邏輯都是遍歷對象key，將key轉(zhuǎn)換后返回新的對象。

代碼如下：

/*
1. 轉(zhuǎn)換測試
2. 編寫函數(shù)
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轉(zhuǎn)換為下劃線方式
    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轉(zhuǎn)換為駝峰方式
    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轉(zhuǎn)換
    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()

文章小結(jié)

本章對lodash進(jìn)行了介紹，并對其中的轉(zhuǎn)換函數(shù)進(jìn)行了簡單的測試。

然后封裝了幾個函數(shù)用于工作中，節(jié)省人工，希望能對大家有所幫助。

以上就是JavaScript使用lodash實現(xiàn)命名轉(zhuǎn)換和函數(shù)封裝的詳細(xì)內(nèi)容，更多關(guān)于JavaScript lodash命名轉(zhuǎn)換和封裝的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論