」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 掌握 JavaScript 陣列指南

掌握 JavaScript 陣列指南

發佈於2024-08-01
瀏覽:710

A Guide to Master JavaScript Arrays

数组是 JavaScript 中最常用的数据结构之一。它们允许您在单个变量中存储多个值,并附带一组丰富的内置函数,使数据的操作和处理变得简单而高效。在本文中,我们将详细探讨 JavaScript 数组函数,提供解释、示例和注释来帮助您掌握它们。

JavaScript 中的数组简介

数组是有序的项目集合,可以保存不同类型的数据,包括数字、字符串、对象,甚至其他数组。

let fruits = ["Apple", "Banana", "Cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "Apple", true, {name: "John"}, [1, 2, 3]];

创建数组

可以使用数组文字或数组构造函数创建数组。

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);
console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3]

数组属性

  • length:返回数组中元素的数量。
let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // Output: 5

数组方法

1. 推()

将一个或多个元素添加到数组末尾并返回新长度。

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

2. 弹出()

从数组中删除最后一个元素并返回该元素。

let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // Output: [1, 2, 3]
console.log(last); // Output: 3

3. 移位()

从数组中删除第一个元素并返回该元素。

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // Output: [2, 3]
console.log(first); // Output: 1

4. 取消移位()

将一个或多个元素添加到数组的开头并返回新的长度。

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // Output: [1, 2, 3]

5. 连接()

合并两个或多个数组并返回一个新数组。

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2);
console.log(merged); // Output: [1, 2, 3, 4]

6. 加入()

将数组的所有元素连接成字符串。

let arr = [1, 2, 3];
let str = arr.join("-");
console.log(str); // Output: "1-2-3"

7. 反向()

反转数组中元素的顺序。

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // Output: [3, 2, 1]

8. 切片()

将数组的一部分的浅拷贝返回到新的数组对象中。

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // Output: [2, 3]

9. 拼接()

通过删除、替换或添加元素来更改数组的内容。

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr); // Output: [1, "a", "b", 4, 5]

10. 排序()

对数组的元素进行就地排序并返回排序后的数组。

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b);
console.log(arr); // Output: [1, 1, 3, 4, 5, 9]

11. 过滤器()

创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。

let arr = [1, 2, 3, 4, 5];
let filtered = arr.filter(x => x > 2);
console.log(filtered); // Output: [3, 4, 5]

12. 地图()

创建一个新数组,其中包含对调用数组中每个元素调用所提供函数的结果。

let arr = [1, 2, 3];
let mapped = arr.map(x => x * 2);
console.log(mapped); // Output: [2, 4, 6]

13. 减少()

对累加器和数组中的每个元素应用函数以将其减少为单个值。

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 10

14. 查找()

返回数组中满足所提供的测试函数的第一个元素的值。

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3);
console.log(found); // Output: 4

15. 查找索引()

返回数组中满足所提供的测试函数的第一个元素的索引。

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3);
console.log(index); // Output: 3

16. 每个()

测试数组中的所有元素是否通过提供的函数实现的测试。

let arr = [1, 2, 3, 4, 5];
let allBelowTen = arr.every(x => x 



17. 一些()

测试数组中至少一个元素是否通过所提供函数实现的测试。

let arr = [1, 2, 3, 4, 5];
let anyAboveThree = arr.some(x => x > 3);
console.log(anyAboveThree); // Output: true

18. 包含()

确定数组的条目中是否包含某个值。

let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // Output: true

19.indexOf()

返回在数组中可以找到给定元素的第一个索引,如果不存在则返回 -1。

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // Output: 2

20.lastIndexOf()

返回在数组中可以找到给定元素的最后一个索引,如果不存在则返回 -1。

let arr = [1, 2, 3, 4, 5, 3];
let index = arr.lastIndexOf(3);
console.log(index); // Output: 5

21. 平()

创建一个新数组,其中所有子数组元素递归连接到指定深度。

let arr = [1, [2, [3, [4]]]];
let flattened = arr.flat(2);
console.log(flattened); // Output: [1, 2, 3, [4]]

22. 平面地图()

首先使用映射函数映射每个元素,然后将结果展平到一个新数组中。

let arr = [1, 2, 3];
let flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]

23. 来自()

从类似数组或可迭代对象创建新的浅复制数组实例。

let str = "Hello";
let arr = Array.from(str);
console.log(arr); // Output: ["H", "e", "l", "l", "o"]

24. isArray()

判断传入的值是否为Array。

console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray("Hello")); // Output: false

25. 的()

创建一个

具有可变数量参数的新数组实例,无论参数的数量或类型如何。

let arr = Array.of(1, 2, 3);
console.log(arr); // Output: [1, 2, 3]

实际例子

示例 1:从数组中删除重复项

let arr = [1, 2, 3, 3, 4, 4, 5];
let unique = [...new Set(arr)];
console.log(unique); // Output: [1, 2, 3, 4, 5]

示例 2:对数组中的所有值求和

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 15

示例 3:展平深度嵌套数组

let arr = [1, [2, [3, [4, [5]]]]];
let flattened = arr.flat(Infinity);
console.log(flattened); // Output: [1, 2, 3, 4, 5]

示例 4:查找数组中的最大值

let arr = [1, 2, 3, 4, 5];
let max = Math.max(...arr);
console.log(max); // Output: 5

示例 5:创建键值对数组

let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // Output: [["a", 1], ["b", 2], ["c", 3]]

结论

数组是 JavaScript 的重要组成部分,提供了管理数据集合的强大方法。通过掌握数组函数,您可以轻松执行复杂的数据操作并编写更高效和可读的代码。这个综合指南涵盖了 JavaScript 中最重要的数组函数,并配有详细的示例和解释。练习使用这些函数并尝试不同的用例,以加深您的理解并提高您的编码技能。

版本聲明 本文轉載於:https://dev.to/imsushant12/a-guide-to-master-javascript-arrays-38bj?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何使用 Laravel Eloquent 的 firstOrNew() 方法有效最佳化 CRUD 操作?
    如何使用 Laravel Eloquent 的 firstOrNew() 方法有效最佳化 CRUD 操作?
    使用 Laravel Eloquent 優化 CRUD 操作在 Laravel 中使用資料庫時,插入或更新記錄是很常見的。為了實現這一點,開發人員經常求助於條件語句,在決定執行插入或更新之前檢查記錄是否存在。 firstOrNew() 方法幸運的是, Eloquent 透過firstOrNew() ...
    程式設計 發佈於2024-11-06
  • 為什麼在 PHP 中重寫方法參數違反了嚴格的標準?
    為什麼在 PHP 中重寫方法參數違反了嚴格的標準?
    在PHP 中重寫方法參數:違反嚴格標準在物件導向程式設計中,里氏替換原則(LSP) 規定:子類型的物件可以替換其父對象,而不改變程式的行為。然而,在 PHP 中,用不同的參數簽名覆蓋方法被認為是違反嚴格標準的。 為什麼這是違規? PHP 是弱型別語言,這表示編譯器無法在編譯時確定變數的確切型別。這表...
    程式設計 發佈於2024-11-06
  • 哪個 PHP 函式庫提供卓越的 SQL 注入防護:PDO 還是 mysql_real_escape_string?
    哪個 PHP 函式庫提供卓越的 SQL 注入防護:PDO 還是 mysql_real_escape_string?
    PDO vs. mysql_real_escape_string:綜合指南查詢轉義對於防止 SQL 注入至關重要。雖然 mysql_real_escape_string 提供了轉義查詢的基本方法,但 PDO 成為了一種具有眾多優點的卓越解決方案。 什麼是 PDO? PHP 資料物件 (PDO) 是一...
    程式設計 發佈於2024-11-06
  • React 入門:初學者的路線圖
    React 入門:初學者的路線圖
    大家好! ? 我剛開始學習 React.js 的旅程。這是一次令人興奮(有時甚至具有挑戰性!)的冒險,我想分享一下幫助我開始的步驟,以防您也開始研究 React。這是我的處理方法: 1.掌握 JavaScript 基礎 在開始使用 React 之前,我確保溫習一下我的 JavaScript 技能,...
    程式設計 發佈於2024-11-06
  • 如何引用 JavaScript 物件中的內部值?
    如何引用 JavaScript 物件中的內部值?
    如何在JavaScript 物件中引用內部值在JavaScript 中,存取引用同一物件中其他值的物件中的值有時可能具有挑戰性。考慮以下程式碼片段:var obj = { key1: "it ", key2: key1 " works!" }; a...
    程式設計 發佈於2024-11-06
  • Python 列表方法快速指南及範例
    Python 列表方法快速指南及範例
    介紹 Python 清單用途廣泛,並附帶各種內建方法,有助於有效地操作和處理資料。以下是所有主要清單方法的快速參考以及簡短的範例。 1. 追加(項目) 將項目新增至清單末端。 lst = [1, 2, 3] lst.append(4) # [1, 2, 3, ...
    程式設計 發佈於2024-11-06
  • C++ 中何時需要使用者定義的複製建構函式?
    C++ 中何時需要使用者定義的複製建構函式?
    何時需要使用者定義的複製建構子? 複製建構子是 C 物件導向程式設計的組成部分,提供了一種基於現有實例初始化物件的方法。雖然編譯器通常會為類別產生預設的複製建構函數,但在某些情況下需要進行自訂。 需要使用者定義複製建構子的情況當預設複製建構子不夠時,程式設計師會選擇使用者定義的複製建構子來實作自訂複...
    程式設計 發佈於2024-11-06
  • 試...捕捉 V/s 安全分配 (?=):現代發展的福音還是詛咒?
    試...捕捉 V/s 安全分配 (?=):現代發展的福音還是詛咒?
    最近,我發現了 JavaScript 中引入的新安全賦值運算子 (?.=),我對它的簡單性著迷。 ? 安全賦值運算子 (SAO) 是傳統 try...catch 區塊的簡寫替代方案。它允許您內聯捕獲錯誤,而無需為每個操作編寫明確的錯誤處理程式碼。這是一個例子: const [error, resp...
    程式設計 發佈於2024-11-06
  • 如何在Python中優化固定寬度檔案解析?
    如何在Python中優化固定寬度檔案解析?
    優化固定寬度文件解析為了有效地解析固定寬度文件,可以考慮利用Python的struct模組。此方法利用 C 來提高速度,如下例所示:import struct fieldwidths = (2, -10, 24) fmtstring = ' '.join('{}{}'.format(abs(fw),...
    程式設計 發佈於2024-11-06
  • 蠅量級
    蠅量級
    結構模式之一旨在透過與相似物件共享盡可能多的資料來減少記憶體使用。 在處理大量相似物件時特別有用,為每個物件建立一個新實例在記憶體消耗方面會非常昂貴。 關鍵概念: 內在狀態:多個物件之間共享的狀態獨立於上下文,並且在不同物件之間保持相同。 外部狀態:每個物件唯一的、從客戶端傳遞的狀態。此狀態可...
    程式設計 發佈於2024-11-06
  • 解鎖您的 MySQL 掌握:MySQL 實作實驗室課程
    解鎖您的 MySQL 掌握:MySQL 實作實驗室課程
    透過全面的 MySQL 實作實驗室課程提升您的 MySQL 技能並成為資料庫專家。這種實踐學習體驗旨在引導您完成一系列實踐練習,使您能夠克服複雜的 SQL 挑戰並優化資料庫效能。 深入了解 MySQL 無論您是想要建立強大 MySQL 基礎的初學者,還是想要提升專業知識的經驗豐富的...
    程式設計 發佈於2024-11-06
  • 資料夾
    資料夾
    ? ?大家好,我是尼克? ? 利用專家工程解決方案提升您的專案 探索我的產品組合,了解我如何將尖端技術、強大的問題解決能力和創新熱情結合起來,建立可擴展的高效能應用程式。無論您是尋求增強開發流程還是解決複雜的技術挑戰,我都可以幫助您實現願景。看看我的工作,讓我們合作做一些非凡的事情! 在這裡聯絡...
    程式設計 發佈於2024-11-06
  • 透過 Gmail 發送電子郵件時如何修復「SMTP Connect() 失敗」錯誤?
    透過 Gmail 發送電子郵件時如何修復「SMTP Connect() 失敗」錯誤?
    SMTP 連線失敗:解決「SMTP Connect() 失敗」錯誤嘗試使用Gmail 發送電子郵件時,您可能會遇到錯誤訊息指出「SMTP -> 錯誤:無法連線到伺服器:連線逾時(110)\nSMTP Connect()失敗。 要解決此問題,您需要修改負責發送電子郵件的 PHP 程式碼。具體來說,刪除...
    程式設計 發佈於2024-11-06
  • 如何使用 Pillow 在 Python 中水平連接多個映像?
    如何使用 Pillow 在 Python 中水平連接多個映像?
    以Python水平連接影像水平組合多個影像是影像處理中的常見任務。 Python 提供了強大的工具來使用 Pillow 函式庫來實現此目的。 問題描述考慮三個尺寸為 148 x 95 的方形 JPEG 影像。目標是水平連接這些影像影像,同時避免結果輸出中出現任何部分影像。 建議的解決方案以下程式碼片...
    程式設計 發佈於2024-11-06

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

Copyright© 2022 湘ICP备2022001581号-3