在javascript中遍历许多数组

Question

[我试图通过Javascript中三个不同的字符串数组进行搜索，寻找一个名称（由用户提交），如果找到该名称，我必须返回它位于哪个数组中。

类似的东西：HTML

let users = ['mario', 'gianni', 'pinotto'];
let admins = ['moana', 'cicciolina', 'selen'];
let mods = ['frodo', 'sam', 'bilbo'];

const form = document.querySelector('form');
const btnNome = document.querySelector('#nome');
let risp = document.querySelector('#risposta');

function search() {

  risp.innerText = '';
  let nome = btnNome.value.trim();

  for (i = 0; i < mods.length; i++) {
    if (nome == mods[i]) {
      risposta.innerText += `${nome} is a moderator`;
      break;
    } else if (i == users.length - 1) {
      for (i = 0; i < admins.length; i++) {
        if (nome == admins[i]) {
          risposta.innerText += `${nome} is an admin`;
          break;
        } else if (i == users.length - 1) {
          for (i = 0; i < users.length; i++) {
            if (nome == users[i]) {
              risposta.innerText += `${nome} is a registered user`;
              break;
            } else if (i == users.length - 1) {
              risposta.innerText += `${nome} NON è registrato`;
              break;
            }
          }
        }
      }
    }
  }
  form.reset();
};

<form>
  <label for="text">Insert name</label>
  <input id="name" type="text" name="text" required/>
  <input type="button" onClick="search()" value="search">
</form>

但是它不起作用，并且会冻结浏览器。我想我误会了创建无限循环的想法...有什么想法吗？谢谢

Answer 1

尝试一下

let users = ['mario', 'gianni', 'pinotto'];
let admins = ['moana', 'cicciolina', 'selen'];
let mods = ['frodo', 'sam', 'bilbo'];

const form = document.querySelector('form');
const btnNome = document.querySelector('#nome');
let risp = document.querySelector('#risposta');

function search() {

  let searchName = btnNome.value;
  risp.innerHTML = 
    checkWithArray(searchName, 'user', users) +
    checkWithArray(searchName, 'admin', admins) +
    checkWithArray(searchName, 'mod', mods);
  console.log(searchName);

  form.reset();
};

function checkWithArray(searchName, title, arr) {
  if (arr.indexOf(searchName) > -1) {
    return `${searchName} is ${title}. `;
  }
  return '';
}

<form>
  <label for="text">Insert name</label>
  <input id="nome" type="text" name="text" required/>
  <input type="button" onClick="search()" value="search">
  <label id="risposta"></label>
</form>