JavaScript：利用 flatMap 根据计数数组扩展和重复元素

本文将介绍如何在javascript中高效地根据一个计数数组来重复另一个值数组中的元素，并将其组合成一个新的数组。我们将重点探讨使用 `array.prototype.flatmap()` 结合 `array(count).fill()` 的简洁而强大的解决方案，通过实例代码和详细解释，帮助读者掌握这种常见的数组转换技巧，以应对需要动态生成重复序列的场景。

在JavaScript开发中，我们经常会遇到需要根据特定规则转换或生成新数组的场景。其中一种常见需求是，给定两个长度相同的数组，一个数组包含重复的次数（计数），另一个数组包含对应的值，我们需要生成一个新数组，其中每个值都按照其对应的计数重复出现。

问题描述

假设我们有两个数组，它们的长度相同：

• a 数组：包含整数，表示每个元素应重复的次数。
• b 数组：包含任意类型的值，这些值将根据 a 数组中对应位置的计数进行重复。

我们的目标是创建一个新的数组 c，它将是 b 数组中元素根据 a 数组中对应计数重复后的扁平化结果。

示例： 给定输入： a = [1, 2, 3, 2]b = ['this', 'is', 'my', 'good example']

期望的输出 c 应该为： c = ['this', 'is', 'is', 'my', 'my', 'my', 'good example', 'good example']

解决方案：利用 flatMap 和 Array().fill()

JavaScript提供了多种处理数组的方法，其中 Array.prototype.flatMap() 方法是解决此类问题的理想选择。flatMap() 方法首先使用映射函数对每个元素执行映射操作，然后将结果扁平化成一个新数组。这使得它非常适合于将每个输入元素转换为零个、一个或多个输出元素，并自动处理扁平化过程。

立即学习“Java免费学习笔记（深入）”；

结合 flatMap()，我们可以使用 Array(count).fill(value) 来动态生成一个包含指定值重复 count 次的新数组。

核心代码实现

const a = [1, 2, 3, 2];
const b = ['this', 'is', 'my', 'good example'];

// 使用 flatMap 结合 Array(count).fill() 实现
const c = a.flatMap((count, i) => Array(count).fill(b[i]));

console.log(c);
// 预期输出: ['this', 'is', 'is', 'my', 'my', 'my', 'good example', 'good example']

代码解析

1. a.flatMap((count, i) => ...):

   • 我们对计数数组 a 调用 flatMap() 方法。
   • flatMap() 的回调函数接收两个参数：count（当前元素，即重复次数）和 i（当前元素的索引）。
   • 对于 a 数组中的每个 count，回调函数都会被执行一次。

2. Array(count):

   • 在回调函数内部，Array(count) 会创建一个长度为 count 的新数组。请注意，这个数组是稀疏的（sparse），其所有索引都没有实际值。

3. .fill(b[i]):

   • 接着，我们对这个新创建的数组调用 .fill() 方法，并传入 b[i] 作为参数。
   • b[i] 是 b 数组中与当前 a 数组索引 i 对应的实际值。
   • .fill(value) 会用指定的值 value 填充数组中的所有元素。因此，Array(count).fill(b[i]) 会生成一个包含 b[i] 重复 count 次的新数组。

4. flatMap 的扁平化作用:

   • flatMap() 会收集回调函数返回的每个小数组（例如，第一次迭代返回 ['this']，第二次返回 ['is', 'is'] 等）。
   • 最后，flatMap() 会将所有这些小数组扁平化（连接）成一个单一的、最终的数组 c。

逐步示例演示

让我们通过提供的示例来详细跟踪 flatMap 的执行过程：

• 第一次迭代 (i = 0):
  • count = a[0] = 1
  • value = b[0] = 'this'
  • Array(1).fill('this') 生成 ['this']
• 第二次迭代 (i = 1):
  • count = a[1] = 2
  • value = b[1] = 'is'
  • Array(2).fill('is') 生成 ['is', 'is']
• 第三次迭代 (i = 2):
  • count = a[2] = 3
  • value = b[2] = 'my'
  • Array(3).fill('my') 生成 ['my', 'my', 'my']
• 第四次迭代 (i = 3):
  • count = a[3] = 2
  • value = b[3] = 'good example'
  • Array(2).fill('good example') 生成 ['good example', 'good example']

flatMap 将这些结果 ['this'], ['is', 'is'], ['my', 'my', 'my'], ['good example', 'good example'] 收集起来，并最终扁平化为： ['this', 'is', 'is', 'my', 'my', 'my', 'good example', 'good example']

注意事项与最佳实践

1. 数组长度一致性： 这种方法假设 a 和 b 两个数组的长度是相同的。如果长度不一致，可能会导致 b[i] 为 undefined 或跳过某些元素。在实际应用中，建议进行输入校验。
2. 计数为非负整数： a 数组中的计数应为非负整数。如果 count 是负数，Array(count) 会抛出 RangeError。如果 count 是 0，Array(0).fill(value) 会生成一个空数组 []，这通常是符合预期的。
3. 性能考量： 对于非常大的数组，flatMap 的性能通常是高效的，因为它是在C++层实现的。然而，创建大量临时小数组（即使它们很小）也会有轻微的开销。对于极端性能敏感的场景，传统的 for 循环结合 push 可能会在某些特定环境下提供微小的优势，但通常 flatMap 的简洁性和可读性更具优势。
4. 可读性： flatMap 解决方案非常声明式，清晰地表达了“将每个元素映射为一个子数组，然后扁平化”的意图，提高了代码的可读性。

总结

利用 Array.prototype.flatMap() 结合 Array(count).fill() 是在JavaScript中根据计数数组高效扩展和重复元素的一种优雅且功能强大的方法。它通过简洁的语法实现了复杂的数组转换逻辑，避免了手动循环和数组合并的繁琐，使得代码更加精炼和易于维护。掌握这种模式对于处理各种数据转换和序列生成任务都非常有益。