Angular中如何提取testUsers数组里嵌套colours的元素值？

你当前用map得到的是包含数组和undefined的二维结构，要提取所有colours的元素到一维数组，可以用以下几种方法：

方法1：使用flatMap（推荐） #

flatMap会先执行map操作，再自动将结果扁平化一层，同时可以处理没有colours属性的元素：

this.newArray = this.testUsers.flatMap(user => user.colours || []);

原理：对每个用户，若存在colours则返回该数组，否则返回空数组；flatMap会把所有返回的数组展开合并成一个一维数组。

方法2：先过滤再映射后扁平化 #

先筛选出带有colours的用户，再提取数组，最后扁平化：

this.newArray = this.testUsers
  .filter(user => !!user.colours) // 只保留有colours属性的用户
  .map(user => user.colours)
  .flat(); // 扁平化二维数组为一维

方法3：利用concat展开数组 #

通过扩展运算符把二维数组的元素传递给concat，实现合并：

this.newArray = [].concat(...this.testUsers.map(user => user.colours || []));

另外注意你示例数据里的red未加引号，属于语法错误，需要修正为'red'。

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