本期是对【210期](http://haoduoshipin.com/videos/210) 的改进。

一个数组中有多个元素，如果咱们想对其中的每一个元素都变一下形，然后把变形的结果再组成一个数组，就要用到 JS 的 map 接口。map 的意思就是“映射”，映射就是一一对应，老数据跟新数组等长，老数组中的每个一个老元素都对应一个新数组中的元素。

给字符串加标签

let arr = [
  'hello',
  'peter'
]

const newArr = arr.map(
  t => {
    console.log('current value', t)
    return `<li>${t}</li>`
  } 
)

console.log('newArr', newArr)

React 下一个常见操作就是给元素加标签，一个数组里面有两个字符串，如果想得到一个新数组，新数组中每一个元素都是老字符串加上 li 标签，就可以使用 map 接口。呼叫 arr.map ， map 里面接收一个参数，类型是函数。也就是要传入一个回调函数。回调函数中第一个参数，t ，代表迭代当前值，也就是 t 在第一次循环中等于 ‘hello’ ，第二次就等于 ‘peter’ 。map 中回调的执行次数，跟 arr 的数组长度相等。并且回调函数的每一次的返回值，会被收集到一个新数组中，最终这个新数组，会被作为 map 函数的返回值赋值给 newArr 。

运行 node index.js 可以看到打印出的各项信息。

修改对象数组中一个对象的一个属性

let courses = [
  {
    id: '1',
    title: 'Git 技巧',
    likes: 2
  },
  {
    id: '2',
    title: 'React 技巧',
    likes: 3
  }
]

const newCourses = courses.map(
  t => {
    if (t.id === '1') {
      return {
        ...t,
        likes: t.likes + 1
      }
    }
    return t
  }
)

console.log('newCourses', newCourses)

现在有一个对象数组 courses ，里面存放了两个课程对象，每个对象包含 id ，标题，还有点赞数。现在我想要把第一门课程的点赞加一。同时要保证不修改 courses 本身。

创建 newCourses 常量存放点赞后的对象数组，对 courses 数组呼叫 map 方法是不会修改 courses 本身的，这是 map 的一个特点。回调函数中，每一个迭代当前值赋值给 t 。

进入回调函数，如果 t ，也就是当前课程对象，的 id 等于 1 ，那就拿到 t ，展开，然后 likes 这一个属性用加一后的新值覆盖一下。if 大括号中的 return 能达成两个效果，一个是把它后面的值放到 newCourses 数组中，另一个作用就是结束回调函数的本次执行。如果当前值的 id 不满足 if 条件，就直接返回当前值。

终端中，运行一下，可以看到 newCourses 中，第一门课程果然点赞数量加一了。