Angular v2-6是否内置类似AngularJS的forEach工具方法？

嗨，我懂你偏爱 AngularJS 里 angular.forEach 那种既能遍历数组又能处理对象属性的统一用法，不过在 Angular v2 到 v6 中，框架本身并没有内置完全一致的方法。不过别担心，我们有几种好用的替代方案，甚至能自己封装一个同款函数。

1. 用原生 JavaScript/TypeScript 方法替代 #

Angular 2+ 基于 TypeScript，更推荐使用原生 JS/TS 的 API，分场景来看：

遍历数组 #

直接用原生的 Array.prototype.forEach 就足够，用法和你熟悉的逻辑一致：

const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach((item, index) => {
  console.log(`索引 ${index} 的元素是 ${item}`);
});

遍历对象属性 #

如果要遍历对象的键值对，可以结合 Object.keys() 或 Object.entries() 实现：

• 借助 Object.keys() 获取键名后取值：

const user = { name: 'Bob', age: 28, job: 'Developer' };
Object.keys(user).forEach(key => {
  console.log(`属性 ${key} 对应的值是 ${user[key]}`);
});

• 用 Object.entries() 直接获取键值对数组（ES2017+，Angular 项目默认支持该语法）：

Object.entries(user).forEach(([key, value]) => {
  console.log(`属性 ${key} 对应的值是 ${value}`);
});

2. 封装自己的 forEach 函数 #

如果你特别怀念 AngularJS 那种统一调用的体验，可以自己封装一个行为完全一致的函数，这样就能像以前一样使用：

function forEach<T>(
  obj: T | T[],
  iterator: (value: any, key: string | number) => void,
  context?: any
): void {
  // 处理数组类型
  if (Array.isArray(obj)) {
    obj.forEach((value, index) => {
      iterator.call(context, value, index);
    });
  } 
  // 处理对象类型
  else if (typeof obj === 'object' && obj !== null) {
    Object.keys(obj).forEach(key => {
      iterator.call(context, (obj as any)[key], key);
    });
  }
}

调用示例：

// 遍历数组
forEach([10, 20, 30], (value, index) => {
  console.log(`数组索引 ${index}: ${value}`);
});

// 遍历对象
forEach({ id: 1, title: 'Hello Angular' }, (value, key) => {
  console.log(`对象属性 ${key}: ${value}`);
});

这样就完美复刻了你想要的 angular.forEach 功能啦。

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