首頁 > web前端 > 前端問答 > javascript filter實現

javascript filter實現

PHPz
發布: 2023-05-16 11:53:07
原創
641 人瀏覽過

Javascript中有許多內建函數,filter() 就是其中之一。它的作用是從一個陣列中篩選出符合條件的元素並傳回一個新數組。

filter() 的語法如下:

array.filter(function(currentValue, index, arr), thisValue)
登入後複製

參數說明:

  • #currentValue:陣列中正在處理的目前元素
  • index:目前元素在陣列中的下標
  • arr:正在被處理的陣列
  • thisValue(可選):物件作為函數執行時使用該值作為this(即函數執行上下文)

filter() 方法接受一個函數作為參數,該函數接受三個參數:當前元素,當前元素的索引和整個數組。函數必須傳回布林值,表示目前元素是否符合條件。如果傳回 true,則該元素將保留在新數組中,反之則會被過濾掉。

讓我們來看一個例子,假設有一個陣列儲存了 1 到 10 的整數。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
登入後複製

現在我們要從中篩選出所有大於等於 5 的元素。可以透過 filter() 方法來實現:

const result = numbers.filter(function(number) {
  return number >= 5;
});

console.log(result); // 输出 [5, 6, 7, 8, 9, 10]
登入後複製

上述程式碼中,filter() 函數接收一個傳回值為 true 或 false 的函數。在這個函數中,如果目前元素大於等於 5,則傳回 true。反之,如果目前元素小於 5,則傳回 false。最終,保留了符合條件的元素,即大於等於 5 的元素,以一個新數組的形式傳回。

除了定義一個函數之外,還可以使用箭頭函數簡寫:

const result = numbers.filter(number => number >= 5);

console.log(result); // 输出 [5, 6, 7, 8, 9, 10]
登入後複製

filter() 方法也可以用於陣列中的物件。假設有一個儲存了多個人資訊的陣列。

const people = [
  { name: 'Lucas', age: 25 },
  { name: 'Emma', age: 21 },
  { name: 'Tom', age: 30 },
  { name: 'Jane', age: 18 },
];
登入後複製

現在我們要篩選出年齡大於等於 25 的人。可以透過filter() 方法來實現:

const result = people.filter(function(person) {
  return person.age >= 25;
});

console.log(result); // 输出 [{ name: 'Lucas', age: 25 }, { name: 'Tom', age: 30 }]
登入後複製

同樣的,我們也可以使用箭頭函數簡寫:

const result = people.filter(person => person.age >= 25);

console.log(result); // 输出 [{ name: 'Lucas', age: 25 }, { name: 'Tom', age: 30 }]
登入後複製

在實際開發中,filter() 方法常用於篩選符合條件的數據,如搜尋、過濾、分類等場景。其簡單易用,且可快速實現陣列元素的篩選,可以說是開發中不可或缺的方法之一。

以上是javascript filter實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板