」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 常用的 Javascript 陣列方法。

常用的 Javascript 陣列方法。

發佈於2024-07-30
瀏覽:144

Commonly used Javascript Array Methods.

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

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

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

為了簡單起見,我們將重點放在這三點。

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

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

// 陣列方法(回呼(我們要對陣列中的每個項目執行的條件))

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

我們將在我們的範例中使用這個物件陣列。

`常數資料 = [
{
"用戶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

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

版本聲明 本文轉載於:https://dev.to/mosesedges/commonly-used-javascript-array-methods-2pmh?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何在JavaScript對像中動態設置鍵?
    如何在JavaScript對像中動態設置鍵?
    如何為JavaScript對像變量創建動態鍵,嘗試為JavaScript對象創建動態鍵,使用此Syntax jsObj['key' i] = 'example' 1;將不起作用。正確的方法採用方括號:他們維持一個長度屬性,該屬性反映了數字屬性(索引)和一個數字屬性的數量。標準對像沒有模仿這...
    程式設計 發佈於2025-02-07
  • 為什麼我會得到\“ attributeError:module \'enum \'沒有屬性\'intflag \'\” python 3.6.1?
    為什麼我會得到\“ attributeError:module \'enum \'沒有屬性\'intflag \'\” python 3.6.1?
    [ attributeError:module'enum'在python 3.6.1 一個可能的原因是Enum34軟件包的存在,該軟件包提供了與Python 3.4和更早版本的兼容性。但是,在Python 3.6及以後的情況下,不再需要Enum34的實現。要驗證ENUM34是否正...
    程式設計 發佈於2025-02-07
  • 如何使用Python的記錄模塊實現自定義處理?
    如何使用Python的記錄模塊實現自定義處理?
    使用Python的Loggging Module 確保正確處理和登錄對於疑慮和維護的穩定性至關重要Python應用程序。儘管手動捕獲和記錄異常是一種可行的方法,但它可能乏味且容易出錯。 解決此問題,Python允許您覆蓋默認的異常處理機制,並將其重定向為登錄模塊。這提供了一種方便而係統的方法來捕獲...
    程式設計 發佈於2025-02-07
  • 操作員?= Java腳本
    操作員?= Java腳本
    JavaScript 的安全賦值運算符 ?=:簡化異步操作中的錯誤處理 JavaScript 引入了一個新的運算符 ?=,稱為安全賦值運算符。它旨在簡化代碼中的錯誤處理,使代碼更易於閱讀和維護,尤其是在處理 try-catch 錯誤捕獲函數時。 ?= 運算符如何工作? 使用 ?= 運算符時,它...
    程式設計 發佈於2025-02-07
  • 在保持其內容完整時,如何刪除DIV元素?
    在保持其內容完整時,如何刪除DIV元素?
    在保留其元素 display:cottents; display:cottents; cottents;在這種情況下是理想的選擇。它導致元素的孩子出現為父母的直接子女,無視元素本身。當使用CSS網格或其他應該忽略包裝元素的佈局技術時,這是有價值的。 。容器{ 顯示:Flex; } 。一 ...
    程式設計 發佈於2025-02-07
  • 在JavaScript中聲明變量時,為什麼要始終使用\“ var \”?
    在JavaScript中聲明變量時,為什麼要始終使用\“ var \”?
    考慮以下示例:您可能希望此功能返回11;但是,由於“ varaible2 = 6”上的錯別字,它返回了NAN。線。更糟糕的是,該錯別字無意間創建一個全局變量,它具有拼寫錯誤的名稱“ varaible2。因此,強烈建議使用“ var”關鍵字,即使對於全局變量,也建議始終使用“ var”關鍵字來聲明變...
    程式設計 發佈於2025-02-06
  • 如何從大熊貓的大型文本數據集中有效刪除標點符號?
    如何從大熊貓的大型文本數據集中有效刪除標點符號?
    挑戰: 這個問題在處理大型文本數據集時探索了str.replace的幾種性能替代方案: 1。 REGEX.SUB:使用預編譯的Regex模式從RE庫中使用SUB函數。此方法對str.replace進行了重大的性能改進。 2。 str.translate:利用python的str.transl...
    程式設計 發佈於2025-02-06
  • 為什麼使用Firefox後退按鈕時JavaScript執行停止?
    為什麼使用Firefox後退按鈕時JavaScript執行停止?
    導航歷史記錄問題:JavaScript使用Firefox Back Back 此行為是由瀏覽器緩存JavaScript資源引起的。 To resolve this issue and ensure scripts execute on subsequent page visits, Firefox...
    程式設計 發佈於2025-02-06
  • 我如何設計用於存儲全球街道地址的最佳數據庫?
    我如何設計用於存儲全球街道地址的最佳數據庫?
    確定全球街道地址的最佳數據庫設計作為程序員,您會面臨設計數據庫的挑戰來自世界各地。本文探討了實現此目標的可能性,並提供了一種實用方法。 全局地址的常見數據庫結構地址line(x4) 郵政編碼 sub-building house/premise number 簡化數據輸入局部考慮[&&&&&&...
    程式設計 發佈於2025-02-06
  • 我可以將加密從McRypt遷移到OpenSSL,並使用OpenSSL遷移MCRYPT加密數據?
    我可以將加密從McRypt遷移到OpenSSL,並使用OpenSSL遷移MCRYPT加密數據?
    將我的加密庫從mcrypt升級到openssl 問題:是否可以將我的加密庫從McRypt升級到OpenSSL?如果是這樣?使用openssl? 答案:可以使用mcrypt數據加密數據,可以使用openssl。關於如何使用openssl對McRypt進行加密的數據: openssl_decryp...
    程式設計 發佈於2025-02-06
  • 如何在Java列表中有效計算元素的發生?
    如何在Java列表中有效計算元素的發生?
    計數列表中的元素出現在列表 中,在java編程中,列舉列表中列舉元素出現的任務來自列表。為此,收集框架提供了全面的工具套件。 在這種情況下,Batocurrences變量將保持值3,代表動物列表中的“ BAT”出現的數量。 &&& [此方法是簡單的,可以得出準確的結果,使其成為計算列表中元素出現的...
    程式設計 發佈於2025-02-06
  • 如何有效地更新實體框架5中的記錄?
    如何有效地更新實體框架5中的記錄?
    [2 優化實體框架5記錄更新 實體框架5提供了幾種更新數據庫記錄的方法。 該分析比較了三種常見方法,突出了它們的優勢和缺點,以幫助您選擇滿足需求的最佳方法。 方法1:獲取並更新單個屬性 允許對修改哪些屬性進行精確控制。 屬性排除:對於某些屬性(如密碼)不應通過此方法直接更新的方案。 多個查詢:...
    程式設計 發佈於2025-02-06
  • Java是否允許多種返回類型:仔細研究通用方法?
    Java是否允許多種返回類型:仔細研究通用方法?
    在java中的多個返回類型:一個誤解介紹,其中foo是自定義類。該方法聲明似乎擁有兩種返回類型:列表和E。但是,情況確實如此嗎? 通用方法:拆開神秘 [方法僅具有單一的返回類型。相反,它採用機制,如鑽石符號“ ”。 分解方法簽名: :本節定義了一個通用類型參數,E。它表示該方法接受了擴展foo類...
    程式設計 發佈於2025-02-06
  • 我可以在CSS中使用SVG作為偽元素嗎?
    我可以在CSS中使用SVG作為偽元素嗎?
    使用svgs用作pseudo-element content css content properts允許在使用元素之前或之後使用元素插入各種類型的內容偽元素,例如::之前和::之後。但是,對可以包括哪些內容有限制。 可以將svgs用作pseudo-element Content? ,現在可以使...
    程式設計 發佈於2025-02-06
  • 在沒有密碼提示的情況下,如何在Ubuntu上安裝MySQL?
    在沒有密碼提示的情況下,如何在Ubuntu上安裝MySQL?
    在ubuntu 使用debconf-set-selections sudo debconf-set-selections
    程式設計 發佈於2025-02-06

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3