filter() 方法用於過濾陣列中的值,map() 方法用於根據舊數組的每個值將新值對應到另一個陣列。
有時,我們需要同時使用filter()和map()方法。例如,我們想要從數組中過濾掉所有正數,並將它們的對數值映射到新數組
在開始本教學之前,我們先來看看filter()和map()方法的介紹。在本教程中,我們將學習如何使用 JavaScript 在陣列上同時使用映射和過濾方法。
使用者可以依照下面的語法來使用JavaScript的filter()方法。
array.filter((element, index, self) => { // write a condition to filter values. // based on the filtering condition, return a boolean value to include in the filtered array. })
在上面的語法中,我們將回呼函數作為filter()方法的參數傳遞。
使用者可以依照下面的語法來使用JavaScript的map()方法。
array.map((element, index, self) => { // perform some action on the element of the array // return element for a new array })
在上面的語法中,我們需要從map()方法的回呼函數傳回陣列元素。
element – 使用 filter() 方法迭代數組時,它是數組的當前元素。
index – 它是陣列中元素的索引。
self – 它本身就是一個陣列。
本節將教我們在單一陣列上一起使用filter()和map()方法。
使用者可以依照下列語法一起使用map()和filter()方法。
let logarithmic_values = array.filter((element, index, self) => { // filtering condition }) .map((element, index, self) => { // return value from map method })
在上面的語法中,我們首先對陣列使用了filter()方法,然後使用了map()方法。
在下面的範例中,陣列包含正數和負數。我們以數組為參考,並呼叫數組上的 filter() 方法來過濾數組中的所有正值。在filter()方法的回呼函數中,如果數字大於零,我們會傳回true;否則錯誤。
之後,我們使用map()方法並傳回每個過濾元素的對數。使用者可以看到 logarithmic_values 陣列僅包含六個值,因為我們已經刪除了過濾數組中的所有負值。
Using the array.map() and array.filter() methods together in JavaScript
在下面的範例中,我們建立了一個物件數組,數組中的每個物件都包含員工 ID、工作年限和工資。
之後,我們使用filter()方法過濾了所有經驗超過3年的員工。接下來,我們使用map()方法將所有員工的薪資增加50%,並將新薪資儲存在new_salaries陣列中。
在產出中,使用者可以初步觀察增量後的總薪資。
Using the array.map() and array.filter() methods together in JavaScript
使用者透過各種範例學習如何一起使用filter()和map()方法。在第一個範例中,我們將 filter() 和 map() 方法與數字陣列一起使用。在第二個範例中,我們也學習如何將 filter() 和 map() 方法與物件陣列一起使用。
以上是如何使用 JavaScript 在陣列上同時使用映射和篩選器?的詳細內容。更多資訊請關注PHP中文網其他相關文章!