JavaScript-include（）-检查数组中是否包含多个元素

Question

希望能对您有所帮助。 我的项目中有一个空数组，当按下某些按钮时会填充一个空数组（使用push（））。 我想知道数组中何时有一组特定的元素。

在下面的代码中，似乎3个元素都在数组中，所以它似乎工作了，因此它显示“是”。 如果我取出最后一个元素（“ TR”），它将打印“ nope”。 但是，如果我删除前两个元素中的任何一个，它将显示“是”。 它似乎只关注include（）函数中的最后一个元素。

有什么办法可以包含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

使用数组的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");
}

Answer 3

尽管以上答案显示了获得所需结果的方法，但令我惊讶的是，没有人解决您最初尝试失败的原因。 这涉及JavaScript遵循的一些基本规则：函数的调用方式，逻辑运算符评估和运算符优先级。

调用arr.includes（）

首先，您具有一个includes单个字符串参数的函数includes 。 您已给此参数指定了表达式而不是字符串，因此它将对表达式进行求值。 如果求值产生一个字符串，它将返回该值。 如果产生不同的类型，它将尝试将结果转换为字符串。 因此，要清除它，您没有给它寻找3个字符串，而是提供了一个将被求值并成为您要寻找的字符串的表达式。

逻辑运算符评估

但是那个字符串的值是多少？ 在JavaScript中，逻辑运算符的工作方式可以缩短并返回要评估的值之一。 在大多数情况下，我们将比较布尔值，并从评估中得出true还是false ，但是我们在这里使用的是字符串，而不是布尔。 JavaScript中的字符串可以评估为“真”或“虚假”，前者是任何具有长度的字符串，而后者是没有长度的字符串（空字符串）。 考虑到这一点，逻辑AND &&运算符的快捷方式功能将查看表达式中的第一个值，如果该值是“ falsy”，它将返回该值。 如果该值是“ truthy”，它将查看表达式的另一侧并返回其值。

MDN很好地描述了这种逻辑。 给定expr1 && expr2这是逻辑：

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

订单优势

最后，关于顺序优先权的注释。 逻辑AND &&的优先级相同，因此您的表达式将从左到右读取。 例如，如果您的表达是"TL" || "TM" && "TR" "TL" || "TM" && "TR"首先将评估"TM" && "TR"表达式，因为逻辑AND &&比逻辑OR ||具有更高的优先级。 。

评估你的表情

了解了所有这些信息后，我们可以区分您的表情在做什么：

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

同样，请在此处将其他选项之一标记为答案。 遍历要在数组中搜索的值是您要寻找的东西，然后编写自己的循环或使用reduce完成该工作，但是我想解释一下为什么您的最初尝试可能看起来很奇怪并弄清楚了正在发生的事情。