本文详解 javascript 中使用数组存储多用户凭证时，因循环逻辑不当导致 `if` 和 `else` 分支同时触发的典型问题，并提供三种专业、健壮的解决方案：优化传统 for 循环、使用 `for...of` 语句，以及推荐的函数式写法 `array.prototype.some()`。

你遇到的问题非常典型：点击登录按钮后，既弹出“Login Successful”，又弹出“Invalid information”，甚至只有第一个用户（Peregrin）能成功登录，而第二个（Meriadoc）看似无效——这并非数据问题，而是控制流逻辑缺陷所致。

? 问题根源分析

原始代码中，for 循环遍历整个 userCred 数组，每次迭代都独立执行判断：

for(i = 0; i < userCred.length; i++){
  if(username == userCred[i].username && password == userCred[i].password){    
    alert('Login Successful');
    window.location.assign('bank.html');
  } else {
    alert('Invalid information'); // ❌ 错误：只要当前项不匹配就立即报错！
  } 
}

这意味着：

• 若用户输入的是 Meriadoc / Elevenses，循环第 0 次（检查 Peregrin）会进入 else，弹出“Invalid information”；
• 第 1 次才匹配成功，再弹“Login Successful”——两个 alert 必然共存；
• 更严重的是，window.location.assign() 后代码本应终止，但 else 已在前一轮执行，无法撤销；
• 此外，i 未用 let 声明，属于隐式全局变量，在严格模式下会直接报错。

✅ 正确解法一：提前退出 + 统一错误处理（推荐初学者）

将 else 移出循环，仅在全部遍历完毕仍未匹配时提示错误，并用 return 立即终止函数：

function loginUser() {
  const username = document.getElementById('user').value.trim();
  const password = do
cument.getElementById('password').value.trim();

  for (let i = 0; i < userCred.length; i++) { // ✅ 显式声明 let i
    const user = userCred[i];
    if (username === user.username && password === user.password) {
      alert('Login Successful');
      window.location.assign('bank.html');
      return; // ✅ 匹配成功，立刻退出函数，不再继续循环
    }
  }
  alert('Invalid information'); // ✅ 仅当循环结束仍未找到才执行
}

? 提示：添加 .trim() 防止空格导致的误判；使用 === 替代 == 避免隐式类型转换风险。

✅ 正确解法二：语义更清晰的 for...of 循环

无需索引时，for...of 更简洁安全，且自动块级作用域：

function loginUser() {
  const username = document.getElementById('user').value.trim();
  const password = document.getElementById('password').value.trim();

  for (const user of userCred) { // ✅ 直接遍历对象，无索引管理负担
    if (username === user.username && password === user.password) {
      alert('Login Successful');
      window.location.assign('bank.html');
      return;
    }
  }
  alert('Invalid information');
}

✅ 正确解法三：函数式编程 —— 使用 some()（最推荐）

Array.prototype.some() 天然适合“是否存在满足条件的元素”场景，语义明确、代码精简、无副作用：

function loginUser() {
  const username = document.getElementById('user').value.trim();
  const password = document.getElementById('password').value.trim();

  const isValid = userCred.some(user => 
    user.username === username && user.password === password
  );

  if (isValid) {
    alert('Login Successful');
    window.location.assign('bank.html');
  } else {
    alert('Invalid information');
  }
}

✅ 优势：

• 一行判定，逻辑一目了然；
• 自动短路（找到首个匹配即停止遍历）；
• 无手动索引/循环控制，杜绝 i 作用域错误；
• 符合现代 JavaScript 最佳实践。

⚠️ 重要注意事项

• 永远不要在生产环境使用 alert() 进行认证反馈：它阻塞 UI、体验差，且无法样式定制。应改用 DOM 元素（如 ）动态显示提示。
• 密码明文存储极其危险：示例仅为教学简化。真实项目中，前端绝不应硬编码密码，需由后端通过 HTTPS 校验 Token 或 Session。
• 增加基础校验：检查输入是否为空、长度是否合理，提升用户体验。
• 启用严格模式：在脚本顶部添加 'use strict';，可提前捕获 i 未声明等潜在错误。

掌握这三种写法，你不仅能修复当前 Bug，更能建立对循环控制流、作用域和数组方法的深层理解——这是前端开发的基石能力。