在JavaScript数组操作中，flatMap方法可以同时实现映射和扁平化两层操作，非常适合需要根据计数数组对原数组元素进行扩展、重复的场景。比如我们有一个原始元素数组和一个对应长度的计数数组，需要把每个元素按照计数数组里的数值重复对应次数，最终合并成一个新数组，用flatMap就能很简洁地实现。
flatMap方法基础介绍
flatMap是ES2019引入的数组实例方法，它的语法是arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])，其中callback是处理每个元素的函数，返回的是一个数组，flatMap会自动把这些返回的数组扁平化一层，最终合并成一个新数组返回。
它的执行逻辑等价于先调用map方法，再调用深度为1的flat方法，但是flatMap在遍历过程中效率更高，因为它是单次遍历完成的操作。
根据计数数组扩展重复元素的实现
假设我们有两个数组，一个是原始元素数组items，另一个是和items长度相同的计数数组counts，我们需要把items里的每个元素按照counts对应位置的值重复对应次数，最终生成一个展开后的新数组。
比如原始元素数组是['a', 'b', 'c']，计数数组是[2, 3, 1]，期望得到的结果是['a', 'a', 'b', 'b', 'b', 'c']。
使用flatMap的实现方式如下：
const items = ['a', 'b', 'c'];
const counts = [2, 3, 1];
// 使用flatMap根据计数数组扩展重复元素
const result = items.flatMap((item, index) => {
// 根据当前索引获取对应的计数
const repeatCount = counts[index];
// 生成重复对应次数的数组
return new Array(repeatCount).fill(item);
});
console.log(result); // 输出 ['a', 'a', 'b', 'b', 'b', 'c']
实现逻辑解析
上面的代码中，flatMap的回调函数接收当前元素item和当前索引index，首先通过counts[index]拿到当前元素需要重复的次数。然后使用new Array(repeatCount)创建一个长度为repeatCount的空数组，再调用fill(item)把这个数组的所有位置都填充为当前元素item，这个数组就是当前元素重复后的结果。
flatMap会自动把所有回调返回的数组扁平化一层，所以最终所有重复后的数组合并成一个一维数组，就得到了我们需要的结果。
和传统实现方式对比
如果不使用flatMap，我们通常会用两层循环或者先map再flat的方式实现，代码如下：
const items = ['a', 'b', 'c'];
const counts = [2, 3, 1];
// 传统方式1：两层循环
const result1 = [];
for (let i = 0; i < items.length; i++) {
const item = items[i];
const count = counts[i];
for (let j = 0; j < count; j++) {
result1.push(item);
}
}
console.log(result1); // 输出 ['a', 'a', 'b', 'b', 'b', 'c']
// 传统方式2：先map再flat
const result2 = items.map((item, index) => new Array(counts[index]).fill(item)).flat();
console.log(result2); // 输出 ['a', 'a', 'b', 'b', 'b', 'c']
对比可以看出，使用flatMap的实现代码更简洁，逻辑更连贯，不需要额外的临时变量或者两次遍历，在处理这类场景时更有优势。
注意事项
- 计数数组的长度需要和原始元素数组的长度一致，否则会出现
counts[index]为undefined的情况，导致生成的数组长度不符合预期。 - 如果计数数组里的值不是正整数，比如是0或者负数，
new Array(repeatCount)会生成空数组或者长度异常的数组，需要根据实际场景做边界处理，比如过滤掉计数小于等于0的情况。 - flatMap只会扁平化一层，如果回调返回的是多层嵌套数组，只会扁平化最外层，不过在这个场景下我们不需要处理多层嵌套的情况。
边界处理示例
如果计数数组里可能存在0或者负数，我们可以先过滤掉不符合要求的计数，再进行处理：
const items = ['a', 'b', 'c', 'd'];
const counts = [2, 0, -1, 3];
const result = items.flatMap((item, index) => {
const count = counts[index];
// 过滤掉计数小于等于0的情况
if (count <= 0) {
return [];
}
return new Array(count).fill(item);
});
console.log(result); // 输出 ['a', 'a', 'd', 'd', 'd']
JavaScriptflatMap计数数组扩展元素重复元素修改时间：2026-07-04 05:57:24