大于会在数字小于100时返回错误的值。Javascript

Question

这是我的第一个javascript项目，因此我确定这段代码不是很漂亮，并且可以用更好的方式编写，但是除此之外，我遇到了一个我不明白的问题。 我确定这只是我自己做的一个错误，但我只是找不到它。

'>'（大于）运算符可以很好地处理超过100的数字，但是在达到100时会停止工作。出于某种原因，100> 99返回false吗？

到jsbin的链接。 向右移动滑块，然后向左缓慢移动，您将看到它返回“ true”，直到达到100。从那里返回“ false”

https://jsbin.com/vigocu/edit?console,output

function getSliderInput(inputSliderId) {
  var backSwingArray = [100];
  var downSwingArray = [];


  document.querySelector('#' + inputSliderId).addEventListener('input', fillArray , false);

function fillArray() {

  if (isNaN(downSwingArray[downSwingArray.length - 1]) && backSwingArray[backSwingArray.length - 1] < this.value) {
    backSwingArray.push(this.value);
  } else if (downSwingArray[downSwingArray.length - 1] > this.value || isNaN(downSwingArray[downSwingArray.length - 1])){
    console.log('Is ' + downSwingArray[downSwingArray.length - 1] + ' > ' + this.value + ' return ' + (downSwingArray[downSwingArray.length - 1] > this.value));
    downSwingArray.push(this.value);
  } else {
    console.log('Is ' + downSwingArray[downSwingArray.length - 1] + ' > ' + this.value + ' return ' + (downSwingArray[downSwingArray.length - 1] > this.value));
    return;
  }
}
}

Answer 1

value上input元素始终是一个字符串 。 虽然最初不会出现问题，但是当您将this.value与数组中放入的100进行比较时，您可以按原样（作为字符串）将this.value推入数组。 这意味着以后，您将比较该存储的字符串与另一个this.value值，该值也是一个字符串。 如果>任何一个操作数都是数字，它将把另一个操作数强制转换为数字（ +的方式，请参见下文），但是如果两个操作数都是字符串，它将进行词法比较，而不是数字的"100"实际上是< "99"因为"1"是< "9" 。

因此，您想尽早将this.value转换为数字，然后在比较和推入数组时都使用该数字。 您有很多方法可以做到这一点：

• 一元+将要求整个字符串为有效数字，但会将""视为0 ； 还将以0x字符串视为十六进制

   var num = +this.value; // or perhaps var num = this.value === "" ? NaN : +this.value; // or even var str = this.value.trim(); // .trim can be shimmed on obsolete browsers var num = str === "" ? NaN : +str; 

• parseInt(..., 10) （10指定要使用的基数[数字基]）将允许在字符串末尾进行垃圾处理，将""视为NaN ，并将任何以0x字符串视为0 （因为它在第一个无效字符处停止）

   var num = parseInt(this.value, 10); 

• Number(...)做+

   var num = Number(this.value); // or variations above on +