Lodash源码阅读-arrayIncludes

Lodash 源码阅读-arrayIncludes

概述

arrayIncludes 是 Lodash 内部的一个私有工具函数,用于检查数组中是否包含指定的值。它类似于 JavaScript 原生的 Array.prototype.includes 方法,但具有更完善的 nullundefined 处理机制。

前置学习

  • baseIndexOf - 用于在数组中查找值的基础实现函数
  • strictIndexOf - 使用严格相等(===)进行比较的索引查找函数
  • baseFindIndex - 基础的查找索引实现,支持自定义断言函数
  • baseIsNaN - 检查值是否为 NaN 的基础实现

源码实现

js 复制代码
function arrayIncludes(array, value) {
  var length = array == null ? 0 : array.length;
  return !!length && baseIndexOf(array, value, 0) > -1;
}

实现思路

arrayIncludes 函数的实现非常简洁,主要分为两个步骤:

  1. 首先检查输入的数组是否为 null/undefined 或者空数组,如果是则直接返回 false
  2. 使用 baseIndexOf 在数组中查找指定值,如果找到(返回值大于 -1)则返回 true,否则返回 false

源码解析

js 复制代码
var length = array == null ? 0 : array.length;

这行代码使用了松散相等(==)来同时检查 nullundefined。如果数组为 nullundefined,则将 length 设为 0;否则,获取数组的长度。

js 复制代码
return !!length && baseIndexOf(array, value, 0) > -1;

这里使用了逻辑与(&&)运算符的短路特性:

  • 首先将 length 转为布尔值(!!length),确保数组有长度(不为空)
  • 如果数组有长度,则调用 baseIndexOf(array, value, 0) 从索引 0 开始查找值
  • 如果 baseIndexOf 返回的索引大于 -1,表示找到了值,整个表达式返回 true;否则返回 false

baseIndexOf 函数的实现如下:

js 复制代码
function baseIndexOf(array, value, fromIndex) {
  return value === value
    ? strictIndexOf(array, value, fromIndex)
    : baseFindIndex(array, baseIsNaN, fromIndex);
}

这个函数有一个巧妙的设计:

  • 通过 value === value 判断值是否为 NaN(因为 NaN 是唯一一个不等于自身的值)
  • 对于普通值,使用 strictIndexOf 进行严格相等查找
  • 对于 NaN,使用 baseFindIndex 配合 baseIsNaN 进行查找

总结

arrayIncludes 虽然是一个简单的内部工具函数,但它体现了 Lodash 库的几个设计特点:

  1. 空值处理 - 妥善处理 null/undefined 等边界情况
  2. 特殊值处理 - 通过 baseIndexOf 的设计,正确处理 NaN 等特殊值
  3. 简洁高效 - 使用逻辑操作符的短路特性,代码简洁且高效

这个函数在 Lodash 内部被用于实现多个数组操作方法,如 _.includes_.intersection 等,是构建更高级功能的基础。

相关推荐
DanCheOo10 分钟前
Prompt 工程化管理:从散落在代码里到版本化、可测试、可回滚
前端·ai编程
涛涛ing12 分钟前
Vue 3.5 下一站:cached 提案,重新定义响应式缓存
前端
胖子不胖14 分钟前
svg之viewBox
前端
隔壁老王111114 分钟前
浅谈JavaScript内存管理
javascript
吹牛不交税17 分钟前
tree-transfer-vue3 前端插件安装问题解决(--legacy-peer-deps)(其他插件可考虑)适用
前端·javascript·vue.js
ricardo197318 分钟前
Chrome DevTools + Lighthouse + Performance API:前端性能调优三件套实操指南
前端
Appoint_x21 分钟前
设计稿自己会说话:我用 Claude 给 Figma 做了个 AI 上下文插件
前端·javascript
豹哥学前端22 分钟前
浏览器console里的双中括号 `[[ ]]`
前端·javascript·ecmascript 6
菜泡泡@23 分钟前
npm 安装pnpm之后运行pnpm -v查询报错
前端·npm·node.js