Angular TypeScript中如何提取数组对象的Name字段生成新数组？

原始对象数组：

const countries = [
  {Name: 'AFGHANISTAN', ShortName: 'AFG'},
  {Name: 'ALAND ISLANDS', ShortName: 'ALD'},
  {Name: 'ALBANIA', ShortName: 'ALB'},
  {Name: 'ALGERIA', ShortName: 'DZA'},
  {Name: 'AMERICAN PACIFIC TERRITORIES', ShortName: 'UMI'},
  {Name: 'AMERICAN SAMOA', ShortName: 'ASM'},
  {Name: 'AMERICAN VIRGIN ISLANDS', ShortName: 'VIR'},
  {Name: 'ANDORRA', ShortName: 'AND'},
  {Name: 'ANGOLA', ShortName: 'AGO'},
  {Name: 'ANGUILLA', ShortName: 'AIA'},
  {Name: 'ANTARCTICA', ShortName: 'ATA'},
  {Name: 'ANTIGUA & BARBUDA', ShortName: 'ATG'}
];

期望输出（注：示例写法存在语法错误，实际可选择以下两种有效形式）：

// 形式1：字符串数组
[
  'AFGHANISTAN',
  'ALAND ISLANDS',
  'ALBANIA',
  // ... 其余国家名称
]

// 形式2：仅含Name属性的对象数组
[
  {Name: 'AFGHANISTAN'},
  {Name: 'ALAND ISLANDS'},
  {Name: 'ALBANIA'},
  // ... 其余对象
]

你用filter方法不符合需求是因为filter仅用于筛选数组元素，不会修改元素结构。要实现元素转换，应该用map方法——它会遍历数组每个元素，返回你需要的新结构。

实现方式1：转换为字符串数组 #

直接提取每个对象的Name属性：

const countryNames: string[] = countries.map(country => country.Name);

实现方式2：转换为仅含Name属性的对象数组 #

保留对象结构，只保留Name字段：

// TypeScript可选：定义类型增强校验
type CountryName = { Name: string };
const countryNameObjects: CountryName[] = countries.map(country => ({ Name: country.Name }));

Angular组件中使用示例 #

在组件类中集成转换逻辑：

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

@Component({
  selector: 'app-country-converter',
  templateUrl: './country-converter.component.html'
})
export class CountryConverterComponent {
  // 原始国家数据
  private originalCountries = [
    {Name: 'AFGHANISTAN', ShortName: 'AFG'},
    {Name: 'ALAND ISLANDS', ShortName: 'ALD'},
    // ... 其余国家数据
  ];

  // 转换后的字符串数组
  countryNames: string[];
  // 转换后的对象数组
  countryNameObjects: { Name: string }[];

  constructor() {
    this.countryNames = this.originalCountries.map(c => c.Name);
    this.countryNameObjects = this.originalCountries.map(c => ({ Name: c.Name }));
  }
}

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