本文将介绍如何在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']
代码解析
-
a.flatMap((count, i) => ...):
- 我们对计数数组 a 调用 flatMap() 方法。
- flatMap() 的回调函数接收两个参数：count（当前元素，即重复次数）和 i（当前元素的索引）。
- 对于 a 数组中的每个 count，回调函数都会被执行一次。
-
Array(count):
- 在回调函数内部，Array(count) 会创建一个长度为 count 的新数组。请注意，这个数组是稀疏的（sparse），其所有索引都没有实际值。
-
.fill(b[i]):
- 接着，我们对这个新创建的数组调用 .fill() 方法，并传入 b[i] 作为参数。
- b[i] 是 b 数组中与当前 a 数组索引 i 对应的实际值。
- .fill(value) 会用指定的值 value 填充数组中的所有元素。因此，Array(count).fill(b[i]) 会生成一个包含 b[i] 重复 count 次的新数组。
-
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']
注意事项与最佳实践
- 数组长度一致性： 这种方法假设 a 和 b 两个数组的长度是相同的。如果长度不一致，可能会导致 b[i] 为 undefined 或跳过某些元素。在实际应用中，建议进行输入校验。
- 计数为非负整数： a 数组中的计数应为非负整数。如果 count 是负数，Array(count) 会抛出 RangeError。如果 count 是 0，Array(0).fill(value) 会生成一个空数组 []，这通常是符合预期的。
- 性能考量： 对于非常大的数组，flatMap 的性能通常是高效的，因为它是在C++层实现的。然而，创建大量临时小数组（即使它们很小）也会有轻微的开销。对于极端性能敏感的场景，传统的 for 循环结合 push 可能会在某些特定环境下提供微小的优势，但通常 flatMap 的简洁性和可读性更具优势。
- 可读性： flatMap 解决方案非常声明式，清晰地表达了“将每个元素映射为一个子数组，然后扁平化”的意图，提高了代码的可读性。
总结
利用 Array.prototype.flatMap() 结合 Array(count).fill() 是在JavaScript中根据计数数组高效扩展和重复元素的一种优雅且功能强大的方法。它通过简洁的语法实现了复杂的数组转换逻辑，避免了手动循环和数组合并的繁琐，使得代码更加精炼和易于维护。掌握这种模式对于处理各种数据转换和序列生成任务都非常有益。
