JavaScript - include() -检查数组中是否有多个元素

Question

希望你能帮上忙。我的项目中有一个空数组，当某些按钮被按下时，它就会填满(使用push())。我想知道某一组元素何时出现在数组中。

在下面的代码中，它似乎起作用了，3个元素都在数组中，所以它输出'yes‘。如果我取出最后一个元素("TR")，它会输出'nope‘。但是，如果我去掉前两个元素中的任何一个，它都会打印“yes”。它似乎只关注includes()函数中的最后一个元素。

有没有办法使用include()或类似的方法，检查是否所有元素都在我的数组中？请记住，数组可以有更多的元素，并且它们不会被排序。

提前谢谢。

var arr = ["TL", "TM", "TR"];

if (arr.includes("TL" && "TM" && "TR")){
    console.log("yes");
} else {
    console.log("nope");
}

Answer 1

问题出在if语句中，因为include()根据字符串参数返回一个布尔值。一种更好的方法是使用下面这样的代码：

if(arr.includes("TL") && arr.includes("TM") && arr.includes("TR")) {
  console.log("yes");
}

如果你的数组中有很多元素，我会推荐更多的元素，比如：

var flag = true;
for(i=0; i<arr.length; i++) {
  if(!arr.includes(arr[i])) {
    flag = false;
  }
}
if(flag) {
  console.log("yes");
}

Answer 2

尽管上面的答案显示了获得您想要的结果的方法，但我感到惊讶的是，没有人解决您最初的尝试失败的原因。这涉及到JavaScript遵循的一些基本规则:如何调用函数、逻辑运算符求值和运算符优先顺序。

调用arr.includes()

首先，您有一个函数includes，它只接受一个字符串参数。您为该参数提供了一个表达式，而不是一个字符串，因此它将计算该表达式。如果求值产生一个字符串，它将返回该值。如果它生成不同的类型，它将尝试将结果转换为字符串。所以为了清楚起见，你没有给它3个要查找的字符串，而是一个表达式，它将被计算并成为你正在寻找的字符串。

逻辑运算符求值

在JavaScript中，逻辑运算符的工作方式可以简化并返回一个被计算的值。在大多数情况下，我们会比较布尔值，并从计算中得到true或false，但这里我们使用的是字符串，而不是布尔值。JavaScript中的字符串可以评估为"truthy“或"falsy"，前者是具有长度的任何字符串，后者是没有长度的字符串(空字符串)。考虑到这一点，逻辑和&&运算符的快捷功能将查看表达式中的第一个值，如果该值为"falsy“，它将返回该值。如果该值为“the”，它将查看表达式的另一端并返回它的值。

MDN很好地描述了这一逻辑。给定expr1 && expr2，逻辑是这样的：

如果可以转换为false，则

返回expr1；否则返回expr2。因此，当与布尔值一起使用时，如果两个操作数都为true，则&&返回true；否则返回false。

顺序优先顺序

最后，关于顺序优先的注意事项。逻辑与&&本身具有相同的优先级，因此您的表达式将从左到右读取。如果您的表达式是"TL" || "TM" && "TR"，那么将首先计算"TM" && "TR"表达式，因为逻辑与&&比逻辑或||具有更高的优先级。

计算你的表达式

了解了所有这些，我们可以分析您的表达式正在做什么：

"TL" && "TM" && "TR"由所有逻辑与运算符组成，因此我们将从左到右从"TL" && "TM"开始阅读。因为"TL“是一个真实的字符串，所以表达式的另一边返回的是"TM”。下一个表达式是"TM" && "TR"，其中"TM“是一个真值，因此返回"TR”。最后，includes函数检查数组中是否存在"TR“的值，并最终返回true。

同样，请在此处标记其他答案中的一个。循环遍历您想要在数组中搜索的值就是您想要的，编写您自己的循环或使用reduce就可以做到这一点，但我想解释一下为什么您的初始尝试可能看起来很奇怪，并弄清楚发生了什么。

Answer 3

这可以使用数组的reduce方法干净利落地完成。以下是如何通过您的示例完成此操作：

var arr = ["TL", "TM", "TR"];
var fails = ["TL"] // This will return false
var succeeds = ["TL", "TM", "TR"] // This will return true
var includesAll = (array_to_check) => arr.reduce(
    (accumulator, current) => accumulator && array_to_check.includes(current),
    true
)

if (includesAll(succeeds)){
    console.log("yes");
} else {
    console.log("nope");
}