如何在Angular TypeScript中将键值对对象转换为指定结构的数组

嘿，这个需求在Angular里处理起来超简单，咱们用JavaScript原生的方法就能轻松搞定，给你分享两种常用的实现方式：

方法一：使用Object.entries() + Array.map()（推荐） #

这是最直观也最简洁的方式，Object.entries()会把对象转换成[key, value]格式的二维数组，再通过map()遍历每一项，转换成你需要的包含countryCode和value的对象结构。

// 原始键值对对象
const countryNew = { IN: 159201, BD: 82500, PK: 14237, UA: 486, RU: 9825 };

// 执行转换
const transformedCountries = Object.entries(countryNew).map(([countryCode, value]) => ({
  countryCode,
  value
}));

// 转换后结果就是你要的数组
console.log(transformedCountries);

方法二：使用Object.keys() + Array.map() #

如果需要兼容一些旧环境（不过现在大部分现代浏览器和Node.js版本都支持Object.entries()了），可以用Object.keys()先获取所有键名，再遍历取对应值：

const countryNew = { IN: 159201, BD: 82500, PK: 14237, UA: 486, RU: 9825 };

const transformedCountries = Object.keys(countryNew).map(countryCode => ({
  countryCode,
  value: countryNew[countryCode]
}));

在Angular组件中使用示例 #

如果是在Angular组件的.ts文件里，你可以把转换逻辑放到组件的初始化钩子（比如ngOnInit）里：

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

@Component({
  selector: 'app-country-data',
  templateUrl: './country-data.component.html',
  styleUrls: ['./country-data.component.css']
})
export class CountryDataComponent implements OnInit {
  // 原始数据
  countryNew = { IN: 159201, BD: 82500, PK: 14237, UA: 486, RU: 9825 };
  // 存储转换后的数组
  transformedCountries: { countryCode: string; value: number }[] = [];

  ngOnInit(): void {
    // 执行转换
    this.transformedCountries = Object.entries(this.countryNew).map(([code, val]) => ({
      countryCode: code,
      value: val
    }));
  }
}

这样转换后，transformedCountries就是你需要的目标数组结构啦～

内容的提问来源于stack exchange，提问作者Rimo De Rodrego