從零開始：JavaScript Map 函數新手指南
更新日期： 2023 年 7 月 25 日
「陣列」是 JavaScript 的基本資料型態之一。
因此對「陣列」資料的處理，必是不可少的一部分
JavaScript 提供了多樣強大的陣列方法，讓我們能夠更有效率地處理和操作陣列相關數據。
其中，map 函數就是一個值得我們深入瞭解的重要工具。
在這篇文章中，我們將從基礎開始，深入探討 JavaScript 的 map 函數。
函數的基礎
在我們深入討論 JavaScript 的 ｍap 函數之前，讓我們先來回顧一下 JavaScript 的函數基本概念。
函數的目的，是為了包裝重複使用的程式碼，使其更加模組化和可重複使用。
一個基本的 JavaScript 函數看起來是這樣的：
function greet(name) {
return "Hello, " + name + "!";
}在這個例子中，greet 是函數名稱，name 是函數的參數。
而 「”Hello, ” + name + “!” 」是函數的返回值。我們可以這樣調用這個函數：
console.log(greet("World")); // 輸出 "Hello, World!"接下來，我們將看到 map 函數如何利用這種模組化和可重用的特性，對陣列中的每一個元素進行操作。
什麼是 map 函數？
map 函數是一種對陣列中，每一個元素進行操作，並回傳新陣列的方法。
它不會修改原始陣列，而是創建一個新陣列。
新陣列中的每個元素，都是原始陣列中對應元素，經過某種函數操作後返回的結果。
map 函數需要輸入一個匿名函數作為「參數」，這個函數將會被應用到原始陣列的每個元素上。
這個被作為「參數」而輸入的匿名函數，也被稱為「回調函數」（callback function）
例如，如果我們有一個陣列 [1, 2, 3, 4, 5]，我們想要獲得這個陣列每個元素的平方，我們可以這樣做：
let numbers = [1, 2, 3, 4, 5];
let squares = numbers.map(function(num) {
return num * num;
});
console.log(squares); // 輸出 [1, 4, 9, 16, 25]在這個例子中，我們的回調函數接收 num 為參數（也就是陣列 numbers 中的每個元素），並回傳該數字的平方。
這就是 JavaScript 中 map 函數的基本概念和用法。
map 函數實際案例
為了更深入地理解 JavaScript 的 map 函數如何運作，讓我們來看幾個具體的實例。
實例 1：將所有數字乘以二
假設我們有一個陣列 numbers，我們想要創建一個新陣列，其中的每個數字都是 numbers 陣列中對應數字的兩倍。我們可以這樣做：
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(function(num) {
return num * 2;
});
console.log(doubled); // 輸出 [2, 4, 6, 8, 10]在這個例子中，我們的回調函數接收 num（即 numbers 陣列中的每個元素）作為參數，並回傳該數字的兩倍。
map 函數逐一針對該 numbers 陣列中的每個元素（又稱：遍歷），將回調函數應用於每個元素，並將回傳的結果，放入新的變數 doubled。
實例 2：將陣列中的物件轉換為陣列
假設我們有一個物件陣列 people，每個物件都有 name 和 age 屬性。
我們想要創建一個新陣列，其中的每個元素都是 people 陣列中對應物件的 name 屬性。我們可以這樣做：
let people = [
{name: 'Alice', age: 25},
{name: 'Bob', age: 30},
{name: 'Charlie', age: 35}
];
let names = people.map(function(person) {
return person.name;
});
console.log(names); // 輸出 ['Alice', 'Bob', 'Charlie']在這個例子中，我們的回調函數接收 person（即 people 陣列中的每個元素，每個元素都是一個物件）作為參數，並回傳該物件的 name 屬性。
map 函數遍歷 people 陣列的每個元素，將回調函數應用於每個元素，並將回傳的結果放入新的陣列 names。
以上只是 map 函數的一些基本用法。實際上，你可以使用 map 函數進行更複雜和靈活的操作。
map 函數的常見問題
儘管 JavaScript 的 map 函數很有用，但在使用過程中，可能會遇到一些常見的誤解。
問題 1：忘記回傳值
map 函數需要你的回調函數，對每個陣列元素回傳一個值。
如果你的回調函數沒有回傳值，則 map 會為該元素創建一個 undefined 的項目。例如：
let numbers = [1, 2, 3, 4, 5];
let wrongMap = numbers.map(function(num) {
num * 2; // 忘記回傳值
});
console.log(wrongMap); // 輸出 [undefined, undefined, undefined, undefined, undefined]要解決這個問題，請確保你的回調函數為每個元素回傳一個值。
問題 2：試圖改變原始陣列
map 函數不會修改原始陣列。
如果你試圖在 map 的回調函數中改變原始陣列，那麼這種改變不會影響 map 函數回傳的新陣列。
例如：
let numbers = [1, 2, 3, 4, 5];
let attemptedChange = numbers.map(function(num) {
numbers[num - 1] = num * 2;
return num;
});
console.log(attemptedChange); // 輸出 [1, 2, 3, 4, 5]
console.log(numbers); // 輸出 [2, 4, 6, 8, 10]在這個例子中，儘管我們試圖在 map 的回調函數中改變 numbers 陣列。
但 map 函數仍然回傳一個與原始 numbers 陣列相同的新陣列。
如果你想要修改原始陣列，你可能需要使用其他方法，如 forEach 或 for 迴圈。
問題 3：不適合的使用場景
雖然 map 函數很強大，但並不是所有情況都適合使用它。
例如，如果你只需要查找或檢查陣列中的元素，而不需要創建一個新陣列，那麼 find、some 或 every 等函數可能是更好的選擇。
如果你需要將陣列元素合併，或縮減成一個單一的值，那麼 reduce 函數可能更適合。
透過理解 map 函數的運作方式，以及如何適當地使用它。
你將能夠更有效地操作和轉換 JavaScript 陣列。
結語
我們已經深入探討了 JavaScript 的 map 函數，看了一些實際例子，並討論了一些常見的問題和誤解。
希望現在你對如何使用這個強大的工具有了更深入的理解。
從簡單的將每個元素乘以二，到從物件陣列中提取特定屬性。map 函數提供了一種簡單而強大的方式來處理和轉換陣列。
然而，像所有工具一樣，我們必須理解其適合和不適合的使用情況。
記住，JavaScript 提供了許多其他陣列方法，如 filter、reduce、forEach 等。
每一種都有其特定的使用場景。在你的程式碼中，選擇最適合的工具將使你的程式碼更清晰、更有效。