---
# System prepended metadata

title: "\U0001F3C5 3/11 (四) 每日任務"
tags: [直播班每日任務]

---

# 🏅 3/11 (四) 每日任務
###### tags: `直播班每日任務`

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

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


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

舉例來說:

### filter()
```js=
let a = [1,2,3,4];
let newa = a.filter(function(item){
     return item > 1;
});
console.log(newa); 
```
結果
![](https://i.imgur.com/YLYXnnA.png)


### map()
```js=
let a = [1,2,3,4];
let newa = a.map(function(item){
     return item > 1;
});
console.log(newa); 
```
結果
![](https://i.imgur.com/3hJcG2P.png)

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

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

範例: 
```js=
let a = [1,2,3,4];
mapEmpty = a.map(function(item, index, array){
    /*假設不設定回傳*/
});
console.log(mapEmpty);
```
結果: 
![](https://i.imgur.com/0Kh5BOt.png)


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

```js=
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]

```js=
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 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/6UoJVtD.png)

<!-- 解答一
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);

-->