IONIC-ANGULAR下TYPESCRIPT基于PREDICATE实现findAllIndexes获取数组匹配索引

在Ionic-Angular + TypeScript技术栈下，需要从数组中获取所有满足指定断言条件的元素索引，而非仅返回首个匹配项的位置：

• 原生Array.findIndex方法仅支持返回第一个匹配元素的索引，示例行为：

  const myList = [0, 2, 1, 1, 3, 4, 1];
  myList.findIndex(x => x === 1); // 仅返回 2
  

• 期望实现的调用效果：

  myList.findAllIndexes(x => x === 1); // 返回完整匹配索引数组 [2, 3, 6]
  

方案1：独立工具函数封装（工程化推荐） #

该方式不会污染全局原型，可测试性强，符合Angular项目的代码规范，适合中大型团队项目。

1. 在公共工具目录新建数组工具方法，带上完整TypeScript泛型类型定义：

   // src/utils/array.util.ts
   export function findAllIndexes<T>(
     source: T[],
     predicate: (item: T, index: number, arr: T[]) => boolean
   ): number[] {
     const matchedIndexes: number[] = [];
     source.forEach((item, index) => {
       // 逐项执行断言判断，匹配则记录当前索引
       if (predicate(item, index, source)) {
         matchedIndexes.push(index);
       }
     });
     return matchedIndexes;
   }
   

2. 在任意组件、服务中直接导入使用：

   import { findAllIndexes } from '@utils/array.util';
   
   const myList = [0, 2, 1, 1, 3, 4, 1];
   // 输出 [2, 3, 6]
   const indexes = findAllIndexes(myList, x => x === 1);
   

方案2：扩展Array原型（贴合原生调用习惯） #

该方式可以实现和原生方法一致的调用语法，无需手动导入工具函数，适合轻量项目快速开发，注意需要配套TypeScript类型声明避免编译报错：

1. 在项目全局类型声明文件（如src/global.d.ts）中补充原型方法的类型定义：

   // src/global.d.ts
   declare global {
     interface Array<T> {
       findAllIndexes(predicate: (value: T, index: number, obj: T[]) => unknown): number[];
     }
   }
   export {};
   

2. 在应用入口文件（src/main.ts）中给Array原型挂载方法实现：

   // src/main.ts
   Array.prototype.findAllIndexes = function<T>(
     this: T[],
     predicate: (value: T, index: number, obj: T[]) => unknown
   ): number[] {
     const matchedIndexes: number[] = [];
     this.forEach((item, index) => {
       if (predicate(item, index, this)) {
         matchedIndexes.push(index);
       }
     });
     return matchedIndexes;
   };
   

3. 全局可直接调用，效果和原生方法完全一致：

   const myList = [0, 2, 1, 1, 3, 4, 1];
   myList.findAllIndexes(x => x === 1); // 返回 [2, 3, 6]
   

• 工具函数方案无全局副作用，依赖关系清晰，方便单测、逻辑复用，是企业级项目的首选
• 原型扩展方案书写更简洁，适合个人项目、快速迭代的小型应用，但需要注意避免和未来JS原生API的命名冲突

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