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

常用的 Javascript 陣列方法。

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

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]刪除
最新教學 更多>
  • 現在已經九月了嗎?
    現在已經九月了嗎?
    大家早安,MonDEV快樂☕ 我們已經全面回歸,而九月重返 PC 的原因之一就是 Preptember! 那些從早期就開始關注時事通訊的人以及那些關注開源世界的人已經知道了,但在10 月份有一個持續一個月的活動,即Hacktoberfest;如果我們願意的話,我們可以將其定義為開源節,邀請我們所有...
    程式設計 發佈於2024-11-02
  • 為什麼錯誤的 return 語句會導致 for 迴圈中程式過早終止?
    為什麼錯誤的 return 語句會導致 for 迴圈中程式過早終止?
    for 循環中錯誤的返回語句在此編程問題中,用戶在創建允許用戶輸入三種動物的程序時遇到困難。該程式旨在用包含名稱、動物類型和年齡的 Pet 物件填入清單。然而,在輸入第一個動物後,程式突然結束。 經過分析,問題很明顯出在 make_list 函式中 return 語句的位置。 for 迴圈重複實作程...
    程式設計 發佈於2024-11-02
  • Item 避免使用其他類型更合適的字串
    Item 避免使用其他類型更合適的字串
    1。避免使用字串替代其他資料類型: 字串旨在表示文本,但經常被誤用來表示數字、枚舉或聚合結構。 如果資料本質上是數字,請使用 int、float 或 BigInteger 等類型,而不是 String。 String age = "30"; // incorreto int age = 30;...
    程式設計 發佈於2024-11-02
  • 如何使用sync.WaitGroup防止Go並發死鎖?
    如何使用sync.WaitGroup防止Go並發死鎖?
    解決 Goroutines 死鎖在這種情況下,您在 Go 並發代碼中遇到了死鎖錯誤。讓我們深入研究這個問題並提供一個有效的解決方案。 該錯誤是由於生產者和消費者的行為不匹配而發生的。在生產者函數中實現的生產者在有限的時間內在通道 ch 上發送值。然而,存在於主函數中的消費者無限期地運行,無休止地嘗試...
    程式設計 發佈於2024-11-02
  • 如何處理文字檔案中的 Unicode 文字:無錯誤編寫的完整指南
    如何處理文字檔案中的 Unicode 文字:無錯誤編寫的完整指南
    文本文件中的Unicode 文本:無錯誤寫作綜合指南從Google 文件中提取的編碼資料可能具有挑戰性,尤其是當遇到需要轉換為HTML 使用的非ASCII 符號時。本指南提供了處理 Unicode 文字並防止編碼錯誤的解決方案。 最初,在資料檢索期間將所有內容轉換為 Unicode 並將其寫入檔案似...
    程式設計 發佈於2024-11-02
  • EchoAPI 與 Insomnia:結合實例進行綜合比較
    EchoAPI 與 Insomnia:結合實例進行綜合比較
    作为一名全栈开发人员,我知道拥有一流的工具来调试、测试和记录 API 是多么重要。 EchoAPI 和 Insomnia 是两个出色的选项,每个选项都有自己独特的特性和功能。让我带您了解这些工具,比较它们的功能和优点,给您一些实际示例,并帮助您决定何时使用 EchoAPI 或 Insomnia。 ...
    程式設計 發佈於2024-11-02
  • 出發時間和持續時間|程式設計教學
    出發時間和持續時間|程式設計教學
    介紹 本實驗旨在測試您對 Go 的時間和持續時間支援的理解。 時間 下面的程式碼包含如何在 Go 中使用時間和持續時間的範例。但是,程式碼的某些部分遺失了。您的任務是完成程式碼,使其按預期工作。 Go程式語言基礎知識。 熟悉 Go 的時間和持續時間支援。 $ ...
    程式設計 發佈於2024-11-02
  • 起重面試問答
    起重面試問答
    1. JavaScript 中什么是提升? 答案: 提升是执行上下文创建阶段为变量和函数分配内存的过程。在此过程中,为变量分配了内存,并为变量分配了值 undefined。对于函数,整个函数定义存储在内存中的特定地址,并且对其的引用放置在该特定执行上下文中的堆栈上。 ...
    程式設計 發佈於2024-11-02
  • 了解 JavaScript 中的文件物件模型 (DOM)
    了解 JavaScript 中的文件物件模型 (DOM)
    你好,神奇的 JavaScript 開發者? 瀏覽器提供了一個稱為文檔物件模型 (DOM) 的程式設計接口,它允許腳本(特別是 JavaScript)與網頁佈局進行互動。網頁的文檔物件模型 (DOM) 是一種分層樹狀結構,它將頁面的元件排列成對象,由瀏覽器在載入時建立。借助此範例,...
    程式設計 發佈於2024-11-02
  • 開始使用 SPRING BATCH 進行編程
    開始使用 SPRING BATCH 進行編程
    Introduction Dans vos projets personnels ou professionnels, Il vous arrive de faire des traitements sur de gros volumes de données. Le traite...
    程式設計 發佈於2024-11-02
  • 使用 CSS 讓您的 Github 個人資料脫穎而出
    使用 CSS 讓您的 Github 個人資料脫穎而出
    以前,自訂 Github 個人資料的唯一方法是更新圖片或更改名稱。這意味著每個 Github 設定檔看起來都一樣,自訂它或脫穎而出的選項很少。 從那時起,您可以選擇使用 Markdown 建立自訂部分。您可以包括您的履歷、您的興趣和嗜好,讓您的個人資料反映您的身分。這是任何人在訪問您的個人資料時看...
    程式設計 發佈於2024-11-02
  • TypeScript 實用程式類型:增強程式碼可重複使用性
    TypeScript 實用程式類型:增強程式碼可重複使用性
    TypeScript 提供內建實用程式類型,讓開發人員有效地轉換和重複使用類型,讓您的程式碼更加靈活和 DRY。在本文中,我們將探討關鍵實用程式類型,例如 Partial、Pick、Omit 和 Record,以協助您將 TypeScript 技能提升到新的水平。 Partial:使所有屬性可選 ...
    程式設計 發佈於2024-11-02
  • 電報 window.open(url, &#_blank&#);在ios上工作很奇怪
    電報 window.open(url, &#_blank&#);在ios上工作很奇怪
    我正在製作一個電報機器人,我想添加將一些資訊從小型應用程式轉發到聊天的選項。我決定使用 window.open(url, '_blank');在我在 iPhone 上嘗試之前它一直運作良好。我沒有轉發,而是分享(這是一件大事,我正好需要轉發一條訊息)。我有一些如何處理它的想法,但它們...
    程式設計 發佈於2024-11-02
  • 誰是前端開發人員?
    誰是前端開發人員?
    當今網路上每個網站或平台的使用者介面部分都是前端開發人員工作的結果。他們參與創建用戶友好的介面,確保網站的外觀和功能。但到底誰是前端開發人員呢?我簡單解釋一下。 用戶看到的部分是前端 開啟網站時首先看到的是網頁介面:顏色、按鈕、文字、動畫。這都是由前端開發人員創建的。前端是網站或應...
    程式設計 發佈於2024-11-02
  • 如何使用保留的 CSS 樣式將 HTML 內容儲存為 PDF?
    如何使用保留的 CSS 樣式將 HTML 內容儲存為 PDF?
    使用CSS 將HTML 內容儲存為PDF在Web 開發中,即使將內容匯出為不同格式,保持視覺美觀也至關重要。當嘗試將 HTML 元素儲存為 PDF 時,這可能會帶來挑戰,因為 CSS 樣式可能會在轉換過程中遺失。 對於必須在已儲存的PDF 中保留CSS 的情況,請考慮使用以下方法:建立新視窗: 開啟...
    程式設計 發佈於2024-11-02

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

Copyright© 2022 湘ICP备2022001581号-3