什麼時候該使用 map()？

• 當你的需求是「每個元素都要處理一次，而且要得到一個新的陣列」時，就很適合使用 map()
• map() = 將陣列中的每一個資料，加工後產生一個新的陣列。
• 它不會修改原本的陣列，而是回傳一個全新的陣列。

生活化理解

假設今天有一箱水果

let ary =[🍎,🍌,🍇,🍊]

你想把每一個水果包裝起來。
結果變成

[📦🍎,📦🍌,📦🍇,📦🍊]

這就是 map 的概念

最簡單範例

1.每個數字乘2

let numbers = [1, 2, 3, 4, 5];
let result = numbers.map(function(num) {
    return num * 2;
});
console.log(numbers);//[1, 2, 3, 4, 5] 原本的不變
console.log(result); //[2, 4, 6, 8, 10]

2.字串加工

let names = ["小明","小美","阿華"];
let result = names.map(function(name) {
    return "您好 " + name;
});
console.log(result);// ['您好 小明', '您好 小美', '您好 阿華']

3.平方

let numbers = [2,4,6,8];
let result = numbers.map(function(num) {
    return num ** 2;
});
console.log(result); // [4, 16, 36, 64]

4.把數字變文字

let scores = [70,80,90];
let result = scores.map(function(score) {
    return "分數：" + score;
});
console.log(result); //  ['分數：70', '分數：80', '分數：90']

5.物件(Object)最常使用

let students = [
    { name:"小明", score:80 },{ name:"小美", score:95 },{ name:"阿華", score:60 }
];
let names = students.map(function(student) {
    return student.name; //只取名字
});
console.log(names); // ['小明', '小美', '阿華']

或者再加些東西

let result = students.map(function(student) {
    return {
        name: student.name,
        pass: student.score >= 60
    };
});
console.log(result);
//0:{name: '小明', pass: true}
//1:{name: '小美', pass: true}
//2:{name: '阿華', pass: true}

6.map 有三個參數

array.map(function(item,index,array){
})

map 與 forEach 的差異

• map() 是用來「建立新陣列」，forEach() 是用來「執行動作」。
• forEach() 完全不理會你的 return
• map() = 加工廠：每個元素都加工一次，最後生產一個新的陣列。
• forEach() = 點名老師：依序處理每個元素，做完事情就結束，不會產生新的陣列。
• 如果你的目的最後是「得到一個新的陣列」，就用 map()；如果只是「依序對每個元素做事」，就用 forEach()。

map常見情境：

• 將商品價格加上稅金。
• 將英文名字全部轉成大寫。
• 從物件陣列中取出某個欄位（例如所有姓名）。
• 將 API 回傳的資料轉換成畫面需要的格式。
• 在前端框架（如 React、Vue）中，把資料陣列轉換成畫面元素。

當你未來學到 filter()（篩選資料）、reduce()（彙總資料）後，會發現它們經常和 map() 搭配使用，是 JavaScript 處理陣列最核心的三個方法之一。