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

相关推荐
浮生望6 分钟前
BFF架构实战:用Express+SSE为Vue3搭建安全的流式对话中间层
前端
Quz10 分钟前
QML 与 JavaScript 交互方式:内联函数、外部文件、信号槽与工作线程
javascript·qt
先吃饱再说30 分钟前
React 组件通信:从 Props 单向传递到自定义事件
前端·react.js·前端框架
swipe35 分钟前
05|(前端转后全栈)不手写一堆 SQL,后端怎么操作数据库?MyBatis-Plus 入门
前端·后端·全栈
Allshadow35 分钟前
Nest.js - 连接数据库
javascript·nestjs
冰暮流星39 分钟前
javascript之date对象
开发语言·javascript·ecmascript
swipe39 分钟前
04|(前端转后全栈)前端状态为什么不够用?从页面数据到 MySQL 持久化
前端·后端·全栈
橘子星40 分钟前
别光看教程!手把手拆解 React Todo 项目,一文吃透 5 个核心概念
前端·javascript
大白要努力!1 小时前
纯前端实现 PDF 加水印工具 —— 零后端、支持中文、实时预览
前端·pdf·html
石小石Orz1 小时前
TRAE SOLO实战:实现一个桌面3D助手
前端·人工智能