JavaScript:如何檢查陣列是否包含特定值?


在本文中,我們將討論陣列的構造。建立陣列後,我們將透過檢查特定值是否存在於陣列中來查詢該值。

但在檢查任何特定值之前,讓我們看看如何在 JavaScript 中建立陣列。

語法

let array = [arrayItem1, arrayItem2, arrayItem3 ...]

建立陣列後,讓我們看看如何從陣列中搜索特定值。有多種方法可以搜尋元素是否存在於陣列中。下面我們將討論這些方法。

方法一

這是檢查陣列中是否存在值的一種傳統方法。

在這種方法中,我們將使用 for 迴圈遍歷陣列的所有值,並檢查每個值與需要搜尋的值是否相等。

找到值後,我們將中斷迴圈並返回 true。否則,如果迭代完成而沒有找到值,我們將返回 false。

示例 1

在下面的示例中,我們將遍歷值以檢查所需的值是否存在於陣列中。

# index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>ncode & Decode URL</title>
</head>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <script>
      let employees_array = [
         "steve",
         "mark",
         "mike",
         "bill",
         "henry",
         "orion",
      ];
      let valueChecker = (value) => {
         for (let i = 0; i < employees_array.length; i++) {
            let current_value = employees_array[i];
            if (value === current_value) {
               return value + " is present at index: " + i;
            }
         }
         return value + " is not included in this array..";
      };
      console.log(valueChecker("mike"));
      console.log(valueChecker("casey"));
      console.log(valueChecker("henry"));
   </script>
<body>
</html>

輸出

結果可以在控制檯中找到 -

方法二

除了傳統方法外,我們還可以使用 JavaScript 提供的 includes() 方法。

includes() 方法檢查特定值,並返回 true 或 false。如果陣列中存在該值,則返回 true,否則返回 false。

示例 2

在下面的示例中,我們將使用 includes() 方法來檢查值是否存在於陣列中。

# index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Encode & Decode URL</title>
</head>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <script>
      let employees_array = [
         "steve",
         "mark",
         "mike",
         "bill",
         "henry",
         "orion",
      ];
      console.log("Is Mark Exists: " +
      employees_array.includes("mark"));
      console.log("Is Orion Exists: " +
      employees_array.includes("orion"));
      console.log("Is Michael Exists: " +
      employees_array.includes("michael"))
   </script>
</body>
</html>

輸出

請檢視控制檯以查詢結果 -

更新於:2022年4月22日

194 次檢視

啟動您的職業生涯

完成課程後獲得認證

開始學習
廣告
© . All rights reserved.