Angular 4中无需循环修改对象数组指定字段值的方法

嘿，我来帮你解决这个问题！首先得明确：JavaScript/TypeScript里的数组内置方法（比如forEach、map、find）其实已经帮我们把循环逻辑封装好了，完全不用自己写for或者while这种显式循环，这和LINQ的使用风格简直是异曲同工。针对你的两种修改场景，我给你整理了两种实用的实现方式：

方式一：直接修改原数组（利用引用类型特性） #

因为你的security对象是引用类型，所以只要找到对应的对象，直接修改它的name属性就会同步到原数组里。代码写出来非常简洁：

class Security {
  public id: number;
  public name: string;

  // 给类加个构造函数，创建实例更规范哦
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

// 用构造函数初始化数组，比直接写对象字面量更符合类的使用规范
let securities: Security[] = [
  new Security(1, 'Alex'),
  new Security(2, 'John'),
  new Security(3, 'Philip'),
  new Security(4, 'Mark'),
  new Security(5, 'Thomas')
];

function updateSecurityName(targetId: number): void {
  if (targetId === 0) {
    // 清空所有name：用forEach遍历，内部已经帮我们做了循环
    securities.forEach(sec => sec.name = '');
  } else {
    // 找到对应ID的对象直接修改，find会自动停止在第一个匹配项
    const targetSec = securities.find(sec => sec.id === targetId);
    if (targetSec) { // 加个判断，避免找不到对象时出现报错
      targetSec.name = '';
    }
  }
}

为啥这不算显式循环？ #

forEach和find都是数组自带的方法，它们的内部已经实现了遍历逻辑，我们只需要告诉它“找到元素后要做什么”就行，这和LINQ里的ForEach、FirstOrDefault用法几乎一样。而且指定ID的场景下，find找到匹配项就会立刻停止遍历，比全量循环效率还高。

方式二：返回新数组（纯函数风格，类似LINQ的Select） #

如果你不想修改原数组，想要返回一个全新的修改后的数组（这种纯函数写法在很多场景下更安全），可以用map方法，这和LINQ的Select投影思路完全一致：

function getUpdatedSecurities(targetId: number): Security[] {
  return securities.map(sec => {
    // 先复制原对象，避免修改原数组里的引用
    const newSec = {...sec};
    // 满足条件就清空name
    if (targetId === 0 || sec.id === targetId) {
      newSec.name = '';
    }
    return newSec;
  });
}

小说明 #

map会遍历数组的每一个元素，返回一个全新的数组，原数组完全不会被改动。用{...sec}扩展运算符复制原对象，是为了避免直接修改原数组里的引用类型对象，保证原数据的完整性。

关于你提到的「find后仍需循环」的疑问 #

其实你用find找到指定ID的对象后，直接修改它的name属性就搞定了，根本不需要额外循环！因为find返回的是对象的引用，修改这个引用的属性会直接同步到原数组里。举个例子：

const target = securities.find(s => s.id === 2);
if (target) target.name = ''; // 这行代码直接修改了原数组中id=2的对象的name

这样就完全不用再写循环啦~

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