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完成該工作，但是我想解釋一下為什么您的最初嘗試可能看起來很奇怪並弄清楚了正在發生的事情。