Lodash.js

Lodash.js

Lodash vs underscore

Lodash 和 Underscore 都是非常实用JavaScript工具库，它们都提供了非常多的函数来对数组、数字、对象、字符串等操作，这些函数不但可以简化JavaScript编写，而且可以极大的提高我们的开发效率。这些库非常适合如下操作：

• Lodash 是 Underscore 的一个分支，并且仍然遵循 Underscore的API， 但在底层已完全重写过，并且还添加了许多 Underscore 没有提供的特性和功能，如今的Lodash足以成为Underscore替代品。

• 创建 Lodash 是为了为数组、字符串、对象和参数对象提供更一致的跨环境迭代支持。它已经成为 Underscore 的超集，提供额外的功能（如 AMD 支持、深度克隆和深度合并）、更好的整体性能和大型数组/对象迭代的优化，以及自定义构建和模板预编译实用程序的更大灵活性。

• Lodash从第4个版本开始放弃对IE9以下的支持。

• 兼容性：chrome74-75， fireFox 66-67， ie11，edge 18，Safari 11-12 和 node.js 8-12 在环境中测试通过

常见的前端工具类库

1. Axios
2. lodash：underscore的超集
3. Moment: 处理时间的工具类库，目前已经不推荐的
4. data.js：处理时间类库
5. RxJS： react 实现响应式的依赖
6. jQuery
7. D3
8. immer: 数据结构
9. underscore：工具类库
10. luxon：Moment 团体开发
11. ramda：函数时编程
12. stdlib

Lodash 常见方法

字符串（5）

_.camelCase() *

转换字符串string为驼峰写法。

_.capitalize(string) *

转换字符串string首字母为大写，剩下为小写。

_.endsWith(string, target)

检查字符串string是否以给定的target字符串结尾。

_.padStart(str, lenght,char)

如string字符串长度小于 length 则在左侧填充字符。 如果超出length长度则截断超出的部分。

_.trim(string, chars)

从string字符串中移除前面和后面的 空格 或 指定的字符。

数组（Array）(5个)

_.first(arr, level)

获取array中的第一个元素。

_.last(arr, [n=1])

获取array中的最后一个元素。

_.uniq(arr) *

创建一个去重后的array数组副本。返回新的**去重后的数组。**同样对象类型中相同属性的不会去除

_.compact(arr) *

创建一个新数组，包含原数组中所有的非假值元素。返回过滤掉假值的新数组。

_.flatten(arr) 平坦 *

减少一级array嵌套深度。返回新数组。 同 arr.flat() 方法 相似

对象 （4个）

_.pick(object, [propsKeyArray]) *

• 参数一：需要操作的目标对象

• 参数二：key字符串类型 或者 字符串类型得数组

  从 propsArray数组中 获取需要属性的key，取出对应object中的属性和key 来创建一个对象。返回新对象。

  console.log(_.pick(obj, "firends"))
  console.log(_.pick(obj, ["firends", "name"]))

_.omit(object, [propsKeyArray])*

反向版_.pick ; 排除对象中的propsKeyArray。返回新对象。

• 参数同 pick

_.clone( value) *

支持拷贝 arrays、 booleans、 date 、map、 numbers， Object 对象, regexes, sets, strings, symbols等等。 arguments对象的可枚举属性会拷贝为普通对象。（注：也叫浅拷贝） 返回拷贝后的值。

_.cloneDeep(value) *

这个方法类似_.clone，除了它会递归拷贝 value。（注：也叫深拷贝）。返回拷贝后的值。

不能拷贝属性描述符，其他都ok

集合（Array | Object）（5）

_.sample(): 随机元素 *

从collection（集合）中获得一个随机元素。返回随机元素。

_.shuffle() 乱序 *

创建一个被打乱值的集合。

_.orderBy (collection, [iteratorFunc], [orderKey[asc(default), desc]])

给数组排序，默认是升序asc。只能排序数值类型数组中存在 其他类型的话不能进行排序

_.forEach() 别名 _.each()

遍历(集合) 中的每个元素 callback的参数和forEach相同 和arr.forEach的区别就是不能传入指定的this

_.filter( )

返回一个新的过滤后的数组。

函数 (3)

_.curry(func, [argCount])

返回新的柯里化（curry）函数。

• 参数一：需要柯里化得函数
• 参数二(可选)：无法获取function得length得情况下，可以手动指定参数数量

 //注意：这里是function的参数如果加了默认值的话就 不会计算 到函数的length属性上面，需要指定参数的 数量
function foo(name = "", addr = "", ipione = "", friend = "") {
   /*  name ??= ""
    addr ??= ""
    ipione ??= ""
    friend ??= "" */
    return name+addr+ipione+friend
  }
  //有默认值得情况下指定 参数数量
  const bar = _.curry(foo, 4)
  console.log(bar("zhangsan")("天津")(123)("lisi"))

_.debounce()

返回新的 debounced（防抖动）函数。

_.throttle()

返回节流的函数。

Number(num, start, end) 2个

_.inRange

用来限制 number 类型的范围，同样[ 区间 ) 包前不包后

• 参数一(num)：目标number
• 参数二(start)：起始范围, 注意：当只有两个参数的时候 起始为0，第二个参数为end
• 参数三(end)：截至范围，但不包括end

_.random(upper, lower, floatFlag)

1. [lower=0] (number): 下限。包括
2. [upper=1] (number): 上限。包括
3. [floating] (boolean): 指定是否返回浮点数。默认false

day.js

Moment.js库 VS Day.js库

一、Moment库，官网的描述：

优点

1. Moment 是一个 JavaScript 库，可以帮助我们快速处理时间和日期，已在数百万的项目中使用。
2. Moment对浏览器的兼容性比较好，例如，在Internet Explorer 8+版本运行良好。

缺点

• 现在比较多人反对使用 Moment是因为它的包大小。Moment 不适用于“tree-shaking”算法，因此往往会增加 Web 应用程序包的大小。如果需要国际化或时区支持，Moment 可以变得相当大。

  tree-shaking算法就是，在我们用到方法会打包，不用的话就不会打包。moment 不支持tree-shaking，所以moment的方法都会被打包

• Moment团队也希望我们在未来的新项目中不要使用Moment 。而推荐使用其它的替代品。例如：Day.js。

Day.js库，官网的描述：

1. Day.js 是 Moment的缩小版。Day.js 拥有与 Moment相同的 API，并将其文件大小减少了 97%。

   Moment完整压缩文件的大小为 67+Kb，Day.js 压缩文件只有 2Kb。

2. Day.js所有的 API 操作都将返回一个新的 Day.js 对象，这种设计能避免 bug 产生，减少调试时间。

3. Day.js 对国际化支持良好。国际化需手动加载，多国语言默认是不会被打包到Day.js中的。

4. 所有Day.js对象是不可变的。如果需要的话，var a = dayjs() var b = a.clone()仍然可以创建当前对象的一个克隆。

二、兼容性

1. chrome
2. windows xp ， windows 7 、10
3. ie 8 9 10 11
4. 低版本的firefox
5. linux
6. Safari
7. OSX