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 受欢迎的原因 ------ 它们在日常开发中非常实用,而且性能上经过了优化。

相关推荐
paopaokaka_luck1 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9492 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_2 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路4 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任5 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴5 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔5 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js