Javascript .map() 获取数组元素时出现问题

Question

我最初写这段代码是为了防止输入字段提交小于 0 的值：

if (
    inflationArray[2].value < 0 ||
    inflationArray[1].value < 0 ||
    inflationArray[0].value < 0
  ) {
    alert("Can't input negative value");
    return;
  }

它看起来不像是最好的方法，所以我尝试用这段代码替换它：

if (inflationArray.map((x) => x.value < 0)) {
    alert("Can't input negative value");
  }

为什么不一样，是我没有理解正确.map()吗？
我唯一的结论是，这可能是因为我写的第二种方式不等于第一种方式（如果我是正确的），但是：

if (
    inflationArray[2].value < 0 &&
    inflationArray[1].value < 0 &&
    inflationArray[0].value < 0
  ) {
    alert("Can't input negative value");
    return;
  }

Answer 1

您正在寻找 Array.prototype.every() 或 Array.prototype.some()。

这将测试每个 array-element 的值是否大于零，如果是 return true（如果不是，则 false）：

const check = document.querySelector('button');

check.addEventListener('click', (e) => {
  const inflationArray = [...document.querySelectorAll('input')].map(
      (input) => parseFloat(input.value) || -1
    ),
    check = inflationArray.every((value) => value > 0);
    section = e.currentTarget.closest('section');
  section.classList.toggle('valid', check);
  section.classList.toggle('invalid', !check);

});

*,
::before,
 ::after {
  box-sizing: border-box;
  font: normal 400 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

section {
  border: 2px solid #000;
  display: grid;
  gap: 1em;
  width: clamp(100px, 50vw, 500px);
  margin-block: 1em;
  margin-inline: auto;
  padding: 0.5em;
}

label {
  display: grid;
  gap: 1em;
  grid-template-columns: max-content 1fr;
}

.valid {
  border-color: lime;
}

.invalid {
  border-color: red;
}

.guidance {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.invalid .guidance {
  opacity: 1;
}

<section>
  <label>Enter value for A: <input type="number" id="a" value="-1"></label>
  <label>Enter value for B: <input type="number" id="b" value="-1"></label>
  <label>Enter value for C: <input type="number" id="c" value="-1"></label>
  <p class="guidance">Please ensure all values are positive.</p>
  <button type="button">Check</button>
</section>

或者，这可以测试任何 array-element 的值是否为 less-than 零；和 return true 如果有一个或多个（false 如果 none 小于零）：

const check = document.querySelector('button');

check.addEventListener('click', (e) => {
  const inflationArray = [...document.querySelectorAll('input')].map(
      (input) => parseFloat(input.value) || -1
    ),
    check = inflationArray.some((value) => value < 0),
    section = e.currentTarget.closest('section');
  section.classList.toggle('valid', !check);
  section.classList.toggle('invalid', check);

});

*,
::before,
 ::after {
  box-sizing: border-box;
  font: normal 400 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

section {
  border: 2px solid #000;
  display: grid;
  gap: 1em;
  width: clamp(100px, 50vw, 500px);
  margin-block: 1em;
  margin-inline: auto;
  padding: 0.5em;
}

label {
  display: grid;
  gap: 1em;
  grid-template-columns: max-content 1fr;
}

.valid {
  border-color: lime;
}

.invalid {
  border-color: red;
}

.guidance {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.invalid .guidance {
  opacity: 1;
}

<section>
  <label>Enter value for A: <input type="number" id="a"></label>
  <label>Enter value for B: <input type="number" id="b"></label>
  <label>Enter value for C: <input type="number" id="c"></label>
  <p class="guidance">Please ensure all values are positive.</p>
  <button type="button">Check</button>
</section>

参考文献：

Javascript .map() 获取数组元素时出现问题

Javascript .map() issue when taking array elements

javascript

arrays

if-statement