更新字符串的数组比较函数

Question

我正在为测验琐事游戏使用预先编写的代码，我必须将游戏问题选项从数字值更新为字符串。但我并不完全知道在代码中更改什么才能将用户选择与正确答案进行比较。目前，对于数字答案，代码将选择数组中正确选择的数组位置与 correctAnswer 变量进行比较。我最好的猜测是，更改必须发生在底部显示的displayScore函数中。

当前问题对象：

{
question: "What is 2*5?",
choices: [2, 5, 10, 15, 20],
correctAnswer: 2
}

更新后的问题对象将是：

{
question: "Which list contains words that are NOT names of shoe types:"
choices:[   "A. Oxford, jelly, boat, clogs, stiletto, mary jane",
"B. Loafer, gladiator, wedge, mule, platform",
"C. Pump, moccasin, wingtip, sneaker, derby, monk",
"D. Chalupa, dogler, hamster, croonley, frankfurt"],
correctAnswer : "D. Chalupa, dogler, hamster, croonley, frankfurt"
}

目前用于计算正确答案的代码部分是：

//Array containing user choices
var selections = []; 
// Reads the user selection and pushes the value to an array
function choose() {
selections[questionCounter] = +$('input[name="answer"]:checked').val();
}
// Computes score and returns a paragraph element to be displayed
function displayScore() {
var score = $('<p>',{id: 'question'});
var numCorrect = 0;
for (var i = 0; i < selections.length; i++) {
if (selections[i] === questions[i].correctAnswer) {
numCorrect++;
}
}
} 

Answer 1

学分：

正如乔纳斯w在评论中提到的，问题是$().val()之前的+。因为它没有得到任何赞成票或解释，我想我会详细说明：

错误

从输入中检索值时，该值始终为string。初始示例中的正确答案是number.因为您使用===进行比较，所以两者不相等：2 === "2"返回false。

添加+运算符是将值"强制转换"到数字的简短方法。(意见：(许多人不喜欢它，因为它很容易错过，对于初学者来说很难解释。也许更清晰的方法是编写Number(x)或使用parseInt或parseFloat。

问题是，一旦你要求的值是一个string，+运算符将尝试从一个非数字类字符串中做一个数字。结果将是，名称很好，NaN，它代表不是一个数字可以检查是否使用isNaN

即：作品：

const required = 2;
const input = "2";
required === +input; // 2 === 2 -> true

休息：

const required = "Hello world";
const input = "Hello world";
required === +input; // "Hello world" === NaN -> false

如何修复它

结论：删除+将修复基于字符串的答案，但会破坏基于数字的答案。

我的建议是删除+，但请确保您的答案数组包含字符串。(例如，通过使用[2, 3, 4].map(String)或toString进行映射(

其他可能的修复包括：

• 使用displayScore中的==运算符将用户输入与所需值进行比较(不推荐(
• 为数组值的类型添加switch语句，以便为number、string和其他值选择自定义比较方法。
• 按照用户 Bergi 的建议，使用数组中的index而不是值(不过，可能会使question对象更难阅读(

例子

一些可以帮助您了解值之间的差异的示例：

var val = $("input").val();
console.log("typeof val ->", typeof val);
console.log("typeof 2 ->", typeof 2);
console.log("val == 2 ->", val == 2);
console.log("val === 2 ->", val === 2);
console.log("+val === 2 ->", +val === 2);
console.log("Number('2') === 2 ->", Number(val) === 2);
var nonNumericString = "Hello world";
console.log("+'Hello world' ->", +nonNumericString);
var answers = [2, 3, 4];
console.log("'2' in [2, 3, 4] ->", answers.includes(val));
console.log("'2' in [2, 3, 4].map(String) ->", answers.map(String).includes(val));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="2">