JavaScript >> Javascript 文檔 >  >> Tags >> Arrays

使用 Array.find() 方法搜索 JavaScript 數組 [示例]

本教程將向您展示如何使用 Array.find() 在 JavaScript 中搜索數組 方法,並展示一些代碼示例。

JavaScript 數組

數組是一種變量,它保存有序的值列表(或對其他變量的引用),稱為數組元素。每個元素在數組中都有一個位置,稱為索引——並且可以使用該索引進行訪問。

我們有一大堆可以用 JavaScript 數組做的事情。

通過索引訪問數組中的元素很方便,但如果您不知道元素的索引,甚至不知道數組中可能有哪些值,則沒有用。

數組方法

當在 JavaScript 中聲明一個數組變量時,它會被賦予數組類型 . 類型 變量的大小決定了它可以保存什麼樣的值,以及可以用它做什麼。

方法是該數組類型可用的函數,當被調用時,對調用它們的變量或使用它們做一些事情。

使用 Array.find() 方法搜索數組

Array.find() 方法將搜索調用它的數組,通過為數組中的每個元素運行該函數來返回與給定搜索函數匹配的值。語法如下:

array.find(function(element, index, array){
    // Code to test each element in the array for a search match goes here
    // It should return TRUE for a match or FALSE otherwise
}, thisArg)

注意:

  • 數組 可以是包含任何值的任何數組變量
  • 函數(元素、索引、數組){} 是一個必須返回布爾值的函數,該值確定數組中的元素是否被認為是搜索的匹配
    • 元素索引數組 是在搜索函數中可用的變量,它們引用被檢查的當前元素、當前元素的索引和數組本身
  • thisArg 確定 this 在搜索函數中指向的變量
  • find() 將返回第一個 搜索功能的元素 返回 TRUE 值並停在那裡

示例

您可以根據可以表示為返回布爾值的 JavaScript 函數的任何條件搜索包含任何類型值的數組。

搜索字符串數組

下面的示例顯示瞭如何在字符串數組中搜索第一個具有第一個字母 f 的元素 :

var pets = ['cat', 'dog', 'fish', 'parrot', 'frog'];

var found = pets.find(function(element, index, array){
    if(element[0] == 'f') return true;
    else return false;
});

console.log(found);

由於只返回第一個匹配項,因此將以下內容輸出到控制台:

fish

搜索數字數組

如果不使用,並非所有參數都必須提供。此外,JavaScript 箭頭函數可用於簡化代碼:

var numbers = [1, 5, 7, 3, 19, 6];

var found = numbers.find(element => element > 15);

console.log(found);

上面,箭頭函數用於查找數組中第一個值大於 15 的值 .

搜索對像數組並使用多個條件

搜索函數可以在 find() 調用之外聲明 方法,以便在不同的搜索中多次使用而不重複。

也可以定義多個搜索條件。您的搜索函數可以任意複雜,只要它返回一個布爾值 價值。

const cakes = [
    {name: 'black forest', quantity: 2},
    {name: 'chocolate', quantity: 0},
    {name: 'banana', quantity: 5},
    {name: 'baklava', quantity: 6},
    {name: 'vanilla', quantity: 1}
];

function searchCakes(cake) {
    return cake.name[0] == 'b' && cake.quantity > 3;
}

console.log(cakes.find(searchCakes));

這將返回與 searchCakes() 中的兩個搜索條件匹配的第一個結果 功能:

{ "name": "banana", "quantity": 5 }

Tutorial JavaScript 教程
  1. 如何有條件地導入 ES6 模塊?

  2. 如何使用 React Context API 構建 React Native、Expo 和 Firebase 應用

  3. 反向開關?

  4. if (typeof data !==‘string’) throw new error(errorMessage);

  5. 使用 React 構建有趣的翻譯應用程序

  6. 使用javascript獲取瀏覽器下載路徑

  7. 我如何阻止 WordPress 評論垃圾郵件

  1. React-bootstrap Navbar 品牌徽標未呈現

  2. React 中的 HTML5 表單驗證

  3. 簡單代碼不同於簡單代碼:Elm vs JavaScript

  4. 需要 React + GraphQL 全棧教程。

  5. Javascript 將日期更改為 (dd/mm/yyyy) 格式

  6. 如何使用 JavaScript 自動單擊瀏覽器按鈕?

  7. 我為什麼要學習 JavaScript

  1. 重新創建 Google Pixel 3a 網站相機功能演示

  2. 存儲權限(再次)~ AoaH 十

  3. dev.to 在 Typeorm 中使用 React-Node、Apollo-Cache、apollo-link-token-refresh、One-2-Many 關係進行克隆 [第 3 部分]

  4. 在 Vue 2 中使用 Google Maps API 進行位置選擇器