Angular 2中Array.map返回undefined问题：我遗漏了什么？

嘿，我看到你的问题啦！你在getArrayIndex方法里用Array.map想返回目标元素的索引，但其实这里有两个关键问题导致你拿不到预期的返回值：

• 首先，你的方法没有返回map执行后的结果——map函数本身会返回一个新数组，但你只是在回调函数里return了索引，却没把这个新数组从方法里return出去，所以调用这个方法时会得到undefined。
• 其次，map并不是用来查找索引的最佳工具，它的核心作用是遍历数组并转换每个元素，用它找索引会生成一个包含大量undefined的冗余数组，还需要额外处理才能拿到目标值。

下面给你两种解决方案，推荐第二种更简洁高效的写法：

方案1：修正map的用法（帮你理解问题根源） #

如果一定要用map，需要补充方法的返回逻辑，并过滤掉无效值：

private getArrayIndex(source, target) {
  // 先获取map转换后的数组，再过滤出有效的索引值
  const targetIndex = source.map((element, index) => {
    if (element.attrs.collection_id === target) {
      console.log('i: ', index);
      return index;
    }
    // 不符合条件时返回undefined（默认也是undefined，显式写出更清晰）
    return undefined;
  }).find(item => item !== undefined); // 提取第一个有效的索引

  return targetIndex; // 把结果从方法中返回
}

方案2：使用Array.findIndex（推荐） #

Array.findIndex()是专门用来查找第一个符合条件的元素索引的API，完全匹配你的需求，代码更简洁高效：

private getArrayIndex(source, target) {
  const index = source.findIndex(element => element.attrs.collection_id === target);
  console.log('i: ', index);
  return index;
}

补充说明：如果找不到符合条件的元素，findIndex会返回-1，这比map的方式更直观，也不会生成多余的数组。

最后别忘了调用方法时接收返回值，比如：

this.selectedindex = this.getArrayIndex(this.categories, this.collection_id);

内容的提问来源于stack exchange，提问作者magic.77