为什么“.includes”不适用于我的二维数组？

Lar 发表于 Dev

拉尔

简介：
对于学校，我必须制作一个项目，在其中检查“测试”的答案以及它们是否正确。我们必须使用二维数组和“.includes”函数来做到这一点。

必需的：

必须包含一个“.includes”

我试过的：

在 if 语句的两个数组中删除和添加“i”
Console.log-ing 测试以确保它不是阵列故障
谷歌搜索澳大利亚并返回

好吧，我收到了一些很棒的答案，但是我不明白他们在做什么（即使在研究和谷歌搜索之后）。我已经修改了我的代码，使其更短且更易于阅读。我仍然需要帮助。

我得到的：

代码：

HTML：

<html>
    <head>
        <title>a test</title>
        <script src="script.js" defer></script>
    </head>
    <body>
        <h1>Answer the questions</h1>
        <div>
            <h3>What is the capital of France?</h3>
            <input type="text" name="capFrance" 
 id="capFrance">
            <br>
            <h3>How many legs does a spider have?</h3>
            <input type="number" name="legSpider" id="legSpider">
            <br>
            <h3>What is the biggest lake in the Netherlands?</h3>
            <input type="text" name="lakeNL" id="lakeNL">
            <br>
            <h3>What is a german Car brand?</h3>
            <input type="text" name="gerBrand" id="gerBrand">
            <br>
            <h3>Name an island</h3>
            <input type="text" name="island" id="island">
            <br><br>
            <button onclick="answerChecker()">Check answers! 
</button>
        </div>
    </body>
</html>

JavaScript：

function answerChecker() {
var answersInput = document.querySelectorAll("input");
var rightAnswers = 
    [
        ["Parijs"],
        ["8]", 
        ["Ijselmeer"],
        ["Volkswagen", "Audi", "Opel", "Porsche", "BMW", "Mercedes", 
"Mercedes-Benz"],
        ["Texel", "Vlieland", "Terschelling", "Ameland", 
"Schiermonnikoog"],
    ];

var i;
for (i = 0; i < rightAnswers.length; i++) {
    if (rightAnswers[i].includes(answersInput[i].value) == 
true) {
        answersInput[i].style.backgroundColor = "green";
    } else {
        answersInput[i].style.backgroundColor = "red";
    }
}
}

编辑：我已经将所有内容翻译成英文，我已经交换了一些代码以获得更有效和干净的阅读，并且我已经删除了“旧”代码。

A1r双关语

有变化的工作片段：

["8]", -> ["8"],
var i -> let i
忽略 == true

function answerChecker() {
  var answersInput = document.querySelectorAll("input");
  var rightAnswers = [
    ["Parijs"],
    ["8"],
    ["Ijselmeer"],
    ["Volkswagen", "Audi", "Opel", "Porsche", "BMW", "Mercedes",
      "Mercedes-Benz"
    ],
    ["Texel", "Vlieland", "Terschelling", "Ameland",
      "Schiermonnikoog"
    ],
  ];

  for (let i = 0; i < rightAnswers.length; i++) {
    if (rightAnswers[i].includes(answersInput[i].value)) {
      answersInput[i].style.backgroundColor = "green";
    } else {
      answersInput[i].style.backgroundColor = "red";
    }
  }
}

<html>

<head>
  <title>a test</title>
  <script src="script.js" defer></script>
</head>

<body>
  <h1>Answer the questions</h1>
  <div>
    <h3>What is the capital of France?</h3>
    <input type="text" name="capFrance" id="capFrance">
    <br>
    <h3>How many legs does a spider have?</h3>
    <input type="number" name="legSpider" id="legSpider">
    <br>
    <h3>What is the biggest lake in the Netherlands?</h3>
    <input type="text" name="lakeNL" id="lakeNL">
    <br>
    <h3>What is a german Car brand?</h3>
    <input type="text" name="gerBrand" id="gerBrand">
    <br>
    <h3>Name an island</h3>
    <input type="text" name="island" id="island">
    <br><br>
    <button onclick="answerChecker()">Check answers! 
</button>
  </div>
</body>

</html>

旧答案

最初的问题是您对rightAnswers数组中的不同数据类型不做任何处理。这可以通过多种方式修复，但假设您无法编辑rightAnswers结构。

那么让我们来分析一下你在这里做什么：

for (i = 0; i < yourAnswers.length; i++) {
    if (yourAnswers[i].includes(rightAnswers[i]) == true) {
        answersInput[i].style.backgroundColor = "green";
    } else {
        answersInput[i].style.backgroundColor = "red";
    }
}

您检查用户给出的答案是否与预期答案完全相同（区分大小写）。答案并不总是一段文本，因为其中还有数组，因此您的代码在 5 种情况中的 2 种情况下失败。

让我们添加这种类型的签入：

for (let i = 0; i < yourAnswers.length; i++) {
    const isRightAnswer = typeof rightAnswers[i] === 'string'
        ? yourAnswers[i].includes(rightAnswers[i])
        : rightAnswers[i].includes(yourAnswers[i]);
    answersInput[i].style.backgroundColor = isRightAnswer ? "green" : "red";
}

这将处理rightAnswers数组中的两种类型。

更多说明

我们来看看你使用的数据结构：

var rightAnswers = [
  "Parijs",
  '8',
  "Ijselmeer",
  ["Volkswagen", "Audi", "Opel", "Porsche", "BMW", "Mercedes", "Mercedes-Benz"],
  ["Texel", "Vlieland", "Terschelling", "Ameland", "Schiermonnikoog"],
];

您有 3 个类型的String值和 2 个类型的值Array。因此，当您像这样访问它们时，您会rightAnswers[i]根据类型运行不同的代码。所以这就是我出示typeof支票的原因。

这是的String变体includes()：

yourAnswers[i].includes(rightAnswers[i])

这是的Array变种includes()

rightAnswers[i].includes(yourAnswers[i])

你称之为 atwo dimensional array但一个 truetwo dimensional array是一个只有数组作为孩子的数组。@CarstenMassmann 将您的数组转换为真正的数组，因为处理将变得更加简单，因为您只需担心一种类型。

?:是一个三元运算符，基本上是一个速记if then else

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-08-28

我来说两句

0 条评论

登录后参与评论

上一篇：为什么 jQuery 将单选按钮的值返回为“ON”？如何纠正？

为什么“.includes”不适用于我的二维数组？

为什么“.includes”不适用于我的二维数组？

旧答案

Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

Swift 2.1-对单个单元格使用UITableView

SQL Server中的非确定性数据类型

如何避免每次重新编译所有文件？

Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

HttpClient中的角度变化检测

在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

在Wagtail管理员中，如何禁用图像和文档的摘要项？

通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）

构建类似于Jarvis的本地语言应用程序

Camunda-根据分配的组过滤任务列表

如何了解DFT结果

Embers js中的更改侦听器上的组合框

ggplot：对齐多个分面图-所有大小不同的分面

使用分隔符将成对相邻的数组元素相互连接

PHP Curl PUT 在 curl_exec 处停止

您如何通过 Nativescript 中的 Fetch 发出发布请求？

错误：找不到存根。请确保已调用spring-cloud-contract：convert

应用发明者仅从列表中选择一个随机项一次