掌握 JavaScript 陣列指南-js教程-PHP中文網

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 < 10);
console.log(allBelowTen); // Output: true

登入後複製

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()

判斷傳入的值是否為陣列。

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]

登入後複製

Practical Examples

Example 1: Removing Duplicates from an Array

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

登入後複製

Example 2: Summing All Values in an Array

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

登入後複製

Example 3: Flattening a Deeply Nested Array

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

登入後複製

Example 4: Finding the Maximum Value in an Array

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

登入後複製

Example 5: Creating an Array of Key-Value Pairs

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

登入後複製

Conclusion

Arrays are an essential part of JavaScript, providing a powerful way to manage collections of data. By mastering array functions, you can perform complex data manipulations with ease and write more efficient and readable code. This comprehensive guide has covered the most important array functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

以上是掌握 JavaScript 陣列指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！