Lodash源码阅读-arrayIncludesWith

Lodash 源码阅读-arrayIncludesWith

概述

arrayIncludesWith 是 Lodash 内部函数,用于检查数组中是否存在满足自定义比较器条件的元素。与原生 Array.includes() 不同,它允许自定义比较逻辑。

前置学习

  • 无直接依赖其他 Lodash 函数
  • 相关技术知识:
    • JavaScript 数组遍历
    • 函数作为参数传递(高阶函数)
    • 短路逻辑
    • 空值检查

源码实现

js 复制代码
function arrayIncludesWith(array, value, comparator) {
  var index = -1,
    length = array == null ? 0 : array.length;

  while (++index < length) {
    if (comparator(value, array[index])) {
      return true;
    }
  }
  return false;
}

实现思路

该函数通过遍历数组,使用自定义比较器函数比较传入的值与数组中的每个元素。一旦找到满足比较条件的元素,立即返回 true,如果遍历完整个数组都没有找到,则返回 false。同时处理了 arraynullundefined 的边缘情况。

源码解析

js 复制代码
function arrayIncludesWith(array, value, comparator) {

函数接收三个参数:

  • array:要检查的数组
  • value:要搜索的值
  • comparator:比较器函数,接收两个参数 (value, element),返回布尔值
js 复制代码
var index = -1,
  length = array == null ? 0 : array.length;

声明索引变量 index 初始化为 -1,准备使用前置递增运算。length 变量存储数组长度,同时处理了边缘情况:如果 arraynullundefined,则 length 为 0。这避免了对空值数组的遍历。

示例:

js 复制代码
// 当 array 为 null 时
var array = null;
var length = array == null ? 0 : array.length; // length === 0

// 当 array 为正常数组时
var array = [1, 2, 3];
var length = array == null ? 0 : array.length; // length === 3
js 复制代码
while (++index < length) {

使用 while 循环遍历数组。注意这里先递增 index(前置 ++),所以第一次循环时 index 为 0。

js 复制代码
if (comparator(value, array[index])) {
  return true;
}

对每个数组元素,调用比较器函数,传入搜索值和当前元素。如果比较器返回 true(表示找到匹配),则整个函数立即返回 true,不再继续遍历。

示例:

js 复制代码
// 自定义比较器,检查两个对象的 id 是否相同
function compareById(a, b) {
  return a.id === b.id;
}

var objects = [{ id: 1 }, { id: 2 }, { id: 3 }];
var result = arrayIncludesWith(objects, { id: 2 }, compareById); // result === true
js 复制代码
return false;

如果循环结束(遍历完整个数组)仍未找到匹配元素,则返回 false

总结

arrayIncludesWith 是一个灵活的数组搜索工具,其核心价值在于提供自定义比较逻辑的能力。它实现了以下几个设计亮点:

  1. 灵活性:通过比较器参数支持任意复杂的比较逻辑
  2. 短路设计:一旦找到匹配立即返回,避免不必要的计算
  3. 防御性编程 :妥善处理 null/undefined 输入
  4. 简洁实现:使用简单的循环结构,无需额外辅助函数

这种设计模式在处理复杂对象数组比较、自定义相等性检查等场景非常有用,是函数式编程中高阶函数应用的典型示例。

相关推荐
wangbing11251 分钟前
界面规范的其他框架实现-列表-layui实现
前端·javascript·layui
最爱吃南瓜1 分钟前
JS逆向实战案例之----【通姆】252个webpack模块自吐
开发语言·javascript·爬虫·webpack·js逆向·算法模拟
Hurry630 分钟前
web应用服务器tomcat
java·前端·tomcat
zhanshuo1 小时前
深度揭秘:如何在单页应用(SPA)中完美保留路由切换滚动位置,提升用户体验!
javascript
烛阴1 小时前
Sin -- 重复的、流动的波浪
前端·webgl
北'辰3 小时前
DeepSeek智能考试系统智能体
前端·后端·架构·开源·github·deepseek
前端历劫之路4 小时前
🔥 1.30 分!我的 JS 库 Mettle.js 杀入全球性能榜,紧追 Vue
前端·javascript·vue.js
爱敲代码的小旗4 小时前
Webpack 5 高性能配置方案
前端·webpack·node.js
Murray的菜鸟笔记5 小时前
【Vue Router】路由模式、懒加载、守卫、权限、缓存
前端·vue router
苏格拉没有底了5 小时前
由频繁创建3D火焰造成的内存泄漏问题
前端