前端開發必備，這些數據處理工具庫助你事半功倍！

作者：CUGGZ 2023-03-30 10:22:42

本文將分享一些前端常用的數據處理工具庫，幫助大家更加高效地進行前端數據處理！

1、工具庫

（1）Lodash

Lodash是一個一致性、模塊化、高性能、提高開發者效率的JavaScript 實用工具庫。Lodash 通過降低 array、number、objects、string 等等的使用難度從而讓 JavaScript 變得更簡單。Lodash 的模塊化方法，非常適用于：

遍歷 array、object 和 string。
對值進行操作和檢測。
創建符合功能的函數。

Github：https://github.com/lodash/lodash。

（2）Underscore.js

Underscore.js 是一個實用的 JavaScript 工具庫，它提供了一整套函數式編程的實用功能，但沒有擴展任何 JavaScript 內置對象，而是將數據封裝在一個自定義對象中。

Github：https://github.com/jashkenas/underscore。

（3）Ramda

Ramda 的目標是專門為函數式編程風格而設計，更容易創建函數式 pipeline、且從不改變用戶已有數據。Ramda 主要特性如下：

Ramda 強調更加純粹的函數式風格。數據不變性和函數無副作用是其核心設計理念。這可以幫助你使用簡潔、優雅的代碼來完成工作。
Ramda 函數本身都是自動柯里化的。這可以讓你在只提供部分參數的情況下，輕松地在已有函數的基礎上創建新函數。
Ramda 函數參數的排列順序更便于柯里化。要操作的數據通常在最后面。

Github：https://github.com/ramda/ramda。

（4）Collect.js

collect.js是 JavaScript 處理數組和對象的方便且無依賴的包裝類工具。其提供了常用的數組和集合的操作API，map，reduce，filter 等集合的高級方法，設計靈感來源于 Laravel Collection。

Github：https://github.com/ecrmnn/collect.js/。

2、日期

（1）date-fns

date-fns 是一個現代的 JavaScript 日期工具類庫，提供了最全面、最簡單和一致的工具集，用于在瀏覽器和 Node.js 中操作 JavaScript 日期。其具有以下特性：

模塊化：根據需求選擇需要引用的模塊
不可變：date-fns 使用純函數構建，并且始終返回一個新的日期實例，而不是更改傳遞的日期實例。它允許防止錯誤并跳過長時間的調試會話
可信賴：遵循語義版本，始終向后兼容
快速：輕量快速，為用戶提供最佳的使用體驗
TypeScript & Flow：date-fns 同時支持 Flow 和 TypeScript

import { format, formatDistance, formatRelative, subDays } from 'date-fns'

format(new Date(), "'Today is a' eeee")
//=> "Today is a Saturday"

formatDistance(subDays(new Date(), 3), new Date(), { addSuffix: true })
//=> "3 days ago"

formatRelative(subDays(new Date(), 3), new Date())
//=> "last Friday at 7:26 p.m."

Github：https://github.com/date-fns/date-fns。

（2）Moment.js

Moment.js 是一個簡單易用的輕量級 JavaScript 日期處理類庫，提供了日期格式化、解析、驗證等功能。它支持在瀏覽器和 NodeJS 兩種環境中運行。此類庫能夠將給定的任意日期轉換成多種不同的格式，具有強大的日期計算功能，同時也內置了能顯示多樣的日期形式的函數。

Github：https://github.com/moment/moment/。

（3）Day.js

Day.js是一個極簡的JavaScript庫，可以為現代瀏覽器解析、驗證、操作和顯示日期和時間。其具有以下特點：

和 Moment.js 相同的 API 和用法
不可變數據 (Immutable)
支持鏈式操作 (Chainable)
國際化 I18n
僅 2kb 大小的微型庫
全瀏覽器兼容

dayjs().format();                                     // 2020-09-08T13:42:32+08:00
dayjs().format('YYYY-MM-DD');                         // 2020-09-08
dayjs().format('YYYY-MM-DD HH:mm:ss');                // 2020-09-08 13:47:12
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss');   // 2011-10-17 00

Github：https://github.com/iamkun/dayjs/。

3. 隨機值

（1）Chance.js

Chance 是一個輕量級的 JavaScript 隨機字符串生成器插件，可幫助減少編寫單調的代碼，特別是在編寫自動化測試時經常需要各種隨機內容。可以使用它來產生隨機數、字符、字符串、名字、地址、骰子等。

Github：https://github.com/chancejs/chancejs。

（2）UUID

UUID 是一個用于在 JavaScript 中生成符合 RFC 的 UUID 的實用程序庫。其具有以下特點：

完整：支持 RFC4122 版本 1、3、4 和 5 UUID。
跨平臺：支持CommonJS、ECMAScript 模塊和 CDN 構建；Node 12, 14, 16, 18；Chrome、Safari、Firefox、Edge 瀏覽器。Webpack 和 rollup.js 模塊打包工具。
安全：加密強度高的隨機值。
體積小：零依賴，占用空間小。
CLI：包括 uuid 命令行實用程序。

Github：https://github.com/uuidjs/uuid。

（3）Nano ID

nanoid 是一個小巧、安全、URL友好、唯一的 JavaScript 字符串ID生成器。其具有以下特性：

小巧. 130 bytes (已壓縮和 gzipped)。沒有依賴。Size Limit 控制大小。
快速. 它比 UUID 快 60%。
安全. 它使用加密的強隨機 API。可在集群中使用。
緊湊. 它使用比 UUID（A-Za-z0-9_-）更大的字母表。因此，ID 大小從36個符號減少到21個符號。
易用. Nano ID 已被移植到 20種編程語言。

import { nanoid } from 'nanoid'
model.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"

Github：https://github.com/ai/nanoid。

4、數字

（1）Math.js

Math.js 是一個強大的 JavaScript 和 Node.js 數學庫。它具有支持符號計算的靈活表達式解析器，帶有大量內置函數和常量，并提供了一個集成的解決方案來處理不同的數據類型，如數字、大數、復數、分數、單位和矩陣。功能強大且易于使用。

Github：https://github.com/josdejong/mathjs。

（2）Numeral.js

Numeral.js 是一個用來對數值進行操作和格式化的 JS 庫。可將數字格式化為貨幣、百分比、時間，甚至是序數詞的縮寫（比如1st，100th）。

Github：https://github.com/adamwdraper/Numeral-js。

（3）Accounting.js

Accounting.js 是一個用于數字、貨幣和貨幣解析/格式化的小型 JavaScript 庫。它是輕量級的，完全可本地化的，沒有依賴關系，并且在客戶端或服務器端都可以很好地工作。使用獨立或作為 nodeJS/npm 和 AMD/requireJS 模塊。

// Default usage:
accounting.formatMoney(12345678); // $12,345,678.00

// European formatting (custom symbol and separators), can also use options object as second parameter:
accounting.formatMoney(4999.99, "€", 2, ".", ","); // €4.999,99

// Negative values can be formatted nicely:
accounting.formatMoney(-500000, "￡ ", 0); // ￡ -500,000

// Simple `format` string allows control of symbol position (%v = value, %s = symbol):
accounting.formatMoney(5318008, { symbol: "GBP",  format: "%v %s" }); // 5,318,008.00 GBP

Github：https://github.com/openexchangerates/accounting.js。

5、字符串

（1）qs

qs是一個url參數轉化（parse和stringify）的JavaScript庫。可以把格式化的字符串轉換為對象格式。

var qs = require('qs');
var assert = require('assert');

var obj = qs.parse('a=c');
assert.deepEqual(obj, { a: 'c' });

var str = qs.stringify(obj);
assert.equal(str, 'a=c');

Github：https://github.com/ljharb/qs。

（2）Voca

Voca 是一個用于操作字符串的 JavaScript 庫。Voca 庫提供了有用的函數來使字符串操作更加舒適：更改大小寫、修剪、填充、slugify、拉丁化、sprintfy、截斷、轉義等。模塊化設計允許加載整個庫或單個函數以最小化應用程序構建。該庫經過全面測試、有據可查并長期受支持。

v.camelCase('bird flight');              // => 'birdFlight'
v.sprintf('%s costs $%.2f', 'Tea', 1.5); // => 'Tea costs $1.50'
v.slugify('What a wonderful world');     // => 'what-a-wonderful-world'

Github：https://github.com/panzerdp/voca。

6、Cookie

（1）js-cookie.js

js-cookie.js 是一個用于處理瀏覽器 cookie 的簡單、輕量級 JavaScript API。其具有以下特點：

適用于所有瀏覽器
接受任何字符
經過大量測試
無依賴
支持ES模塊
支持 AMD/CommonJS
符合RFC 6265
有用的維基
啟用自定義編碼/解碼
< 800 字節壓縮！

Github：https://github.com/js-cookie/js-cookie。

（2）Cookies

Cookies 是一個用于獲取和設置 HTTP(S) cookie的node.js模塊。它的特點如下：

允許使用Keygrip來簽署cookie，以防止篡改。
延遲驗證cookie，以降低成本。
不允許通過不安全的套接字發送安全cookies。
默認情況下，所有cookie都僅適用于HTTP，并且通過SSL發送的cookie是安全的。
允許其他庫在不知道簽名機制的情況下訪問 cookie。

var http = require('http')
var Cookies = require('cookies')

// Optionally define keys to sign cookie values
// to prevent client tampering
var keys = ['keyboard cat']

var server = http.createServer(function (req, res) {
  // Create a cookies object
  var cookies = new Cookies(req, res, { keys: keys })

  // Get a cookie
  var lastVisit = cookies.get('LastVisit', { signed: true })

  // Set the cookie to a value
  cookies.set('LastVisit', new Date().toISOString(), { signed: true })

  if (!lastVisit) {
    res.setHeader('Content-Type', 'text/plain')
    res.end('Welcome, first time visitor!')
  } else {
    res.setHeader('Content-Type', 'text/plain')
    res.end('Welcome back! Nothing much changed since your last visit at ' + lastVisit + '.')
  }
})

server.listen(3000, function () {
  console.log('Visit us at http://127.0.0.1:3000/ !')
})

GitHub：https://github.com/pillarjs/cookies。

7、安全

（1）DOMPurify

DOMPurify 是一個開源的基于DOM的快速XSS凈化工具。輸入HTML元素，然后通過DOM解析遞歸元素節點，進行凈化，輸出安全的HTML。

Github：https://github.com/cure53/DOMPurify。

責任編輯：姜華來源：前端充電寶

數據處理前端