每個開發人員都應該掌握的 avaScript 陣列方法（第 2 部分）

JavaScript 提供了一組強大的內建陣列方法，讓資料處理變得更加容易。

在這篇文章中，我們將探討四種常用的陣列方法：concat()、reverse()、fill() 和 join()。

這些方法都是以不同方式操作陣列的寶貴工具。讓我們開始吧！

如果您還沒有閱讀我們之前的文章，請務必查看第 1 部分以了解更多有用的陣列技術！這將為您提供更強大的數組方法的完整概述。

1. concat()

concat() 方法可讓您將多個陣列或值合併到一個新陣列中。它不會修改原始數組，而是傳回一個包含組合內容的新數組。

句法：

arr.concat(value1, value2, ...);

• value1, value2, ... – 可以是要合併的陣列或值。

如果參數是一個數組，則複製該數組中的所有元素；否則，參數本身將被複製。

例子：

const arr = [1, 2];

// Merging arr with another array [3, 4]
const arr1 = arr.concat([3, 4]);
console.log(arr1);  // Output: [1, 2, 3, 4]

// Merging arr with two arrays [3, 4] and [5, 6]
const arr2 = arr.concat([3, 4], [5, 6]);
console.log(arr2);  // Output: [1, 2, 3, 4, 5, 6]

// Merging arr with two arrays and additional values 5 and 6
const arr3 = arr.concat([3, 4], 5, 6);
console.log(arr3);  // Output: [1, 2, 3, 4, 5, 6]

2. 反向()

reverse() 方法反轉原始陣列中元素的順序。與其他陣列方法不同，reverse() 就地修改原始陣列並傳回它。

句法：

arr.reverse();

例子：

const arr = [1, 2, 3, 4, 5];

// Reverses the array in place and returns the reversed array
const reversedArr = arr.reverse();
console.log(reversedArr);  // Output: [5, 4, 3, 2, 1]

// Original array is also reversed
console.log(arr);  // Output: [5, 4, 3, 2, 1]

3. 填充（）

fill() 方法以指定值填入陣列中的所有元素。它是一個 mutator 方法，意味著它修改原始陣列並傳回更新後的版本。

句法：

arr.fill(value, start, end)

• value – 用來填入陣列的值。
• start（可選）– 起始索引（預設為 0）。
• end（可選）– 結束索引（預設為 arr.length）。

重要：不包括結束索引 - 它充當獨佔邊界。這意味著填充將在結束索引處的元素之前停止。

例子：

const nums1 = [15, 27, 19, 2, 1];
const nums2 = [25, 28, 34, 49];
const nums3 = [8, 9, 3, 7];

// Fill all elements with 5
const newNums1 = nums1.fill(5);
console.log(nums1);  // Output: [5, 5, 5, 5, 5]
console.log(newNums1);  // Output: [5, 5, 5, 5, 5]

// Fill elements from index 1 to 3 with 25
nums2.fill(25, 1, 3);
console.log(nums2);  // Output: [25, 25, 25, 49]

// Fill elements from index -2 to end with 15 (negative index counts from the end)
nums3.fill(15, -2);
console.log(nums3);  // Output: [8, 9, 15, 15]

4. 加入（）

join() 方法將陣列的所有元素連接成一個字串。預設情況下，元素之間會以逗號分隔，但您可以指定自訂分隔符號。

句法：

arr.join(separator);

• separator （可選）– 用於分隔陣列元素的字串（預設為 ,）。

例子：

const movies = ["Animal", "Jawan", "Pathaan"];

// Join elements with a custom separator " | "
const moviesStr = movies.join(" | ");
console.log(moviesStr);  // Output: "Animal | Jawan | Pathaan"

// The original array remains unchanged
console.log(movies);  // Output: ["Animal", "Jawan", "Pathaan"]

// Join elements with no separator
const arr = [2, 2, 1, ".", 4, 5];
console.log(arr.join(""));  // Output: "221.45"

// Join elements with a custom separator " and "
const random = [21, "xyz", undefined];
console.log(random.join(" and "));  // Output: "21 and xyz and "

結論

concat()、reverse()、fill() 和 join() 方法是在 JavaScript 中處理陣列的強大工具。

• concat() 將陣列和值組合成一個新數組。
• reverse() 反轉元素的順序。
• fill() 以指定值取代陣列元素。
• join() 將陣列元素連接到一個字串中，並使用可自訂的分隔符號。

這些方法對於有效的陣列操作至關重要，可以幫助您使程式碼更乾淨、更有效率。

以上是每個開發人員都應該掌握的 avaScript 陣列方法（第 2 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！