如何在本機反應中從數組中獲取所有匹配值？

Question

如何在本機反應中從數組中獲取所有匹配值？

數組是Sports = [ "Football", "Tennis", "Volleyball", "Squash", ]

我嘗試通過使用下面的 if else 語句來獲取所有匹配值

 useEffect(() => {

        if (((Sports[0] || Sports[1]) || (Sports[2] || Sports[3])) == "Volleyball") { alert('Volleyball') }

        if (((Sports[0] || Sports[1]) || (Sports[2] || Sports[3])) == "Football") { alert('Football') }

        if (((Sports[0] || Sports[1]) || (Sports[2] || Sports[3])) == "Squash") { alert('Squash') }

    }, [Sports])

但是，代碼將在數組的第一個值處停止，這意味着它只運行代碼塊if (((Sports[0] || Sports[1]) || (Sports[2] || Sports[3])) == "Football") {alert('Football') }

如何糾正這種情況，或者是否有另一種方法可以從數組中獲取所有匹配值？

Answer 1

這個：

((Sports[0] || Sports[1]) || (Sports[2] || Sports[3])) == "Volleyball"

評估為：

((true) || (true)) == "Volleyball"

這不是你想要的

這就是你想要的：

Sports[0] == "Volleyball" || Sports[1] == "Volleyball" || Sports[2] == "Volleyball" || Sports[3] == "Volleyball"

但這會更好：

Sports.some(sport => sport == "Volleyball")

Answer 2

你在你的代碼中做什么真的是誤導，你想要的是

如何在數組中找到匹配的值？

let query = 'Tennis';

let Sports = [ "Football", "Tennis", "Volleyball", "Squash", ];

let result = Sports.find(sportName => sportName == query);
let resultIndex = Sports.findIndex(sportName => sportName == query);

if(result) {
  // query is found and `result` equals the query
}

if(resultIndex != -1){
  // query is found and resultIndex represents its index
}

if(Sports.some(name => name == query)){
 // query is found but we can't know what is its index
}

為什么你的if條件被破壞了？

因為|| 操作員就像短路一樣工作，選擇它遇到的第一個truthy值

所以

true || false // => true
2 || true // => 2

您會看到如何將非布爾值轉換（強制）為 boolean 然后進行評估，所以

if (
(
(Sports[0] || Sports[1]) || 
(Sports[2] || Sports[3])) == "Volleyball"
) { 
  alert('Volleyball')
}

第一個條件(Sports[0] || Sports[1])等於String || String String || String ，而第一個字符串為真（非空），則返回第一個字符串，即Football ，現在甚至不評估第二個條件(Sports[2] || Sports[3])) == "Volleyball"因為第一個條件得到滿足並且是真實的，所以它被退回

// how these condition can be evaluated 

(Sports[0] || Sports[1]) => 'Football' || 'Tennis'

(Sports[2] || Sports[3])) == "Volleyball" => ('Volleyball' || 'Squash') == 'Volleyball'

當這個巨大的條件被轉換為一個字符串中的一個 if 時會發生什么？

它被轉換為 boolean，所以Boolean('Football') => true所以我們總是在第一個條件中有if(true) ，這就是為什么它總是在第一個if statement中使用該代碼

如果你正在使用react ，如果沒有必要，請不要在useEffect中執行此類邏輯。

檢查是否可以在不使用效果和額外的 state 的情況下計算渲染 function 中的值的存在，以實現可以從現有數據計算或派生的東西。

Answer 3

我認為您的條件寫得不正確：也許更新為：

   if (Sports[0] == "Volleyball" || Sports[1] == "Volleyball" || Sports[2] == "Volleyball" || Sports[3] == "Volleyball") // etc...

雖然這仍然是一個糟糕的解決方案！