javascript - 使用 for of 循环和 if..else 语句迭代和检查数组

Question

我正在尝试创建一个包含名称的数组，然后使用 for of 循环对它们进行迭代，然后使用 if else 语句检查迭代。我的代码在下面，但是没有用，我没有看到任何结果。我试过 for in，同样糟糕的结果。在 Html 文件中，我有一个带有演示 ID 的段落和一个带有迭代和检查数组功能的按钮

function availableName() {

 const check = document.getElementById('userID');
 const takenNames=['manuel','remus','manuel-remus','tomi','mirel'];
 const reservedNames=['cristina','angela','rusanda','costantin'];
 const givenNames=[...takenNames, ...reservedNames];

  for (givenName of givenNames) {
  if (givenName === check) {
      sayMessage=givenName +"Not available!";
 }
 else {
   sayMessage= givenName +"Available";
 }

 }
document.getElementById("available").innerHTML= sayMessage;
 };

Answer 1

首先，您需要使用 .value 获取 input 的值，如注释中所述。

然后要检查它是否存在于 array 中，您可以使用 Array 之一的内置方法，比如 includes() 或 indexOf() .

你的代码应该是这样的:

function availableName() {
  const check = document.getElementById('userID').value;
  const takenNames = ['manuel', 'remus', 'manuel-remus', 'tomi', 'mirel'];
  const reservedNames = ['cristina', 'angela', 'rusanda', 'costantin'];
  const givenNames = [...takenNames, ...reservedNames];

  if (givenNames.indexOf(check) > 0) {
    sayMessage = check + " Not available!";
  } else {
    sayMessage = check + " Available";
  }
  document.getElementById("available").innerHTML = sayMessage;
};

演示:

这是一个演示:

function availableName() {
  //const check = document.getElementById('userID').value;
  const check = "cristina";
  const takenNames = ['manuel', 'remus', 'manuel-remus', 'tomi', 'mirel'];
  const reservedNames = ['cristina', 'angela', 'rusanda', 'costantin'];
  const givenNames = [...takenNames, ...reservedNames];

  if (givenNames.indexOf(check) > 0) {
    sayMessage = check + " Not available!";
  } else {
    sayMessage = check + " Available";
  }
  document.getElementById("available").innerHTML = sayMessage;
};

availableName();

<div id="available"></div>