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

相关推荐
可爱小仙子2 分钟前
ios苹果系统,js 滑动屏幕、锚定无效
前端·javascript·ios
大得3695 分钟前
react菜单,动态绑定点击事件,菜单分离出去单独的js文件,Ant框架
前端·javascript·react.js
段旭涛11 分钟前
uniapp 设置手机不息屏
前端·uni-app
古夕13 分钟前
Promise A+ 规范解读
前端·javascript
古夕13 分钟前
Promise 基础概念与实践详解
前端·javascript
SameX14 分钟前
HarmonyOS Next 枚举递归定义与表达式树建模:从理论到实践
前端
SameX16 分钟前
HarmonyOS Next自定义枚举与标准库的协同:Option与Result
前端
用户58061393930016 分钟前
深度解析:解决大型 Git 仓库克隆失败的完整指南
前端
白瓷梅子汤17 分钟前
跟着官方示例学习 @tanStack-table --- Column Ordering
前端·react.js
我想说一句18 分钟前
React组件化开发实战:从"待办事项"看前端乐高搭建术
前端·javascript·react.js