Mr笔记

Appearance

S05-03 Library-Lodash ​

[TOC]

概述 ​

前端工具库【 ​

jQuery：是一个快速、小型且功能丰富的 JS 库。它的设计宗旨是“Write Less, Do More”（写得更少，做得更多）。

你可以把它理解为 JS 的一个“工具箱”，它封装了大量常用的、但用原生 JS 写起来很复杂的功能（比如 DOM 操作、事件处理、动画、Ajax 等），提供了一个非常简单易用的 API。这使得开发者可以用更少的代码完成更多的工作，并且无需担心不同浏览器之间的兼容性问题。


Lodash：是一个广受欢迎的 JavaScript 实用工具库，它提供了大量高效、可靠且一致的函数，用于简化处理数组、数字、对象、字符串等常见编程任务。


Underscore：类似 Lodash，是一个 JavaScript 实用工具库，提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。


Moment：


Day.js：

image-20250929161337064

Lodash ​

Lodash：是一个广受欢迎的 JavaScript 实用工具库，它提供了大量高效、可靠且一致的函数，用于简化处理数组、数字、对象、字符串等常见编程任务。


对比 Underscore：

  1. Lodash 是 Underscore 的一个分支：

    仍然遵循 Underscore 的 API， 但在底层已完全重写过。对于字符串、数组、对象等 Lodash 提供了跨环境迭代的支持。

  2. Lodash 添加了许多 Underscore 没有的特性和功能：

    提供 AMD 支持、深度克隆、深度合并、更好的性能、大型数 组和对象迭代的优化等，如今的 Lodash 足以成为 Underscore 替代品。

基本使用 ​

安装 ​

  1. 方式一：CDN

    sh
    # jsdelivr
https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.js

# bootcdn
https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js
https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js

  2. 方式二：下载源码，本地引入

基本使用 ​

html
<script src="../libs/lodash.js"></script>

<script>
  // 数组分块
  console.log(_.chunk(['a', 'b', 'c', 'd'], 2)) // [['a', 'b'], ['c', 'd']]

  // 深度克隆
  const objects = [{ a: 1 }, { b: 2 }]
  const deep = _.cloneDeep(objects)
  console.log(deep[0] === objects[0]) // false

  // 防抖
  const debouncedFunc = _.debounce(() => {
    console.log('Debounced function executed')
  }, 1000)
  // 多次调用只会在最后一次调用后等待1000ms执行一次
</script>

常用方法 ​

数字 ​

  • _.random()：(lower?, upper?, floating?)，产生一个包括 lower 与 upper 之间的随机数。

    js
    _.random(0, 5)
// => an integer between 0 and 5

_.random(5)
// => also an integer between 0 and 5

_.random(5, true)
// => a floating-point number between 0 and 5

_.random(1.2, 5.2)
// => a floating-point number between 1.2 and 5.2

字符串 ​

  • _.camelCase()：(str?)，转换字符串为驼峰写法。

    js
    _.camelCase('Foo Bar')
// => 'fooBar'

_.camelCase('--foo-bar--')
// => 'fooBar'

_.camelCase('__FOO_BAR__')
// => 'fooBar'

  • _.capitalize()：(str?)，转换字符串首字母为大写，剩下为小写。

    js
    _.capitalize('FRED')
// => 'Fred'

  • _.endsWith()：(str?, target?, position?)，检查字符串str是否以给定的target字符串结尾。

    js
    _.endsWith('abc', 'c')
// => true

_.endsWith('abc', 'b')
// => false

_.endsWith('abc', 'b', 2)
// => true

  • _.padStart()：(str?, length?, chars?)，如果str字符串长度小于 length 则在左侧填充字符。 如果超出length长度则不做处理。

    js
    _.padStart('abc', 6)
// => '   abc'

_.padStart('abc', 6, '_-')
// => '_-_abc'

_.padStart('abc', 3)
// => 'abc'

数组 ​

  • _.uniq()：(arr)，创建一个去重后的数组副本，保留第一次出现的元素。

    js
    _.uniq([2, 1, 2])
// => [2, 1]

  • _.flatten()：(arr)，减少一层arr嵌套深度。

    js
    _.flatten([1, [2, [3, [4]], 5]])
// => [1, 2, [3, [4]], 5]

  • _.compact()：(arr)，返回过滤掉假值的新数组。

    js
    _.compact([0, 1, false, 2, '', 3])
// => [1, 2, 3]

对象 ​

  • _.pick()：(obj, props?)，返回一个从 obj 中选中指定属性props的新对象（浅拷贝）。

    js
    var object = { a: 1, b: '2', c: 3 }

_.pick(object, ['a', 'c'])
// => { 'a': 1, 'c': 3 }

  • _.omit()：(obj, props?)，返回一个从obj中删除指定属性props后的新对象（浅拷贝）。

    js
    var object = { a: 1, b: '2', c: 3 }

_.omit(object, ['a', 'c'])
// => { 'b': '2' }

  • _.clone()：(value)，创建一个 value 的浅拷贝。

    js
    var objects = [{ a: 1 }, { b: 2 }]

var shallow = _.clone(objects)
console.log(shallow[0] === objects[0])
// => true

  • _.cloneDeep()：(value)，创建一个 value 的深拷贝。

    js
    var objects = [{ a: 1 }, { b: 2 }]

var deep = _.cloneDeep(objects)
console.log(deep[0] === objects[0])
// => false

函数 ​

  • _.debounce()：(func, wait?, options?)，创建一个防抖函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。

    js
    // 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150))
    js
    // 当点击时 `sendMail` 随后就被调用。
jQuery(element).on(
  'click',
  _.debounce(sendMail, 300, {
    leading: true,
    trailing: false
  })
)
    js
    // 确保 `batchLog` 调用1次之后，1秒内会被触发。
var debounced = _.debounce(batchLog, 250, { maxWait: 1000 })
var source = new EventSource('/stream')
jQuery(source).on('message', debounced)
    js
    // 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel)

  • _.throttle()：(func, wait?, options?)，创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。

    js
    // 避免在滚动时过分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100))
    js
    // 点击后就调用 `renewToken`，但5分钟内不超过1次。
var throttled = _.throttle(renewToken, 300000, { trailing: false })
jQuery(element).on('click', throttled)
    js
    // 取消一个 trailing 的节流调用。
jQuery(window).on('popstate', throttled.cancel)

手写 Lodash ​

基本实现 ​

思路：Lodash 的工具函数基本都是类方法。

image-20250929151727639