Lodash源码阅读-unzipWith

好_快
56 阅读4分钟

Lodash 源码阅读-unzipWith

概述

unzipWith 是 Lodash 中一个用于数组重组和转换的函数。它接收一个分组元素的数组，将这些元素按照共享索引重新分组，然后使用指定的迭代函数对每个新分组进行组合处理。这个函数本质上是 _.unzip 的增强版本，让开发者能够自定义如何处理重组后的数据。

前置学习

依赖函数
  • unzip：将嵌套数组的元素按共享索引重组，例如 [[a,b], [1,2]] 转为 [[a,1], [b,2]]
  • arrayMap：Lodash 内部函数，对数组中每个元素应用转换函数并返回新数组
  • apply：Lodash 内部函数，优化版的 Function.prototype.apply，用于函数调用时传递参数数组
技术知识
  • 数组操作：理解 JavaScript 中的数组转换和重组操作
  • 函数式编程：理解高阶函数和函数组合的概念
  • 参数传递：了解如何使用 apply 将数组元素作为独立参数传递给函数

源码实现

function unzipWith(array, iteratee) {
  if (!(array && array.length)) {
    return [];
  }
  var result = unzip(array);
  if (iteratee == null) {
    return result;
  }
  return arrayMap(result, function (group) {
    return apply(iteratee, undefined, group);
  });
}

实现思路

unzipWith 函数的实现分为三个主要步骤：

  • 首先检查输入数组是否有效，
  • 然后使用 unzip 函数将嵌套数组重组，
  • 最后如果提供了迭代函数，就对每个重组后的分组应用该函数。

整个过程将二维数组的列转为行，并可选地对每一行应用自定义的计算逻辑，非常适合处理矩阵转置和组合计算的场景。

源码解析

1. 参数校验和边界处理

if (!(array && array.length)) {
  return [];
}

这段代码首先对输入参数进行校验：

  • 检查 array 是否为真值（非 null、undefined、false、0、''、NaN）
  • 检查 array 是否有 length 属性且不为 0

如果 array 不满足条件（为空数组、null 或 undefined），函数直接返回一个空数组。这种防御性编程确保了函数在接收到无效输入时能够优雅地处理。

2. 数组重组

var result = unzip(array);
if (iteratee == null) {
  return result;
}

这部分代码调用 unzip 函数完成数组的重组操作：

  • unzip 函数将嵌套数组从按行分组转换为按列分组
  • 例如 [[1, 3], [2, 4]] 会被转换为 [[1, 2], [3, 4]]

如果没有提供迭代函数（iteratee 是 null 或 undefined），函数直接返回重组后的结果。这使得 unzipWith 在不提供 iteratee 时的行为与 unzip 完全一致。

3. 应用迭代函数

return arrayMap(result, function (group) {
  return apply(iteratee, undefined, group);
});

当提供迭代函数时，这段代码对重组后的每个分组应用该函数：

  • 使用 arrayMap 遍历 result 中的每个分组
  • 对每个分组，使用 apply 函数调用 iteratee
  • apply 的第二个参数为 undefined，表示在函数调用时不绑定特定的 this 值
  • group 作为 apply 的第三个参数，会被展开为 iteratee 的独立参数

例如，如果 group 是 [1, 2, 3]，那么 apply(iteratee, undefined, group) 相当于调用 iteratee(1, 2, 3)。

这种实现方式让开发者可以自由地指定如何组合和处理每个分组的元素，为数据处理提供了极大的灵活性。

示例分析

以官方文档中的示例为例：

var zipped = _.zip([1, 2], [10, 20], [100, 200]);
// => [[1, 10, 100], [2, 20, 200]]

_.unzipWith(zipped, _.add);
// => [3, 30, 300]

执行流程分析：

  1. 首先 zipped 是 [[1, 10, 100], [2, 20, 200]]
  2. 调用 unzipWith(zipped, _.add)
  3. 先执行 unzip(zipped) 得到 [[1, 2], [10, 20], [100, 200]]
  4. 然后对每个分组应用 _.add 函数
    • 对 [1, 2] 应用 _.add，得到 3
    • 对 [10, 20] 应用 _.add，得到 30
    • 对 [100, 200] 应用 _.add，得到 300
  5. 最终返回 [3, 30, 300]

总结

通过对 unzipWith 源码的分析，我们可以学习到以下几个实用的编程技巧：

  • 使用短路逻辑进行简洁的边界条件处理，提高代码的健壮性
  • 在高阶函数设计中通过可选参数提供功能降级方案
  • 利用 apply 实现参数数组到独立参数的优雅转换
  • 组合使用多个功能单一的函数实现复杂功能，体现函数式编程的优势
avatar
文章
阅读
粉丝