Angular中如何不使用循环从对象数组中提取指定键的所有值

实现方案 #

Angular 基于 JavaScript/TypeScript 运行，你可以直接使用 JS 内置的数组高阶方法完成需求，无需手动编写循环语句：

1. 提取所有type值（保留重复项） #

使用Array.prototype.map方法，直接遍历数组提取指定属性：

// 假设这是你组件中定义的原始数组
const rawData = [
  {"time":"2016-07-26 09:02:27","type":"aa"},
  {"time":"2016-04-21 20:35:07","type":"ae"},
  {"time":"2016-08-20 03:31:57","type":"ar"},
  {"time":"2017-01-19 22:58:06","type":"ae"},
  {"time":"2016-08-28 10:19:27","type":"ae"},
  {"time":"2016-12-06 10:36:22","type":"ar"},
  {"time":"2016-07-09 12:14:03","type":"ar"},
  {"time":"2016-10-25 05:05:37","type":"ae"},
  {"time":"2016-06-05 07:57:18","type":"ae"},
  {"time":"2016-10-08 22:03:03","type":"aa"},
  {"time":"2016-08-13 21:27:37","type":"ae"},
  {"time":"2016-04-09 07:36:16","type":"ar"},
  {"time":"2016-12-30 17:20:08","type":"aa"},
  {"time":"2016-03-11 17:31:46","type":"aa"},
  {"time":"2016-05-04 14:08:25","type":"ar"},
  {"time":"2016-11-29 05:21:02","type":"ar"},
  {"time":"2016-03-08 05:46:01","type":"ar"},
];

// 提取type字段的核心代码
const typeValueList = rawData.map(item => item.type);

执行后得到的typeValueList就是所有type值组成的数组，顺序和原数组一致。

2. 提取去重后的type值 #

如果需要拿到不重复的type集合，可以搭配Set实现：

const uniqueTypeList = [...new Set(rawData.map(item => item.type))];

执行后得到的结果为['aa', 'ae', 'ar']。

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