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

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

相关推荐
alphageek81 分钟前
Electron开源库入门教程:跨平台桌面应用框架
javascript·其他·electron·开源
小桥风满袖33 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心33 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~37 分钟前
CSS3的新特性
前端·javascript·css3
IT_陈寒43 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询1 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript