Lodash源码阅读-dropRight

Lodash 源码阅读-dropRight

概述

dropRight 函数用来从数组的末尾删除指定数量的元素,并返回剩下的部分。它和 drop 是一对,一个削头,一个削尾。不会修改原数组,会返回一个新数组。

前置学习

依赖函数

  • baseSlice:内部切片函数,实际干活的是它
  • toInteger:把各种类型的值转成整数

技术知识

  • 数组切片:从数组中提取部分元素形成新数组
  • 参数默认值:参数未提供时使用默认值
  • 防御性编程:处理各种边界情况和异常输入
  • Guard 参数:在高阶函数中防止额外参数误用
  • 索引计算:根据数组长度和要删除的元素计算切片范围

源码实现

javascript 复制代码
/**
 * Creates a slice of `array` with `n` elements dropped from the end.
 *
 * @static
 * @memberOf _
 * @since 3.0.0
 * @category Array
 * @param {Array} array The array to query.
 * @param {number} [n=1] The number of elements to drop.
 * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
 * @returns {Array} Returns the slice of `array`.
 * @example
 *
 * _.dropRight([1, 2, 3]);
 * // => [1, 2]
 *
 * _.dropRight([1, 2, 3], 2);
 * // => [1]
 *
 * _.dropRight([1, 2, 3], 5);
 * // => []
 *
 * _.dropRight([1, 2, 3], 0);
 * // => [1, 2, 3]
 */
function dropRight(array, n, guard) {
  var length = array == null ? 0 : array.length;
  if (!length) {
    return [];
  }
  n = guard || n === undefined ? 1 : toInteger(n);
  n = length - n;
  return baseSlice(array, 0, n < 0 ? 0 : n);
}

实现思路

dropRight 函数的实现很直观:

  1. 先检查数组是不是空的,是就直接返回空数组
  2. 确定要删除的元素数量 n,默认是 1
  3. 计算新数组的结束位置:length - n
  4. baseSlice 从 0 切到这个位置
  5. 如果计算出的位置是负数(删除的比数组长度还多),就切到 0(返回空数组)

源码解析

空值和长度检查

javascript 复制代码
var length = array == null ? 0 : array.length;
if (!length) {
  return [];
}

这两行代码是防御性编程的体现:

  • 先判断 array 是不是 nullundefined(用 == 一次检查两种情况)
  • 如果是,就把长度设为 0,避免报错
  • 然后检查长度是否为 0,是则直接返回空数组,避免后续无谓操作

参数处理

javascript 复制代码
n = guard || n === undefined ? 1 : toInteger(n);

这行处理删除元素的数量:

  • 如果有 guard 参数(比如在 _.map 里用 dropRight 当迭代器),或者没传 n,就用默认值 1
  • 否则用 toIntegern 转成整数,确保计算准确

看起来复杂,其实就是在设置默认值,不过同时还考虑了函数用作高阶函数参数的情况。

计算切片范围

javascript 复制代码
n = length - n;

这行很关键,用来计算新数组应该到哪里结束:

  • 用数组长度减去要删除的元素数量
  • 例如:数组 [1, 2, 3] 长度为 3,要删除末尾 1 个元素,那么切片应该到 3 - 1 = 2 的位置,即保留索引 0 和 1 的元素

执行切片

javascript 复制代码
return baseSlice(array, 0, n < 0 ? 0 : n);

最后调用 baseSlice 完成实际切片操作:

  • 从索引 0 开始(保留数组头部)
  • 切到刚才计算的 n 位置
  • 如果 n 小于 0(说明删除的元素比数组长度还多),就切到 0,也就是返回空数组
  • 例如:数组 [1, 2, 3] 删除末尾 5 个元素,计算出 n = 3 - 5 = -2,小于 0,所以切到 0,返回 []

总结

dropRight 是一个简单但实用的数组处理函数,特点如下:

  1. 不可变操作 - 不修改原数组,返回新数组,符合函数式编程理念

  2. 参数灵活 - 支持默认值和各种类型输入,很人性化

  3. 健壮性强 - 能处理各种边界情况,不会轻易报错

  4. 与其他函数互补 - 与 drop 形成一套头尾操作组合

这样的设计让我们在处理数组末尾元素时不必手动计算索引,直接说"我要去掉末尾几个元素"就行了,既直观又不易出错。

常见应用场景包括:移除数组末尾元素、处理时间序列数据时忽略最近的不稳定数据点、获取路径目录、创建不包含尾部元素的数组副本等。

相关推荐
酷小洋5 分钟前
CSS基础
前端·css
xinruoqianqiu5 分钟前
shell脚本--2
linux·运维·开发语言·前端·c++·chrome
几度泥的菜花1 小时前
Vue 项目中长按保存图片功能实现指南
前端·javascript·vue.js
学习机器不会机器学习1 小时前
什么是跨域,如何解决跨域问题
前端·后端
Code哈哈笑1 小时前
【图书管理系统】详细讲解用户登录:后端代码实现及讲解、前端代码讲解
前端·spring boot·后端·spring·状态模式
前端小崔1 小时前
从零开始学习three.js(14):一文详解three.js中的粒子系统Points
开发语言·前端·javascript·学习·3d·webgl·数据可视化
程序猿阿伟2 小时前
《让内容“活”起来:Flutter社交应用瀑布流布局的破界实践》
前端·flutter
LuckyLay2 小时前
AI教你学VUE——Gemini版
前端·vue·学习路线·学习资源
朱颜辞镜花辞树‎2 小时前
Go Web 后台管理系统项目详解
开发语言·前端·golang
极小狐2 小时前
如何使用极狐GitLab 软件包仓库功能托管 npm?
java·前端·数据库·ci/cd·npm·gitlab·devops