JavaScript：根据指定tag生成含指定属性的新数组

现有如下数组：

data = [
 {
  "tag":"A",
  "list":[
   {
    "list_tag":1
   },
   {
    "list_tag":2
   }
   ]
 },
 {
  "tag":"B",
 "list":[
   {
    "list_tag":3
   },
   {
    "list_tag":4
   }
   ]
 },
 {
  "tag":"C",
 "list":[
   {
    "list_tag":5
   },
   {
    "list_tag":6
   }
   ]
 }
];

需要编写一个方法，接收tag值作为参数，针对该tag生成包含三个新属性的数组。比如传入"A"时，最终输出：

finalArray = [
 {
  "types":"list_tag",
  "label":"1",
  "Value":"1"
 },
 {
  "types":"list_tag",
  "label":"2",
  "Value":"2"
 }
 ]

其中types固定为"list_tag"，label和Value取自对应list里的list_tag值（需转为字符串）。

以JavaScript为例，实现逻辑如下：

function generateFinalArray(targetTag) {
  // 定位到匹配目标tag的数组项
  const targetItem = data.find(item => item.tag === targetTag);
  // 如果找不到匹配项，返回空数组
  if (!targetItem) return [];
  
  // 转换list数组为目标格式
  return targetItem.list.map(item => ({
    types: "list_tag",
    label: String(item.list_tag),
    Value: String(item.list_tag)
  }));
}

// 调用示例
const finalArray = generateFinalArray("A");
console.log(finalArray);

逻辑说明 #

1. 使用find方法快速筛选出与传入tag匹配的元素，找不到则直接返回空数组，避免后续报错；
2. 用map方法遍历匹配元素的list数组，将每个元素转换为需求指定的结构，通过String()把数字类型的list_tag转为字符串，符合示例输出格式；
3. 代码逻辑简洁，同时处理了无匹配tag的边界情况。

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