Lodash源码阅读-pullAt

Lodash 源码阅读-pullAt

概述

pullAt 是 Lodash 中的一个数组操作函数,用于移除数组中指定索引位置的元素,并返回由被移除元素组成的新数组。与其他数组操作函数不同,pullAt 会直接修改原数组(即具有副作用),这使得它在需要同时获取被移除元素并更新原数组的场景中特别有用。

前置学习

依赖函数

  • flatRest:将函数的 rest 参数展平的特殊版本
  • baseAt:根据指定的路径从对象中获取值的基础实现
  • basePullAt:从数组中移除指定索引位置元素的基础实现
  • arrayMap:数组映射函数,类似于 Array.prototype.map
  • isIndex:检查一个值是否是有效的数组索引
  • compareAscending:用于升序排序的比较函数

技术知识

  • 函数包装与高阶函数:理解 flatRest 如何包装函数
  • 数组操作:了解数组元素的移除及相关操作
  • 类型转换:了解如何使用一元加号 (+) 将值转换为数字
  • 排序算法:了解为什么需要对索引进行排序

源码实现

javascript 复制代码
var pullAt = flatRest(function (array, indexes) {
  var length = array == null ? 0 : array.length,
    result = baseAt(array, indexes);

  basePullAt(
    array,
    arrayMap(indexes, function (index) {
      return isIndex(index, length) ? +index : index;
    }).sort(compareAscending)
  );

  return result;
});

实现思路

pullAt 函数的实现思路可以分为三个主要步骤:

  1. 提取要移除的元素:使用 baseAt 函数从原数组中获取指定索引处的元素,并将这些元素作为结果数组保存
  2. 处理索引:将所有索引转换为合适的格式(确保数字索引)并按升序排序
  3. 移除元素:使用 basePullAt 函数从原数组中按照处理后的索引移除元素

这种实现确保了即使在移除多个元素的情况下,也能正确地维护索引关系,避免因为数组长度变化导致的索引错位问题。

源码解析

函数包装

javascript 复制代码
var pullAt = flatRest(function (array, indexes) {
  // 函数体...
});

pullAt 使用 flatRest 函数包装,这意味着它接受可变数量的参数,并将第一个参数后的所有参数合并为一个展平的数组。例如:

  • pullAt(array, 1, 2, 3) 中,indexes 会被处理为 [1, 2, 3]
  • pullAt(array, [1, 2], [3]) 中,indexes 会被处理为 [1, 2, 3]

这种设计使函数调用更加灵活。

初始化变量

javascript 复制代码
var length = array == null ? 0 : array.length,
  result = baseAt(array, indexes);

这段代码做了两件事:

  1. 获取数组长度:如果 arraynullundefined,则设置 length 为 0,否则获取数组的实际长度
  2. 使用 baseAt 函数获取指定索引处的元素值:这些值将作为函数的返回值

处理索引并移除元素

javascript 复制代码
basePullAt(
  array,
  arrayMap(indexes, function (index) {
    return isIndex(index, length) ? +index : index;
  }).sort(compareAscending)
);

这段代码负责从数组中移除元素,主要步骤为:

  1. 处理索引:使用 arrayMap 遍历 indexes 数组

    • 对于每个索引,检查它是否是有效的数组索引(使用 isIndex 函数)
    • 如果是有效索引,使用一元加号 (+) 将其转换为数字(处理字符串索引如 "1")
    • 如果不是有效索引,保持原样(可能是属性路径)
  2. 排序索引:使用 compareAscending 函数对索引进行升序排序

    • 这一步很重要,因为从数组中移除元素时,较大索引处的元素应该先被移除,以避免索引错位
  3. 移除元素:调用 basePullAt 函数,根据排序后的索引从数组中移除元素

返回结果

javascript 复制代码
return result;

最后,函数返回由被移除元素组成的数组,这个数组是在函数开始时通过 baseAt 计算的。

总结

pullAt 函数是 Lodash 中一个强大的数组操作工具,它允许开发者同时完成两个操作:

  1. 从数组中移除指定索引处的元素(修改原数组)
  2. 获取被移除的元素(返回新数组)

这种设计体现了几个重要的编程原则:

  1. 分治策略:将复杂操作分解为获取元素和移除元素两个步骤,分别由专门的函数处理
  2. 索引排序:通过对索引进行排序,确保在有多个索引时能够正确处理元素移除
  3. 类型处理:对索引进行类型检查和转换,增强函数的健壮性
  4. API 设计 :使用 flatRest 提供灵活的参数格式,改善用户体验

虽然直接修改原数组违背了函数式编程中的不可变性原则,但这种设计对于需要同时获取移除元素和更新原数组的场景非常有用,提供了简洁的解决方案。如果需要保持原数组不变,可以先复制数组,然后对副本使用 pullAt

相关推荐
just小千6 分钟前
重学React(一):描述UI
前端·react.js·ui
fakaifa24 分钟前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
泯泷30 分钟前
【SHA-2系列】SHA256 前端安全算法 技术实践
javascript·安全·node.js
清羽_ls38 分钟前
leetcode-位运算
前端·算法·leetcode·位运算
李菠菜1 小时前
利用Nginx实现高性能的前端打点采集服务(支持GET和POST)
linux·前端·nginx
lilye661 小时前
精益数据分析(6/126):深入理解精益分析的核心要点
前端·人工智能·数据分析
Apifox1 小时前
Apifox 4月更新|Apifox在线文档支持LLMs.txt、评论支持使用@提及成员、支持为团队配置「IP 允许访问名单」
前端·后端·ai编程
Jolyne_1 小时前
搭建公司前端脚手架
前端·架构·前端框架
hang_bro1 小时前
el-tree的动态加载问题与解决
前端·javascript·vue.js
天天扭码1 小时前
一杯珍珠奶茶的时间吃透一道高频面试算法题——搜索二位矩阵Ⅱ
前端·算法·面试