Lodash源码阅读-sortedIndex

Lodash 源码阅读-sortedIndex

概述

sortedIndex 是个用来找位置的函数 ------ 给它一个已排序的数组和一个值,它会告诉你这个值应该插在数组的哪个位置,以保持数组的顺序。

这函数用了二分查找,所以速度很快,复杂度是 O(log n),处理大数组时比普通查找快多了。

前置学习

依赖函数

  • baseSortedIndex:真正干活的内部函数,实现了二分查找逻辑

技术知识

  • 二分查找算法:通过不断对半分割搜索范围来查找目标的方法
  • 数组有序性:理解数组元素排序的重要性以及如何维护有序状态

源码实现

javascript 复制代码
/**
 * Uses a binary search to determine the lowest index at which `value`
 * should be inserted into `array` in order to maintain its sort order.
 *
 * @static
 * @memberOf _
 * @since 0.1.0
 * @category Array
 * @param {Array} array The sorted array to inspect.
 * @param {*} value The value to evaluate.
 * @returns {number} Returns the index at which `value` should be inserted
 *  into `array`.
 * @example
 *
 * _.sortedIndex([30, 50], 40);
 * // => 1
 */
function sortedIndex(array, value) {
  return baseSortedIndex(array, value);
}

实现思路

sortedIndex 的实现超级简单,就一行代码 ------ 直接调用 baseSortedIndex 并返回结果。

这种设计把复杂的二分查找逻辑藏在内部函数中,而对外提供一个简单干净的接口。baseSortedIndex 函数会:

  1. 把搜索范围设为整个数组
  2. 取中间元素跟目标值比较
  3. 根据比较结果,缩小搜索范围到一半
  4. 不断重复,直到找到正确位置

源码解析

函数签名

函数接收两个参数:

  • array:已排序的数组
  • value:要插入的值

返回一个数字,表示应该插入的位置索引。

函数实现

javascript 复制代码
function sortedIndex(array, value) {
  return baseSortedIndex(array, value);
}

就这一行代码,相当于把活儿都交给了 baseSortedIndex 函数。

baseSortedIndex 在内部做了更多工作:

  • 针对数值类型做了优化,用位运算加速计算
  • 处理各种边界情况,如空数组、特殊值等
  • 确保返回值在有效范围内

总结

sortedIndex 虽然实现简单,但它解决了一个常见问题:高效地找到值应该插入的位置。从中我们可以学到:

  1. 简单接口,复杂实现分离

    • 对外提供简单函数
    • 内部实现细节隐藏在辅助函数中
  2. 算法选择的重要性

    • 用二分查找把时间复杂度从 O(n) 降到 O(log n)
    • 对大数据集来说,性能差距非常明显
  3. 实用工具函数设计

    • 只做一件事,但做得非常好
    • 可以组合使用解决更复杂的问题

这种小而精的函数正是 Lodash 受欢迎的原因 ------ 它们在日常开发中非常实用,而且性能上经过了优化。

相关推荐
AI大模型顾潇1 分钟前
[特殊字符] 本地大模型编程实战(29):用大语言模型LLM查询图数据库NEO4J(2)
前端·数据库·人工智能·语言模型·自然语言处理·prompt·neo4j
九月TTS23 分钟前
TTS-Web-Vue系列:Vue3实现内嵌iframe文档显示功能
前端·javascript·vue.js
爱编程的小学究24 分钟前
【node】如何把包发布到npm上
前端·npm·node.js
我爱加班、、40 分钟前
Chrome安装最新vue-devtool插件
javascript·vue.js·chrome·vue-devtool
weixin_473894771 小时前
前端服务器部署分类总结
前端·网络·性能优化
LuckyLay1 小时前
React百日学习计划-Grok3
前端·学习·react.js
澄江静如练_1 小时前
小程序 存存上下滑动的页面
前端·javascript·vue.js
互联网搬砖老肖1 小时前
Web 架构之会话保持深度解析
前端·架构
m0_513962532 小时前
vue-ganttastic甘特图label标签横向滚动固定方法
javascript·vue.js·甘特图
菜鸟una2 小时前
【taro3 + vue3 + webpack4】在微信小程序中的请求封装及使用
前端·vue.js·微信小程序·小程序·typescript·taro