常用的 Javascript 陣列方法。

在這篇文章中，我們將了解常用的 Javascript 陣列方法，這些方法使用迭代和回調函數來實現其功能。

迭代是指重複執行一組語句或程式碼區塊，它允許我們多次執行相同的操作。

簡單來說，回呼是作為參數傳遞給另一個函數的函數定義。

為了簡單起見，我們將專注於這三點。

1. 何時應使用特定的陣列方法。
2. 數組方法傳回什麼。
3. 數組方法的程式碼範例。 **

在繼續之前，讓我們先了解這些陣列方法的結構。

// 陣列方法（回呼（我們要在陣列中的每個項目上執行的條件））

每個陣列方法都是一個接收回呼作為參數的函數，我們在這個回呼中指定要在每個陣列項目上執行的條件。

我們將在我們的範例中使用這個物件數組。

`常數資料 = [
{
“用戶ID”：1，
“用戶名”：“弗朗西斯”，
"message": "嘿，怎麼樣？",
"時間戳": "2024-02-18T12:30:00Z",
"status": "線上",
「訊息已發送」：28，
“角色”：“用戶”，
「密碼」：「293087O7764」

},
{
“用戶ID”：2，
“用戶名”：“摩西”，
"message": "不錯，只是在做一個專案。",
"時間戳": "2024-02-18T12:35:00Z",
"status": "離開",
「訊息已發送」：74，
“角色”：“用戶”，
「密碼」：「675147O2234」
},
{
“用戶ID”：3，
“用戶名”：“Vicky”，
"message": "嘿夥計們！最新的八卦是什麼？",
"時間戳": "2024-02-18T12:40:00Z",
"status": "線上",
「訊息已發送」：271，
"角色": "主持人",
「密碼」：「76352O8069」

},
{
“用戶ID”：4，
"使用者名稱": "初級",
"message": "沒什麼，只是放鬆一下。你呢？",
"時間戳": "2024-02-18T12:45:00Z",
"status": "離線",
「訊息已發送」：125，
“角色”：“管理員”，
「密碼」：「21876O3483」
}
]`

forEach: forEach 當我們想要對所有陣列項目執行條件時使用。 forEach 傳回未定義。

函數 getMessageSent(users){
讓 sumMessageSent = 0;
users.forEach(函數(用戶){
sumMessageSent += user.messageSent;
})
返回 sumMessageSent;
}
getMessageSent(data) // 輸出：498

reduce:reduce 用於將陣列縮減為單一值，例如此陣列 [8, 7, 3] 可以縮減為數字 18。 reducer 傳回單一值。

reducer 函數接受兩個參數，第一個參數是reducer（由總數和目前值組成），第二個參數是initialValue

總計：這通常稱為累加器。我所說的總計是減速器函數的最後一個計算值。

目前指的是單一數組項。在我們的例子中，我們有四個項目（目前）。

initialValue 是我們在第一次呼叫時分配給總計的值。簡單來說 initalValue 是總計的預設值

const getMessageSent = (users) =>; {
return users.reduce((total, current) => Total += current.messageSent, 0)
}

getMessageSent(data) // 輸出：498

filter: 當我們只想收集數組中滿足特定條件的項目時，使用 Array.filter。 array.filter 傳回一個陣列。

const onlineUsers = (用戶) => {
return users.filter(user => user.status === "線上")
}

onlineUsers(data) // 輸出：[object 物件]

find 當我們只想取得第一個滿足回調中定義的條件的陣列 Item 時，使用 Array.find 。 array.find 傳回第一個項目，該項目不是在數組中，而是以項目的格式，在我們的例子中，如果未找到匹配項，則該項目將是一個物件或未定義。

const getUserRole = (users) =>; {
return users.find(user => user.role === "user")
}

getUserRole(data) // 輸出：{userId：1，使用者名稱：'Francis'，訊息：“嘿，怎麼樣？”，時間戳：'2024-02-18T12：30：00Z'，狀態： '在線'，...}

注意如何只傳回第一個符合條件的使用者。

map 當我們想要轉換陣列中的項目時，使用 Array.map。 array.map 傳回滿足回呼條件的轉換項陣列。

const getUserNameAndPass = (users) =>; {
return users.map((user) => {
const userPassCode = user.passCode.slice(-4);
return${user.username} ${userPassCode.padStart(
user.passCode.length,
“★”
)};
});
};

getUserNameAndPass(data)// 輸出:['Francis ★★★★★★★7764', 'Moses ★★★★★★★2234', 'Vicky ★★★★★★8069', 'Junior ★ ★★★★★3483']

every array.every 當我們想要檢查所有陣列項目是否透過我們定義的條件時使用。 array.every 傳回一個布林值。如果所有項目都符合條件，則為 true；如果任何項目不符合條件，則為 false。

const isOnline = data.every(user => dataItem.status === '線上')

console.log(isOnline) // 輸出：false

Some array.some 當我們想要檢查某些數組項目是否通過給定條件時使用。 array.some 傳回一個布林值。如果某些項目通過了條件，則為 true；如果所有項目都通過或失敗，則為 false。

const isOnline = data.every(user => dataItem.status === '線上')

console.log(isOnline) // 輸出：true

這些是一些廣泛使用的陣列方法。

以上是常用的 Javascript 陣列方法。的詳細內容。更多資訊請關注PHP中文網其他相關文章！