Angular 5组件中遍历对象并批量修剪值的实现方法

嗨，这事儿在Angular 5里处理起来很简单，我给你几种实用的方法，不管是直接修改原对象还是生成新对象都能搞定：

方法1：使用for...in循环直接修改原对象 #

这是最基础的遍历方式，兼容性拉满，还能手动过滤原型链上的属性：

let obj = { "name": " keshav ", "prof": " Engineer " };

for (const key in obj) {
  // 只处理对象自身的属性，避免遍历到原型链上的额外属性
  if (obj.hasOwnProperty(key)) {
    // 只修剪字符串类型的值，避免报错
    if (typeof obj[key] === 'string') {
      obj[key] = obj[key].trim();
    }
  }
}

console.log(obj); // 输出: { name: "keshav", prof: "Engineer" }

方法2：用Object.keys()结合forEach（更简洁） #

Object.keys()只会返回对象自身的可枚举属性，所以不用额外判断hasOwnProperty，代码更清爽：

let obj = { "name": " keshav ", "prof": " Engineer " };

Object.keys(obj).forEach(key => {
  if (typeof obj[key] === 'string') {
    obj[key] = obj[key].trim();
  }
});

方法3：生成新对象（不修改原对象，符合Immutable理念） #

如果不想改动原对象，推荐这种方式，尤其适合Angular中依赖变更检测的场景：

let obj = { "name": " keshav ", "prof": " Engineer " };

// 方式A：用ES2017的Object.entries和Object.fromEntries（需要环境支持或polyfill）
const trimmedObj = Object.fromEntries(
  Object.entries(obj).map(([key, value]) => {
    return [key, typeof value === 'string' ? value.trim() : value];
  })
);

// 方式B：兼容更低版本的写法
const trimmedObj = {};
Object.keys(obj).forEach(key => {
  trimmedObj[key] = typeof obj[key] === 'string' ? obj[key].trim() : obj[key];
});

console.log(trimmedObj); // 新的修剪后的对象，原obj保持不变

封装成通用函数（方便重复使用） #

如果需要频繁处理这类对象，可以把逻辑封装成一个工具函数：

function trimObjectValues(obj: {[key: string]: any}): {[key: string]: any} {
  const trimmedObj = {};
  Object.keys(obj).forEach(key => {
    trimmedObj[key] = typeof obj[key] === 'string' ? obj[key].trim() : obj[key];
  });
  return trimmedObj;
}

// 使用示例
let originalObj = { "name": " keshav ", "prof": " Engineer " };
let cleanedObj = trimObjectValues(originalObj);

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