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

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

相关推荐
烬头88211 小时前
React Native鸿蒙跨平台实现二维码联系人APP(QRCodeContactApp)
javascript·react native·react.js·ecmascript·harmonyos
pas1361 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
摇滚侠1 小时前
2 小时快速入门 ES6 基础视频教程
前端·ecmascript·es6
2601_949833392 小时前
flutter_for_openharmony口腔护理app实战+预约管理实现
android·javascript·flutter
珑墨2 小时前
【Turbo】使用介绍
前端
军军君013 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
xiaoqi9224 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
打小就很皮...4 小时前
Tesseract.js OCR 中文识别
前端·react.js·ocr
qq_177767374 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
2603_949462104 小时前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter