JavaScript作为前端最为重要而又使用最为广泛的语言;在日常的开发中,我们往往需要处理大量的数据和复杂的逻辑,这个时候就可以使用一些工具函数来解决这些问题,来减少我们的开发量。

今天盘点一些常见的 JavaScript 工具函数,来帮助各位更好地理解和应用这些工具函数,从而减少代码冗余,提高编程效率。

1. Lodash

Lodash 是一个流行的 JavaScript 工具库,旨在提供一组实用的函数,用于简化编程任务,提高代码的可读性和可维护性。

Lodash 函数可以用于处理字符串、数字、数组、对象、函数等各种数据类型,涵盖了许多常见的编程任务,例如数组去重、对象深度克隆、函数节流等等。

Lodash 已经成为了 JavaScript 开发中不可或缺的一部分,被众多开发者所推崇和使用,通过学习和应用这些工具函数,我们可以更加高效地完成开发任务,减少冗余代码的编写,提高代码质量和可维护性。

2. qs

qs 是一个用于将查询字符串解析为对象,或者将对象序列化为查询字符串的工具库。在前端开发中,我们经常需要使用查询字符串来传递参数,例如在 URL 中传递参数或者在 AJAX 请求中传递参数。qs 可以帮助我们方便地处理这些查询字符串,使得参数的传递更加简单和方便。

除了基本的解析和序列化功能之外,qs 还提供了一些高级的功能,例如可以解析数组和嵌套对象,可以支持自定义分隔符和排序方法等等。这些功能使得 qs 在处理复杂的查询字符串时非常有用。

总之,qs 是一个非常实用的工具库,它可以帮助我们方便地处理查询字符串,使得参数的传递更加简单和方便,适用于各种需要处理查询字符串的场景。

3. day.js

Day.js 是一个轻量级的日期处理库,它具有与 Moment.js 相似的 API,但是比 Moment.js 更小更快。

Day.js 拥有丰富的插件和可扩展性,支持各种日期格式和语言环境,可以帮助开发者轻松地处理日期和时间相关的操作。比如格式化日期、计算日期间隔、解析日期、获取指定日期的前后日期等等。同时,Day.js 也可以帮助我们进行日期的本地化处理,包括日期格式、语言环境、时区等等。

总之,Day.js 是一个非常实用的日期处理工具库,它能够帮助我们轻松地处理各种日期操作,同时也具有很好的可扩展性和灵活性,可以满足各种需求。

4. big.js

Big.js 是一个用于精确计算 JavaScript 中大数字的工具库。它可以帮助我们避免在 JavaScript 中计算大数字时出现精度误差的问题。

在 JavaScript 中,当数字过大时,会出现精度问题。例如,当我们使用普通数字进行计算时,可能会出现浮点数精度问题,导致计算结果出现误差。

·Big.js· 可以通过将数字以字符串形式存储并进行运算来避免这个问题,从而确保计算结果的精确性。

5. ramda

Ramda 是一个函数式编程的 JavaScript 工具库,它的设计思想是基于函数式编程范式,提供了一组实用的、纯函数式的工具函数,用于处理数组、对象、函数等各种数据类型。

Ramda 中的函数都是柯里化的,这意味着它们可以接收多个参数,并且可以部分应用,使得代码更加灵活、可组合和可重用。它提供的函数式编程风格可以帮助开发者编写更为简洁、模块化和可测试的代码。学会使用它可以更加深入理解函数式编程的思想,提高代码质量和可维护性。

6. bbo(函数工具库)

javascript的工具类 javascript工具库_前端

bbo是不同于常见的工具库的,诸如lodash、underscore、lazy.js等。它的特点就是:高频使用。

bbo项目整理了日常开发中最常用的功能。这些功能在您的开发中几乎无处不在,并且在主流的函数工具库中找不到。

大多数代码来自于 stackoverflow.com 网站中的高分答案(在此,向原始作者表示you’zhong敬意)。项目在 gzip 压缩下只有 7K, 所以你可以随时随地使用。

API概览

javascript的工具类 javascript工具库_javascript_02


通过方法名能直接意会出函数的功能。函数的分类也很清楚明了。认真核对了下,90%+的函数都在平时工作中经常用到。

安装和使用:

使用 npm 安装

在这里插入代码片
npm install bbo --save

直接将 js 引入到浏览器中
国内用户可以直接使用此csdn

<script src="https://mat1.gtimg.com/www/js/libs/bbo.min.js" />

或者下载到本地再引入。

<script src="bbo.min.js" type="text/javascript"></script>

举几个例子:

bbo.numberFormat(1234.56, 2, ',', ' '); // => '1 234,56';
bbo.split([1, 2, 3, 4, 5], 2); // => [[1,2], [3,4], [5]]
bbo.entries({ c: 8, a: 4 }); // => [['c', 8], ['a', 4]]
bbo.get({ a: { aa: { aaa: 2 } }, b: 4 }, "a.aa.aaa"); // => 2
bbo.union([1, 2, 3], [4, 3, 2]); // => [1, 2, 3, 4]
bbo.intersect([1, 2, 3], [4, 3, 2]); // => [2, 3]
bbo.unionBy([2.1], [1.2, 2.3], Math.floor); // [2.1, 1.2]
bbo.mapValues({ a: 3, b: 5, c: 9 }, (value) => value + 1); //=> {a: 4, b: 6, c: 10}
bbo.compact([0, 1, false, 2, "", 3]); // [1, 2, 3]
bbo.flush({a: 2, b: null, c: 4, d: undefined}); // => {a: 2, c: 4}
bbo.differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // => [1]
bbo.search("3", { a: 3, b: 5, c: 7 }); // => 'a'
bbo.size({ a: 1, b: 2 }); // => 2

var users = [
  { user: "barney", age: 36, active: true },
  { user: "fred", age: 40, active: false },
];
bbo.find(users, { age: 1, active: true }); // => {"active": true, "age": 36, "user": "barney"}
bbo.findIndex(users, ["active", false]); // => 1

再来看看链式调用:

var array1 = [1, 2, 3, null];
var array2 = [3, 4, 5, ''];
var object1 = { a: 6, b: 7 };
var object2 = { c: 8, d: 9 };

bbo
  .chain(object1)
  .extend(object2) // => {a: 6, b: 7, c: 8, d: 9}
  .entries() // =>  [["a", 6], ["b", 7], ["c", 8], ["d", 9]]
  .thru((words) => {
    const temp = [];
    bbo.forEach(words, (item, index) => {
      temp.push(item[1]);
    });
    return temp;
  }) // => [6, 7, 8, 9]
  .union(array1) // => [6, 7, 8, 9, 1, 2, 3, null]
  .union(array2) // => [6, 7, 8, 9, 1, 2, 3, null, 4, 5, ""]
  .compact() // => [6, 7, 8, 9, 1, 2, 3, 4, 5]
  .thru((array) => {
    return array.sort();
  }) // => [1, 2, 3, 4, 5, 6, 7, 8, 9]
  .value();
// return  => [1, 2, 3, 4, 5, 6, 7, 8, 9]