# 🏅 3/11 (四) 每日任務
###### tags: `JS 直播班 - 2021 春季班`

map() 介紹
---
map() 與 filter() 有許多共通點，建議可以先複習一下 [filter() 的使用方法](https://hackmd.io/VUWcFiKjRcSTM5DdEI1Qhw?view)

以下條列他們的共同點:
> 1. 皆為 JavaScript 的陣列方法。
> 2. 都不會影響到原來的陣列，而是會回傳一個新的陣列。
> 3. 都是透過 callback 函式來處理陣列中的元素，函式參數可帶入「目前正在處理的元素」、「正在處理的元素索引」、「原始陣列」。

而它們最大的差異在於: **filter() 產生的新陣列只會包含「符合回傳條件」的元素，map() 則是會包含「運算後」的所有元素。**

舉例來說:

### filter()

let a = [1,2,3,4];
let newa = a.filter(function(item){
     return item > 1;
});
console.log(newa); 

結果

### map()

let a = [1,2,3,4];
let newa = a.map(function(item){
     return item > 1;
});
console.log(newa); 

結果

可看出 filter() 陣列回傳的是 **「判斷為 true 的元素」**，map() 陣列回傳的是 **「元素的運算結果」**。

### 注意，map() 一定會替原始陣列的每個元素回傳一個值，如果不回傳則為 `undefined`

範例:

let a = [1,2,3,4];
mapEmpty = a.map(function(item, index, array){
    /*假設不設定回傳*/
});
console.log(mapEmpty);

結果:

問題一
---
請透過 map() 將 arr 內的元素都乘以 2，並指派給 newArr。

let arr = [1, 4, 9, 16];
let newArr;

console.log(arr);
console.log(newArr);

問題二
---
以下為 customer 顧客資料，請透過 map() 方法，修改程式碼並執行以下要求:
1. 取出各個陣列元素的 Name 形成一個新的陣列，並指派給 customerName
如: ["Jordan", "Jenny", "Kevin", "louis"]

3. 取出各個陣列元素的 id 形成一個新的陣列，並指派給 customerId
如: [123, 456, 789, 987]

let customer = [
  {
    Name: 'Jordan',
    id: 123,
  },
  {
    Name: 'Jenny',
    id: 456,
  },
  {
    Name: 'Kevin',
    id: 789,
  },
  {
    Name: 'louis',
    id: 987,
  }
];

let customerName;
let customerId;

console.log(customerName);
console.log(customerId);

回報流程
---
將答案寫在 CodePen 並複製 CodePen 連結貼至 thread 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）


<!-- 解答一
let arr = [1, 4, 9, 16];
let newArr;

newArr = arr.map(function(item) {
return item * 2;
});

console.log(arr);
console.log(newArr);
-->

<!-- 解答二
let customer = [
{
Name: 'Jordan',
id: 123,
},
{
Name: 'Jenny',
id: 456,
},
{
Name: 'Kevin',
id: 789,
},
{
Name: 'louis',
id: 987,
}
];

let customerName = customer.map(function(item) {
return item.Name;
});
let customerId = customer.map(function(item) {
return item.id;
});

console.log(customerName);
console.log(customerId);

-->