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

掌握 JavaScript 陣列指南

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

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]刪除
最新教學 更多>
  • 儘管程式碼有效,為什麼 POST 請求無法擷取 PHP 中的輸入?
    儘管程式碼有效,為什麼 POST 請求無法擷取 PHP 中的輸入?
    解決PHP 中的POST 請求故障在提供的程式碼片段:action=''而非:action="<?php echo $_SERVER['PHP_SELF'];?>";?>"檢查$_POST陣列:表單提交後使用 var_dump 檢查 $_POST 陣列的內容...
    程式設計 發佈於2024-12-24
  • 插入資料時如何修復「常規錯誤:2006 MySQL 伺服器已消失」?
    插入資料時如何修復「常規錯誤:2006 MySQL 伺服器已消失」?
    插入記錄時如何解決「一般錯誤:2006 MySQL 伺服器已消失」介紹:將資料插入MySQL 資料庫有時會導致錯誤「一般錯誤:2006 MySQL 伺服器已消失」。當與伺服器的連線遺失時會出現此錯誤,通常是由於 MySQL 配置中的兩個變數之一所致。 解決方案:解決此錯誤的關鍵是調整wait_tim...
    程式設計 發佈於2024-12-24
  • 大批
    大批
    方法是可以在物件上呼叫的 fns 數組是對象,因此它們在 JS 中也有方法。 slice(begin):將陣列的一部分提取到新數組中,而不改變原始數組。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index ...
    程式設計 發佈於2024-12-24
  • HTML 格式標籤
    HTML 格式標籤
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    程式設計 發佈於2024-12-24
  • 使用 GNU Emacs 進行 C 語言開發
    使用 GNU Emacs 進行 C 語言開發
    Emacs is designed with programming in mind, it supports languages like C, Python, and Lisp natively, offering advanced features such as syntax highli...
    程式設計 發佈於2024-12-24
  • 在 Go 中使用 WebSocket 進行即時通信
    在 Go 中使用 WebSocket 進行即時通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    程式設計 發佈於2024-12-24
  • 如何在 PHP 中列印單引號內的變數?
    如何在 PHP 中列印單引號內的變數?
    無法直接回顯帶有單引號的變數需要在單引號字串中列印變數?直接這樣做是不可能的。 如何在單引號內列印變數:方法1:使用串聯追加 為此,請使用點運算子將變數連接到字串上:echo 'I love my ' . $variable . '.';此方法將變數追加到字串中。 方法 2:使用雙引號或者,在字串並...
    程式設計 發佈於2024-12-24
  • std::vector 與普通數組:何時效能真正重要?
    std::vector 與普通數組:何時效能真正重要?
    std::vector 與普通數組:性能評估雖然人們普遍認為std::vector 的操作與數組類似,但最近的測試對這一概念提出了挑戰。在本文中,我們將研究 std::vector 和普通數組之間的效能差異,並闡明根本原因。 為了進行測試,實施了一個基準測試,其中涉及重複建立和修改大型陣列像素物件。...
    程式設計 發佈於2024-12-24
  • 如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    在 PHP 中組合關聯數組在 PHP 中,將兩個關聯數組組合成一個數組是常見任務。考慮以下請求:問題描述:提供的代碼定義了兩個關聯數組,$array1 和 $array2。目標是建立一個新陣列 $array3,它合併兩個陣列中的所有鍵值對。 此外,提供的陣列具有唯一的 ID,而名稱可能重疊。要求是建...
    程式設計 發佈於2024-12-24
  • Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta:列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而,隨著 Beta 2 的後續發布,這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    程式設計 發佈於2024-12-24
  • 為什麼雙精確度的小數位數比宣傳的 15 位多?
    為什麼雙精確度的小數位數比宣傳的 15 位多?
    雙精度和小數位精度在電腦程式設計中,雙精度資料型態通常被假定為具有 15 位小數的近似精度。但是,某些數字表示形式(例如 1.0/7.0)在變數內部表示時似乎具有更高的精確度。本文將探討為什麼會發生這種情況,以及為什麼精確度通常被描述為小數點後 15 位左右。 內部表示IEEE 雙精度數有 53 個...
    程式設計 發佈於2024-12-24
  • 箭頭函數中的隱式回傳與明確傳回:何時需要大括號?
    箭頭函數中的隱式回傳與明確傳回:何時需要大括號?
    箭頭函數中的花括號:隱式與明確返回箭頭函數可以用兩種方式編寫:帶或不帶花括號。當大括號不存在時,函數體被認為是“簡潔體”,並且隱式傳回其中的最後一個表達式。 帶有簡潔體的隱式回傳In不帶大括號的範例:state.map(one => oneTodo(one, action))The函數立即傳回...
    程式設計 發佈於2024-12-24
  • 為什麼使用「transform:scale()」後我的文字在 Chrome 中變得模糊?
    為什麼使用「transform:scale()」後我的文字在 Chrome 中變得模糊?
    變換後Chrome 中的文字模糊:scale()在最近的Chrome 更新中,出現了一個特殊問題,即使用CSS 轉換呈現的文字:scale() 屬性顯得模糊。使用以下特定程式碼時已觀察到此問題:@-webkit-keyframes bounceIn { 0% { opacity: 0; ...
    程式設計 發佈於2024-12-24
  • 如何在 GoLang 中實作 MDC 日誌記錄?
    如何在 GoLang 中實作 MDC 日誌記錄?
    GoLang 中的 MDC LoggingJava 的 MDC Logging 依賴線程本地存儲,這在 GoLang 中不可用。然而,透過堆疊中的線程化 Context 可以實現類似的功能。 Java MDC 依賴線程本地存儲,這是 Go 所不具備的。最接近的是透過堆疊線程化 Context,這正在...
    程式設計 發佈於2024-12-23
  • 為什麼我的隨機數在循環內是一致的?
    為什麼我的隨機數在循環內是一致的?
    理解迭代中一致的隨機數在提供的程式碼片段中,可以觀察到循環迭代中產生的隨機數保持一致。具體來說,儘管循環旨在產生唯一值,但「carSetter」和「decider」變數在 15 次迭代中保留相同的值。 此行為是由於循環內放置了 srand(time(0)) 造成的。它決定後續呼叫 rand() 時傳...
    程式設計 發佈於2024-12-23

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

Copyright© 2022 湘ICP备2022001581号-3