JavaScript 陣列是該語言的基本組成部分，掌握它提供的陣列函數對於任何高級開發人員都至關重要。這些函數使您能夠有效率地處理資料、編寫更簡潔的程式碼並輕鬆實現高級功能。在這篇文章中，我們將深入研究每個高級開發人員都應該精通的 15 個陣列函數。
請訂閱我的 YouTube 頻道 來支援我的頻道並獲取更多 Web 開發教學。
-
map()
描述：
map()函數建立一個新陣列，其中填充了對原始陣列中每個元素呼叫所提供函數的結果。
為什麼它很重要：
map()對於以函數式程式設計風格轉換資料至關重要，它允許您對陣列中的每個元素應用操作，而無需改變原始陣列。
例子：
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]解釋：
在此範例中， map()會取得numbers陣列中的每個元素，將其加倍，並傳回具有加倍值的新陣列。
-
filter()
描述：
filter()建立一個新陣列，其中包含透過所提供函數實現的測試的所有元素。
為什麼它很重要：
使用filter()從陣列中提取必要的資料而不更改原始陣列，這對於保持程式碼中的不變性至關重要。
例子：
const words = ['spray', 'limit', 'elite', 'exuberant'];
const longWords = words.filter(word => word.length > 6);
console.log(longWords); // ['exuberant']解釋：
這裡， filter()檢查words陣列中的每個單詞，並傳回一個新陣列，其中僅包含那些超過六個字母的單字。
-
reduce()
描述：
reduce()透過對每個元素套用函數並累積結果，將陣列縮減為單一值。
為什麼它很重要：
reduce()是一個強大的工具，用於執行將陣列中的所有元素組合成單一輸出的操作，例如對值求和或建構新物件。
例子：
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10解釋：
在此範例中， reduce()從初始值0開始對numbers陣列中的所有數字求和。
-
find()
描述：
find()傳回陣列中滿足所提供的測試函數的第一個元素。
為什麼它很重要：
find()對於快速定位陣列中的特定專案非常有用，尤其是在處理需要尋找特定屬性值的物件時。
例子：
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Doe' }
];
const user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: 'Jane' }解釋：
這裡， find()搜尋users陣列並傳回id為2的第一個使用者物件。
-
some()
描述：
some()測試陣列中至少一個元素是否通過所提供函數的測試。
為什麼它很重要：
some()對於需要檢查陣列中的任何元素是否滿足特定條件的場景很有用，允許您驗證輸入或檢查特定值。
例子：
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true解釋：
在此範例中， some()檢查numbers陣列中是否至少有一個偶數。
-
every()
描述：
every()測試陣列中的所有元素是否通過所提供函數的測試。
為什麼它很重要：
當您需要確保陣列中的所有元素都符合特定標準時， every()至關重要，這對於驗證檢查特別有用。
例子：
const numbers = [2, 4, 6, 8];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true解釋：
這裡， every()檢查numbers陣列中的所有數字是否都是偶數。
-
forEach()
描述：
forEach()為每個陣列元素執行一次提供的函數。
為什麼它很重要：
雖然forEach()不如其他一些方法靈活，但它對於執行會產生副作用的操作（例如記錄或更新值）來說非常簡單且有用。
例子：
const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num * 2)); // 2, 4, 6, 8解釋：
在此範例中， forEach()將numbers陣列中的每個數字加倍，並將結果記錄到控制台。
-
concat()
描述：
concat()將兩個或多個陣列合併為一個新陣列。
為什麼它很重要：
concat()對於組合資料集而不改變原始陣列並保持不變性非常有用。
例子：
const array1 = [1, 2];
const array2 = [3, 4];
const combined = array1.concat(array2);
console.log(combined); // [1, 2, 3, 4]解釋：
這裡， concat()將array1和array2組合成一個新陣列，而不修改原始陣列。
-
slice()
描述：
slice()將陣列的一部分的淺拷貝返回到新陣列中。
為什麼它很重要：
slice()非常適合在不更改原始陣列的情況下建立子陣列，使其成為提取資料的安全方法。
例子：
const fruits = ['apple', 'banana', 'orange', 'grape'];
const citrus = fruits.slice(2, 4);
console.log(citrus); // ['orange', 'grape']解釋：
在此範例中， slice()從fruits陣列中提取索引2到4 （不包括4 ）的元素。
-
splice()
描述：
splice()透過刪除或取代現有元素和/或新增元素來更改陣列的內容。
為什麼它很重要：
splice()對於陣列的就地編輯非常強大，但應謹慎使用其可變性，以避免意外的副作用。
例子：
const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1, 99);
console.log(numbers); // [1, 2, 99, 4, 5]解釋：
這裡， splice()刪除了索引2處的一個元素並將其替換為99 。
-
includes()
描述：
includes()檢查陣列是否包含某個元素，回傳true或false 。
為什麼它很重要：
includes()是一種簡單但功能強大的存在檢查方法，與使用indexOf相比，使您的程式碼更具可讀性。
例子：
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true解釋：
在此範例中， includes()檢查fruits陣列是否包含元素'banana' 。
12.indexOf()
描述：
indexOf()傳回在陣列中可以找到給定元素的第一個索引，如果不存在則傳回-1 。
為什麼它很重要：
indexOf()對於尋找陣列中元素的位置非常有用，特別是當您需要索引進行進一步操作時。
例子：
const numbers = [1, 2, 3, 4];
const index = numbers.indexOf(3);
console.log(index); // 2解釋：
這裡， indexOf()傳回numbers陣列中第一次出現數字3的索引。
13.lastIndexOf()
描述：
lastIndexOf()傳回在陣列中可以找到給定元素的最後一個索引，如果不存在則傳回-1 。
為什麼它很重要：
lastIndexOf()與indexOf()類似，但它從末尾到開頭搜尋陣列，這在您需要查找元素的最後一次出現時非常有用。
例子：
const numbers = [1, 2, 3, 4, 3];
const index = numbers.lastIndexOf(3);
console.log(index); // 4解釋：
在此範例中， lastIndexOf()尋找numbers陣列中最後一次出現的數字3 ，並傳回索引4 。
-
join()
描述：
join()將陣列的所有元素連接成一個字串，並用指定的分隔符號分隔。
為什麼它很重要：
join()非常適合將陣列轉換為字串，這對於顯示或格式化資料特別有用。
例子：
const words = ['Hello', 'world'];
const sentence = words.join(' ');
console.log(sentence); // "Hello world"解釋：
這裡， join()將words陣列的元素連接成一個字串，每個單字用空格分隔。
-
reverse()
描述：
reverse()就地反轉陣列中元素的順序。
為什麼它很重要：
當您需要以相反的順序處理或顯示資料時， reverse()會很有用，儘管它的可變性需要謹慎使用。
例子：
const numbers = [1, 2, 3];
numbers.reverse();
console.log(numbers); // [3, 2, 1]解釋：
在此範例中， reverse()反轉numbers陣列中元素的順序，從而修改原始陣列。
結論
掌握這 15 個 JavaScript 陣列函數將大大增強您高效操作資料和編寫乾淨、可維護程式碼的能力。作為高級開發人員，在您的工具包中擁有這些功能可以讓您輕鬆處理複雜的資料操作，使您的程式碼更加健壯和可擴展。
開始你的 JavaScript 之旅
如果您是 JavaScript 新手或想要複習一下，請存取我在 BuyMeACoffee 上的部落格以開始了解基礎知識。
原文出處：https://dev.to/dipakahirav/15-javascript-array-functions-you-should-master-as-a-senior-dev-54gg
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式