」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 透過範例探索 JavaScript 數組方法

透過範例探索 JavaScript 數組方法

發佈於2024-09-14
瀏覽:764

Exploring JavaScript Array Methods with Examples

JavaScript 陣列用途廣泛,提供多種內建方法來有效率地操作、迭代和管理資料。理解這些方法對於有效編程至關重要。讓我們透過實際例子深入研究一些常用的陣列方法。

數組方法

  • push(): 將一個或多個元素新增至陣列末端並傳回陣列的新長度。
let fruits = ['apple', 'banana'];
fruits.push('orange');  // returns 3 (new length of array)
console.log(fruits);    // Output: ['apple', 'banana', 'orange']
  • pop(): 從陣列中刪除最後一個元素並傳回該元素。
let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();  // returns 'orange'
console.log(fruits);           // Output: ['apple', 'banana']
console.log(lastFruit);        // Output: 'orange'
  • shift(): 從陣列中刪除第一個元素並傳回該刪除的元素。
let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();  // returns 'apple'
console.log(fruits);              // Output: ['banana', 'orange']
console.log(firstFruit);          // Output: 'apple'
  • unshift(): 將一個或多個元素新增至陣列的開頭並傳回陣列的新長度。
let fruits = ['banana', 'orange'];
fruits.unshift('apple');  // returns 3 (new length of array)
console.log(fruits);      // Output: ['apple', 'banana', 'orange']
  • forEach(): 對每個陣列元素執行一次提供的函數。
let numbers = [1, 2, 3];
numbers.forEach(function(num) {
  console.log(num * 2);  // Output: 2, 4, 6
});
  • map(): 建立一個新數組,其中填充了對呼叫數組中每個元素呼叫所提供函數的結果。
let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);  // Output: [2, 4, 6]
  • filter(): 建立一個新數組,其中包含透過所提供函數實現的測試的所有元素。
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evens);  // Output: [2, 4]
  • find(): 傳回數組中滿足所提供的測試函數的第一個元素。
let numbers = [10, 20, 30, 40, 50];
let found = numbers.find(function(num) {
  return num > 25;
});
console.log(found);  // Output: 30
  • reduce(): 對累加器和陣列中的每個元素(從左到右)套用函數,將其減少為單一值。
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(acc, current) {
  return acc   current;
}, 0);
console.log(sum);  // Output: 15 (1   2   3   4   5)
  • indexOf(): 傳回在陣列中可以找到給定元素的第一個索引,如果不存在則傳回 -1。
let fruits = ['apple', 'banana', 'orange', 'apple'];
let index = fruits.indexOf('apple');  // returns 0
console.log(index);                   // Output: 0
  • lastIndexOf(): 傳回在陣列中可以找到給定元素的最後一個索引,如果不存在則傳回 -1。
let fruits = ['apple', 'banana', 'orange', 'apple'];
let lastIndex = fruits.lastIndexOf('apple');  // returns 3
console.log(lastIndex);                      // Output: 3

這些陣列方法是在 JavaScript 中高效能操作資料結構的基本工具。透過掌握這些方法,您將獲得在各種程式設計場景中處理陣列的強大工具包。

版本聲明 本文轉載於:https://dev.to/suleman_ahmed_rajput/exploring-javascript-array-methods-with-examples-3p90?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • JavaScript 機器學習入門:TensorFlow.js 初學者指南
    JavaScript 機器學習入門:TensorFlow.js 初學者指南
    機器學習 (ML) 迅速改變了軟體開發世界。直到最近,由於 TensorFlow 和 PyTorch 等函式庫,Python 仍是 ML 領域的主導語言。但隨著 TensorFlow.js 的興起,JavaScript 開發人員現在可以深入令人興奮的機器學習世界,使用熟悉的語法直接在瀏覽器或 Nod...
    程式設計 發佈於2024-11-05
  • extjs API 查詢參數範例
    extjs API 查詢參數範例
    API 查詢 參數是附加到 API 請求 URL 的鍵值對,用於傳送附加資訊至伺服器。它們允許用戶端(例如 Web 瀏覽器或應用程式)在向伺服器發出請求時指定某些條件或傳遞資料。 查詢參數加入到 URL 末端問號 (?) 後。每個參數都是鍵值對,鍵和值之間以等號 (=) 分隔。如果有多個查詢參數,...
    程式設計 發佈於2024-11-05
  • 如何解決Go中從不同套件匯入Proto檔案時出現「Missing Method Protoreflect」錯誤?
    如何解決Go中從不同套件匯入Proto檔案時出現「Missing Method Protoreflect」錯誤?
    如何從不同的套件導入Proto 檔案而不遇到「Missing Method Protoreflect」錯誤在Go 中,protobuf 常用於資料序列化。將 protobuf 組織到不同的套件中時,可能會遇到與缺少 ProtoReflect 方法相關的錯誤。當嘗試將資料解組到單獨套件中定義的自訂 p...
    程式設計 發佈於2024-11-05
  • 為什麼MySQL在查詢「Field = 0」非數位資料時傳回所有行?
    為什麼MySQL在查詢「Field = 0」非數位資料時傳回所有行?
    不明確的查詢:理解為什麼MySQL 回傳「Field=0」的所有行在MySQL 查詢領域,一個看似無害的比較,例如“SELECT * FROM table WHERE email=0”,可能會產生意外的結果。它沒有按預期過濾特定行,而是返回表中的所有記錄,從而引發了對資料安全性和查詢完整性的擔憂。 ...
    程式設計 發佈於2024-11-05
  • 伺服器發送事件 (SSE) 的工作原理
    伺服器發送事件 (SSE) 的工作原理
    SSE(服务器发送事件)在 Web 开发领域并未广泛使用,本文将深入探讨 SSE 是什么、它是如何工作的以及它如何受益您的申请。 什么是上交所? SSE 是一种通过 HTTP 连接从服务器向客户端发送实时更新的简单而有效的方法。它是 HTML5 规范的一部分,并受到所有现代 Web ...
    程式設計 發佈於2024-11-05
  • 如何從字串 TraceID 建立 OpenTelemetry Span?
    如何從字串 TraceID 建立 OpenTelemetry Span?
    從字串 TraceID 建構 OpenTelemetry Span要建立 Span 之間的父子關係,必須在上下文傳播不可行的情況下使用標頭。在這種情況下,追蹤 ID 和跨度 ID 包含在訊息代理程式的標頭中,這允許訂閱者使用父追蹤 ID 建立新的跨度。 解決方案以下步驟可以使用追蹤ID 在訂閱者端建...
    程式設計 發佈於2024-11-05
  • 如何在gRPC中實現伺服器到客戶端的廣播?
    如何在gRPC中實現伺服器到客戶端的廣播?
    gRPC 中的廣播:伺服器到客戶端通訊建立gRPC 連線時,通常需要將事件或更新從伺服器廣播到客戶端連接的客戶端。為了實現這一點,可以採用各種方法。 Stream Observables常見的方法是利用伺服器端流。每個連線的客戶端都與伺服器建立自己的流。然而,直接訂閱其他伺服器客戶端流是不可行的。 ...
    程式設計 發佈於2024-11-05
  • 為什麼填入在 Safari 和 IE 選擇清單中不起作用?
    為什麼填入在 Safari 和 IE 選擇清單中不起作用?
    在Safari 和IE 的選擇清單中不顯示填充儘管W3 規範中沒有限制,但WebKit 瀏覽器不支援選擇框中的填充,包括Safari和Chrome。因此,這些瀏覽器中不應用填充。 要解決此問題,請考慮使用 text-indent 而不是 padding-left。透過相應增加選擇框的寬度來保持相同的...
    程式設計 發佈於2024-11-05
  • 在 Spring Boot 中建立自訂註解的終極指南
    在 Spring Boot 中建立自訂註解的終極指南
    Such annotations fill the entire project in Spring Boot. But do you know what problems these annotations solve? Why were custom annotations introduce...
    程式設計 發佈於2024-11-05
  • 為什麼 Elixir 在非同步處理方面比 Node.js 更好?
    為什麼 Elixir 在非同步處理方面比 Node.js 更好?
    简单回答:Node.js 是单线程的,并拆分该单线程来模拟并发,而 Elixir 利用了 Erlang 虚拟机 BEAM 原生的并发和并行性,同时执行进程。 下面,我们将更深入地了解这种差异,探索两个关键概念:Node.js 事件循环和 Elixir 的 BEAM VM 和 OTP。这些元素对于理解...
    程式設計 發佈於2024-11-05
  • AngularJS $watch 如何取代動態導航高度調整中的計時器?
    AngularJS $watch 如何取代動態導航高度調整中的計時器?
    避免 AngularJS 的高度監視計時器當導航高度是動態時,AngularJS 程式設計師經常面臨響應式導航的挑戰。這就導致需要調整內容的 margin-top 值以回應導航高度的變化。 以前,使用計時器來偵測導航高度的變化,但這種方法有缺點:使用計時器和調整內容的 margin-top 出現延遲...
    程式設計 發佈於2024-11-05
  • 從零到 Web 開發人員:掌握 PHP 基礎知識
    從零到 Web 開發人員:掌握 PHP 基礎知識
    掌握PHP基礎至關重要:安裝PHP建立PHP檔案運行程式碼理解變數和資料類型使用表達式和運算子建立實際專案以提高技能 PHP開發入門:掌握PHP基礎PHP是一種用途廣泛、功能強大的腳本語言,用於創建動態且互動式Web應用程式。對於初學者來說,掌握PHP的基本知識至關重要。 一、安裝PHP在本地開發機...
    程式設計 發佈於2024-11-05
  • 緩衝區:Node.js
    緩衝區:Node.js
    Node.js 中緩衝區的簡單指南 Node.js 中的 Buffer 用於處理原始二進位數據,這在處理流、文件或網路數據時非常有用。 如何建立緩衝區 來自字串: const buf = Buffer.from('Hello'); 分配特定大小的Buffer...
    程式設計 發佈於2024-11-05
  • 掌握 Node.js 中的版本管理
    掌握 Node.js 中的版本管理
    作為開發者,我們經常遇到需要不同 Node.js 版本的專案。對於可能不經常參與 Node.js 專案的新手和經驗豐富的開發人員來說,這種情況都是一個陷阱:確保每個專案使用正確的 Node.js 版本。 在安裝依賴項並執行專案之前,驗證您的 Node.js 版本是否符合或至少相容專案的要求至關重要...
    程式設計 發佈於2024-11-05
  • 如何在 Go 二進位檔案中嵌入 Git 修訂資訊以進行故障排除?
    如何在 Go 二進位檔案中嵌入 Git 修訂資訊以進行故障排除?
    確定Go 二進位檔案中的Git 修訂版部署程式碼時,將二進位檔案與建置它們的git 修訂版關聯起來會很有幫助排除故障的目的。然而,直接使用修訂號更新原始程式碼是不可行的,因為它會改變原始程式碼。 解決方案:利用建造標誌解決此挑戰的方法包括利用建造標誌。透過使用建置標誌在主套件中設定當前 git 修訂...
    程式設計 發佈於2024-11-05

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

Copyright© 2022 湘ICP备2022001581号-3