如何在TypeScript/JavaScript中提取对象键名？（IGDB API、Ionic、Angular）

嘿，这个需求其实超容易搞定！不管你用JavaScript还是TypeScript，结合你提到的IGDB API、Ionic和Angular场景，我给你整理了几种实用的方案：

基础实现（JS/TS通用） #

最直接高效的方式就是用Object.keys()方法获取对象的所有键名数组，再用join(' ')把数组元素拼接成空格分隔的字符串。

举个简单的例子：

// 你的原始货币对象
const currencies = { 
  "AED": "United Arab Emirates Dirham", 
  "AFN": "Afghan Afghani", 
  "ALL": "Albanian Lek" 
};

// 提取键名并转为目标格式
const formattedCodes = Object.keys(currencies).join(' ');
console.log(formattedCodes); // 输出: "AED AFN ALL"

TypeScript类型增强版 #

如果用TS开发（比如Angular/Ionic项目），你可以给对象定义明确的类型，让代码更健壮、可读性更强：

// 定义货币映射类型
type CurrencyMapping = {
  [code: string]: string;
};

// 带类型约束的原始对象
const currencies: CurrencyMapping = { 
  "AED": "United Arab Emirates Dirham", 
  "AFN": "Afghan Afghani", 
  "ALL": "Albanian Lek" 
};

// 处理逻辑和JS一致
const formattedCodes = Object.keys(currencies).join(' ');

Angular/Ionic场景下的实战示例 #

假设你从IGDB API请求到货币数据，在Angular组件里可以这么处理：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-currency-display',
  templateUrl: './currency-display.component.html',
  styleUrls: ['./currency-display.component.scss']
})
export class CurrencyDisplayComponent implements OnInit {
  currencyCodeString: string = '';

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // 替换为实际的IGDB API请求端点
    this.http.get<CurrencyMapping>('https://api.igdb.com/v4/currencies')
      .subscribe((currencyData) => {
        // 把API返回的对象处理成你需要的空格分隔格式
        this.currencyCodeString = Object.keys(currencyData).join(' ');
      });
  }
}

// 在组件外定义类型，方便复用
type CurrencyMapping = {
  [code: string]: string;
};

小补充 #

如果你的对象存在继承来的可枚举属性（这种情况在API返回的数据里几乎不会出现），可以用Object.getOwnPropertyNames()替代Object.keys()，它只会返回对象自身的属性名。不过绝大多数场景下，Object.keys()完全够用。

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