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. 简洁实现:使用简单的循环结构,无需额外辅助函数

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

相关推荐
想吃火锅10052 小时前
【leetcode】405.数字转换为十六进制数js
开发语言·javascript·ecmascript
原则猫3 小时前
HOOKS 背后机制
前端
码语智行3 小时前
首页导航跳转功能深度解析-系统内和系统外
前端
阿猫的故乡4 小时前
Vue过渡动画从入门到装X:淡入淡出、滑动、列表动画、第三方库全搞定
前端·javascript·vue.js
IManiy4 小时前
总结之Vibe Coding前端骨架
前端
小和尚敲木头4 小时前
vue3 vite动态拼接图片路径
javascript
JS菌5 小时前
AI Agent 沙箱双层防护体系:从权限过滤到内核隔离的完整实现
前端·人工智能·后端
Aphasia3115 小时前
从输入URL到页面展示全流程
前端·面试
我叫黑大帅5 小时前
前端如何竖屏固定视口背景
前端·javascript·面试
abcy0712135 小时前
python pandas csv异步后台清洗前端优先返回成功信息
前端·python·pandas