Lodash源码阅读-arrayPush

Lodash 源码阅读-arrayPush

概述

arrayPush 是 Lodash 中的一个内部工具函数，用于将一个数组的所有元素追加到另一个数组的末尾。它实现了类似于 JavaScript 原生的 Array.prototype.push.apply(array, values) 的功能，但采用了更直接的循环实现方式。这个函数虽然简单，但在 Lodash 内部被广泛使用，是很多高级函数的基础组件。

前置学习

依赖函数

arrayPush 是一个相对独立的基础函数，不依赖其他 Lodash 函数。

技术知识

数组操作：理解 JavaScript 中数组的基本操作
循环遍历：使用 while 循环遍历数组元素
数组索引：理解数组索引和长度的概念
函数返回值：函数返回修改后的原数组，支持链式调用

源码实现

javascript 复制代码

/**
 * Appends the elements of `values` to `array`.
 *
 * @private
 * @param {Array} array The array to modify.
 * @param {Array} values The values to append.
 * @returns {Array} Returns `array`.
 */
function arrayPush(array, values) {
  var index = -1,
    length = values.length,
    offset = array.length;

  while (++index < length) {
    array[offset + index] = values[index];
  }
  return array;
}

实现思路

arrayPush 函数的实现思路非常直观：

接收两个参数：目标数组 array 和要追加的值数组 values
记录目标数组的当前长度作为偏移量 offset
使用循环遍历要追加的值数组的每个元素
将每个元素添加到目标数组的末尾（从 offset 位置开始）
返回修改后的目标数组

这种实现方式简单高效，直接操作数组索引，避免了使用 push 方法可能带来的额外开销。

源码解析

参数处理与变量初始化

javascript 复制代码

var index = -1,
  length = values.length,
  offset = array.length;

这段代码初始化了三个关键变量：

index：初始化为 -1，用于跟踪当前处理的 values 数组索引
length：要追加的 values 数组的长度
offset：目标数组 array 的当前长度，作为新元素的起始插入位置

index 初始化为 -1 是因为循环使用了前置递增操作符 ++index，这样第一次迭代时 index 的值就会是 0，正好对应数组的第一个元素。

数组元素追加

javascript 复制代码

while (++index < length) {
  array[offset + index] = values[index];
}

这是函数的核心逻辑，使用 while 循环遍历 values 数组的每个元素：

循环从索引 0 开始（因为 index 初始值为 -1，第一次 ++index 后变为 0）
循环继续，直到处理完 values 数组中的所有元素（index < length 不再成立）
每次迭代，将 values 的当前元素 values[index] 复制到 array 的相应位置 array[offset + index]

这种直接通过索引赋值的方式比使用 push 方法更加直接和高效，特别是在处理大量元素时。

返回结果

javascript 复制代码

return array;

函数最后返回修改后的目标数组 array。这使得函数可以链式调用，也符合 Lodash 的一般设计风格。返回原数组而不是创建新数组的设计选择意味着这是一个会修改原数组的操作（mutable operation）。

总结

arrayPush 函数虽然简单，但它体现了几个重要的编程原则：

单一职责原则：
- 函数只做一件事：将一个数组的元素追加到另一个数组
- 实现简单明了，易于理解和维护
性能优化：
- 直接操作数组索引，避免了使用 push 方法的额外开销
- 预先计算偏移量，减少循环内的计算
可组合性：
- 返回修改后的原数组，支持链式调用
- 作为基础工具函数，可以被其他高级函数使用
代码复用：
- 作为基础工具函数，被多个高级函数使用
- 避免在多个地方重复实现相同的逻辑

虽然现代 JavaScript 提供了多种数组合并方法（如 Array.prototype.push.apply()、Array.prototype.concat()、展开运算符 [...array1, ...array2] 等），但 arrayPush 的实现方式仍然有其价值，特别是在需要精确控制数组操作或优化性能的场景中。它是理解 Lodash 内部实现和 JavaScript 数组操作的一个很好的例子。