如何使用JavaScript的map方法返回拆分后的目标格式数组？

假设我有这样一个数组：

[['name', 'bulb'],['color', ['red', 'green', 'blue']],['price', ['$52']]]

用普通的map方法处理：

array.map(([key, value]) => `${key}-${value}`)

得到的结果是：

['name-bulb', 'color-red,green,blue', 'price-$52']

但实际想要的是把数组类型的value拆成单独的键值项，得到：

['name-bulb', 'color-red', 'color-green', 'color-blue', 'price-$52']

实现方法 #

用flatMap替代map就能解决，它会先映射元素再自动展平一层数组，结合对value类型的判断即可：

const originalArray = [['name', 'bulb'],['color', ['red', 'green', 'blue']],['price', ['$52']]];
const targetArray = originalArray.flatMap(([key, value]) => {
  // 区分value是单个值还是数组
  return Array.isArray(value) 
    ? value.map(item => `${key}-${item}`) 
    : [`${key}-${value}`];
});

console.log(targetArray);
// 输出：["name-bulb", "color-red", "color-green", "color-blue", "price-$52"]

思路说明 #

• flatMap刚好适配这种需要"映射+拆分数组"的场景，它会把每个元素映射后的数组结果合并成一个大数组。
• 对value做类型判断：如果是数组就遍历生成多个键值对；如果是单个值就包装成数组返回，确保flatMap能统一处理所有情况。

内容的提问来源于stack exchange，提问作者Alyona