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

相关推荐
北海-cherish2 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch2 小时前
网球馆自动预约系统的反调试
javascript·网络
2501_915909063 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist4 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师4 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang5 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。5 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡5 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_5 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含5 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js