從零開始:JavaScript Map 函數新手指南
更新日期: 2024 年 9 月 14 日
「陣列」是 JavaScript 的基本資料型態之一。
因此對「陣列」資料的處理,必是不可少的一部分
JavaScript 提供了多樣強大的陣列方法,讓我們能夠更有效率地處理和操作陣列相關數據。
其中,map 函數就是一個值得我們深入瞭解的重要工具。
在這篇文章中,我們將從基礎開始,深入探討 JavaScript 的 map 函數。
函數的基礎
在我們深入討論 JavaScript 的 map 函數之前,讓我們先來回顧一下 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 等。
每一種都有其特定的使用場景。在你的程式碼中,選擇最適合的工具將使你的程式碼更清晰、更有效。