JavaScript遍历嵌套对象 找出技能数量最多的用户

你不需要手动逐个写用户名来统计技能长度，通过遍历对象属性的方式就能自动完成全量用户的统计，解决现有代码硬编码、逻辑错误的问题。

现有代码的问题 #

• 硬编码所有用户名来push技能长度，后续用户新增、删除时都要手动改代码，维护成本极高
• 全局数组x会在多次调用方法时重复累加数据，导致最大值计算错误
• 最终返回未定义的变量z，逻辑不完整，无法输出正确结果

可直接运行的循环实现代码 #

核心是用Object.keys()获取用户对象下所有的用户名（属性名），再循环遍历这个用户名数组做对比，全程不需要手动写任何用户名：

const users = {
    Alex: {
      skills: ['HTML', 'CSS', 'JavaScript']
    },
    Asab: {
      skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node']
    },
    Brook: {
      skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux']
    },
    Daniel: {
      skills: ['HTML', 'CSS', 'JavaScript', 'Python']
    },
    John: {
      skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js']
    },
    Thomas: {
      skills: ['HTML', 'CSS', 'JavaScript', 'React']
    },
    Paul: {
      skills: ['HTML', 'CSS', 'JavaScript', 'MongoDB', 'Express', 'React', 'Node']
    }
}

users.getFunction = function() {
  // 获取所有用户属性名（也就是用户名），自动过滤掉方法本身
  const userList = Object.keys(this).filter(key => typeof this[key] !== 'function')
  // 初始化最大值和对应用户，取第一个用户为初始基准
  let maxCount = this[userList[0]].skills.length
  let targetUser = userList[0]

  // 循环遍历所有用户对比技能长度
  for (let i = 1; i < userList.length; i++) {
    const currentUser = userList[i]
    const currentLen = this[currentUser].skills.length
    if (currentLen > maxCount) {
      maxCount = currentLen
      targetUser = currentUser
    }
  }

  // 返回结果，可根据需求调整返回格式
  return {
    name: targetUser,
    skillNumber: maxCount,
    skillList: this[targetUser].skills
  }
}

console.log(users.getFunction())

代码说明 #

• 用Object.keys(this)自动获取users下的所有属性名，不需要手动枚举任何用户名，后续用户数据变动不需要改方法逻辑
• 提前过滤掉自定义的getFunction方法属性，避免读取方法属性时报错
• 单次循环即可完成最大值对比，不需要额外存储所有用户的技能长度数组，运行效率更高
• 运行后最终输出技能最多的用户为Asab，共掌握8项技能

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