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

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

相关推荐
鹏多多1 分钟前
Flutter输入框TextField的属性与实战用法全面解析+示例
android·前端·flutter
子不语1805 分钟前
Matlab读取文件
前端·javascript·matlab
spencer_tseng8 分钟前
layui table.js
javascript·layui
kylinmin24 分钟前
卸载微软电脑管家:一次性彻底移除
前端·ui·xhtml
二狗哈27 分钟前
Cesium快速入门15:图元Primitive创建图像物体
开发语言·javascript·3d·webgl·cesium·地图可视化
qq_4275060833 分钟前
基于Vue 3和Element Plus利用h、render函数写一个简单的tooltip局部or全局指令
前端·javascript·vue.js
泥菩萨^_^1 小时前
【每天认识一个漏洞】React 和 Next.js RCE漏洞
前端·javascript·react.js
1024肥宅1 小时前
JavaScript常用设计模式完整指南
前端·javascript·设计模式
董世昌411 小时前
js怎样控制浏览器前进、后退、页面跳转?
开发语言·前端·javascript