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 等,是构建更高级功能的基础。

相关推荐
奔跑的web.几秒前
UniApp 路由导航守
前端·javascript·uni-app
EchoEcho4 分钟前
记录overflow:hidden和scrollIntoView导致的页面问题
前端·css
Cache技术分享6 分钟前
318. Java Stream API - 深入理解 Java Stream 的中间 Collector —— mapping、filtering 和 fla
前端·后端
竟未曾年少轻狂10 分钟前
Vue3 生命周期钩子
前端·javascript·vue.js·前端框架·生命周期
TT哇15 分钟前
【实习】数字营销系统 银行经理端(interact_bank)前端 Vue 移动端页面的 UI 重构与优化
java·前端·vue.js·ui
蓝帆傲亦16 分钟前
Web前端跨浏览器兼容性完全指南:构建无缝用户体验的最佳实践
前端
晴殇i20 分钟前
【前端缓存】localStorage 是同步还是异步的?为什么?
前端·面试
不一样的少年_22 分钟前
Chrome 插件实战:如何实现“杀不死”的可靠数据上报?
前端·javascript·监控
深度涌现22 分钟前
DNS详解——域名是如何解析的
前端
小码哥_常24 分钟前
Android内存泄漏:成因剖析与高效排查实战指南
前端