---
title: map
tags: map,
description:
---

map
===

參考文章: https://wcc723.github.io/javascript/2017/06/29/es6-native-array

### map 介紹
> 1. 為 JavaScript 的陣列方法，可以用來「修改陣列元素」。
> 2. 不會影響原來的陣列，而是會透過函式內所回傳的值組合成一個新的陣列。
> 3. map() 需要設定回傳值，如果不設定則會回傳 undefined

舉例:

let arr = [1,2,3,4];
let newArr = arr.map((item) => {
  return item * 2;
});
console.log(arr); // 結果為: [1, 2, 3, 4]
console.log(newArr); // 結果為: [2, 4, 6, 8]

let arr = [1,2,3,4];
let newArr = arr.map((item) => {
  /* 假設不設定回傳 */
});
console.log(newArr); // 結果為: [undefined, undefined, undefined, undefined]

題目（使用 CodePen 作答）
---
請使用 map() 操作 array 陣列，賦予 newArray 陣列元素。結果如下圖:


const array = [
  {
    name: '小明',
    age: 18
  },
  {
    name: '小美',
    age: 15
  },
  {
    name: '杰倫',
    age: 19
  },
  {
    name: '漂亮阿姨',
    age: 22
  },
  {
    name: '老媽',
    age: 28
  }
];
let newArray = [];

const array = [
  {
    name: '小明',
    age: 18
  },
  {
    name: '小美',
    age: 15
  },
  {
    name: '杰倫',
    age: 19
  },
  {
    name: '漂亮阿姨',
    age: 22
  },
  {
    name: '老媽',
    age: 28
  }
];

let newArray = array.map(item => {
  return `${item.name} ${item.age} 歲囉`;
});

console.log(newArray);

// ['小明 18 歲囉', '小美 15 歲囉', '杰倫 19 歲囉', '漂亮阿姨 22 歲囉', '老媽 28 歲囉']