如何从JSON中提取所有type键的值（含子节点）？求Lodash/JS实现方法

需求说明 #

给定如下JSON数据：

[
   {
      "id":"0001",
      "type":"donut",
      "name":"Cake",
      "ppu":0.55,
      "batters":{
         "batter":[
            {
               "id":"1001",
               "type":"Regular"
            },
            {
               "id":"1002",
               "type":"Chocolate"
            }
         ]
      },
      "topping":[
         {
            "id":"5002",
            "type":"Glazed"
         },
         {
            "id":"5004",
            "type":"Maple"
         }
      ]
   },
   {
      "id":"0002",
      "type":"donut",
      "name":"Raised",
      "ppu":0.55,
      "batters":{
         "batter":[
            {
               "id":"1001",
               "type":"Regular"
            }
         ]
      },
      "topping":[
         {
            "id":"5003",
            "type":"Chocolate"
         },
         {
            "id":"5004",
            "type":"Maple"
         }
      ]
   },
   {
      "id":"0003",
      "type":"donut",
      "name":"Old Fashioned",
      "ppu":0.55,
      "batters":{
         "batter":[
            {
               "id":"1001",
               "type":"Regular"
            },
            {
               "id":"1002",
               "type":"Chocolate"
            }
         ]
      },
      "topping":[
         {
            "id":"5001",
            "type":"None"
         },
         {
            "id":"5004",
            "type":"Maple"
         }
      ]
   }
]

需要提取所有层级下key为type的值，最终得到结果：
["donut", "Regular", "Chocolate", "Glazed", "Maple", "donut", "Regular", "Chocolate", "Maple", "donut", "Regular", "Chocolate", "None", "Maple"]

一、Lodash实现方案 #

借助Lodash的递归遍历工具，结合类型判断函数可以快速实现：

const _ = require('lodash');

function extractTypes(data) {
  return _.transform(data, (result, value) => {
    if (_.isPlainObject(value)) {
      // 先收集当前对象的type值
      if ('type' in value) result.push(value.type);
      // 递归处理对象的所有属性值
      _.forEach(value, val => result.push(...extractTypes(val)));
    } else if (_.isArray(value)) {
      // 递归处理数组的每个元素
      _.forEach(value, val => result.push(...extractTypes(val)));
    }
  }, []);
}

// 调用示例
const jsonData = [/* 你的JSON数据 */];
const types = extractTypes(jsonData);
console.log(types);

二、原生JavaScript实现方案 #

不依赖任何库，自己写递归函数遍历所有嵌套结构：

function extractTypes(data) {
  const result = [];
  
  function traverse(item) {
    if (typeof item === 'object' && item !== null) {
      // 收集当前对象的type值
      if ('type' in item) {
        result.push(item.type);
      }
      // 遍历所有属性或数组元素，递归处理
      for (const key in item) {
        traverse(item[key]);
      }
    }
  }
  
  traverse(data);
  return result;
}

// 调用示例
const jsonData = [/* 你的JSON数据 */];
const types = extractTypes(jsonData);
console.log(types);

这个方案通过递归遍历所有层级的对象和数组，只要遇到type键就将对应值加入结果数组，完全符合需求。

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