如何修改JavaScript代码实现.map()处理数组对象时分隔键值对

你当前代码的核心问题是：flatMap内部的.map(v => [key, v])返回的是数组（如['year', '2018']），而非包含key和value属性的对象，所以直接访问it.key和it.value会取不到有效值，导致渲染格式不符合预期。

以下是两种可行的解决方式：

方案1：将中间数组改为对象 #

修改flatMap内部的map逻辑，返回包含key和value的对象，后续即可直接通过属性访问：

const data = {
   year: ["2018", "2020"],
   make: ["Honda"],
   model: ["Accord", "Civic"],
   subModel: []
}

const filterChips = Object.entries(data)
  .flatMap(([key, value]) => [value].flat()
    .filter(v => v !== "" && v !== null)
    .map(v => ({ key, value: v })) // 这里返回对象而非数组
  )
  .map(it => (<div>{it.key}: {it.value}</div>));

方案2：在最后一步解构数组 #

保持中间的数组格式不变，在最后渲染时直接解构数组元素，省去转换对象的步骤：

const data = {
   year: ["2018", "2020"],
   make: ["Honda"],
   model: ["Accord", "Civic"],
   subModel: []
}

const filterChips = Object.entries(data)
  .flatMap(([key, value]) => [value].flat()
    .filter(v => v !== "" && v !== null)
    .map(v => [key, v])
  )
  .map(([key, value]) => (<div>{key}: {value}</div>)); // 解构数组元素

优化补充 #

由于原数据中value本身就是一维数组，[value].flat()可以简化为value，进一步精简代码：

const filterChips = Object.entries(data)
  .flatMap(([key, value]) => value
    .filter(v => v !== "" && v !== null)
    .map(v => [key, v])
  )
  .map(([key, value]) => (<div>{key}: {value}</div>));

以上三种写法最终都会输出你期望的结果：

<div>year: 2018</div>
<div>year: 2020</div>
<div>make: Honda</div>
<div>model: Accord</div>
<div>model: Civic</div>

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