Angular 5中如何递归获取JSON的所有键值？

嘿，我懂你的需求了——你不想提前硬编码JSON的结构，想要一个不管嵌套多深、数组对象怎么混合，都能把所有层级的键全捞出来的通用方案对吧？

你现在用的Object.keys()只能拿到当前层级的键，要处理嵌套结构，核心就是递归遍历：遇到对象就提取它的键，然后继续遍历对象里的每个值；遇到数组就遍历数组里的每个元素，对每个元素重复这个操作。

第一步：写一个递归提取键的工具函数 #

我们可以写一个extractAllKeys函数，它能处理任意类型的JSON数据：

extractAllKeys(data: any): string[] {
  // 如果是数组，遍历每个元素递归提取，合并所有结果
  if (Array.isArray(data)) {
    return data.flatMap(item => this.extractAllKeys(item));
  }
  // 如果是对象，先提取当前层级的键，再递归处理每个值的键，合并起来
  if (typeof data === 'object' && data !== null) {
    const currentKeys = Object.keys(data);
    const childKeys = currentKeys.flatMap(key => this.extractAllKeys(data[key]));
    return [...currentKeys, ...childKeys];
  }
  // 如果是字符串、数字这类没有键的类型，返回空数组
  return [];
}

第二步：把这个函数整合到你的RxJS管道里 #

现在你只需要把原来的map逻辑替换成调用这个函数就行，不需要关心JSON的结构：

merge()
  .pipe(
    startWith({}),
    switchMap(() => {
      return this.getConfig();
    }),
    map(data => this.extractAllKeys(data)) // 直接传入整个返回的JSON数据
  )
  .subscribe(data => {
    this.dispo = data;
  });

测试一下你给的示例JSON #

用你提供的示例JSON来测试这个函数，它会返回：

["total_count", "incomplete_results", "items", "url", "id", "number", "title", "user", "login", "id"]

和你期望的结果完全一致～

这个方案完全通用，不管你的JSON嵌套多少层、有没有数组，都能把所有层级的键都提取出来，不用提前知道结构。

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