在這篇文章中,我們將了解常用的 Javascript 陣列方法,這些方法使用迭代和回調函數來實現其功能。
迭代是指重複執行一組語句或程式碼區塊,它允許我們多次執行相同的操作。
簡單來說,回呼是作為參數傳遞給另一個函數的函數定義。
為了簡單起見,我們將重點放在這三點。
在繼續之前,讓我們先了解這些陣列方法的結構。
// 陣列方法(回呼(我們要對陣列中的每個項目執行的條件))
這些陣列方法中的每一個都是一個接收回呼作為參數的函數,我們在這個回呼中指定要在每個陣列項目上執行的條件。
我們將在我們的範例中使用這個物件陣列。
`常數資料 = [
{
"用戶ID": 1,
“用戶名”:“弗朗西斯”,
"message": "嘿,怎麼樣?",
"時間戳記": "2024-02-18T12:30:00Z",
"狀態": "線上",
「訊息已發送」:28,
“角色”:“用戶”,
「密碼」:「293087O7764」
},
{
"用戶ID": 2,
“用戶名”:“摩西”,
"message": "不錯,只是在做一個專案。",
"時間戳記": "2024-02-18T12:35:00Z",
“狀態”:“離開”,
「訊息已發送」:74,
“角色”:“用戶”,
「密碼」:「675147O2234」
},
{
"用戶ID": 3,
“用戶名”:“Vicky”,
"message": "嘿夥計們!最新的八卦是什麼?",
"時間戳記": "2024-02-18T12:40:00Z",
"狀態": "線上",
「訊息已發送」:271,
"角色": "主持人",
「密碼」:「76352O8069」
},
{
"用戶ID": 4,
"使用者名稱": "初級",
"message": "不多,只是令人放鬆。你呢?",
"時間戳記": "2024-02-18T12:45:00Z",
"狀態": "離線",
「訊息已發送」:125,
“角色”:“管理員”,
“密碼”:“21876O3483”
}
]`
forEach: forEach 當我們想要對所有陣列項目執行條件時使用。 forEach 傳回未定義。
函數 getMessageSent(Fent){
讓 sumMessageSent = 0;
users.forEach(函數(用戶){
sumMessageSent = user.messageSent;
})
返回sumMessageSent;
}
getMessageSent(data) // 輸出:498
reduce:reduce 用於將數組縮減為單一值,例如此數組 [8, 7, 3] 可以縮減為數字 18。 reducer 傳回單一值。
reducer 函數接受兩個參數,第一個參數是reducer(由總數和目前值組成),第二個參數是initialValue
總計:這通常稱為累加器。我所說的總計是減速器函數的最後一個計算值。
目前指的是單一數組項。在我們的例子中,我們有四個項目(目前)。
initialValue 是我們在第一次呼叫時指派給總計的值。簡單來說 initalValue 是 Total
的預設值const getMessageSent = (用戶) => {
return users.reduce((總計, 目前) => 總計 = 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 = (用戶) => {
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.map((user) => {
const userPassCode = user.passCode.slice(-4);
返回${user.username} ${userPassCode.padStart(
用戶.passCode.length,
“★”
)};
});
};
getUserNameAndPass(data)//輸出:['弗朗西斯★★★★★★★7764', '摩西★★★★★★★2234', 'Vicky ★★★★★★★8069', '少年★ ★★★★★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
這些是一些廣泛使用的陣列方法。
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3