【Map数组方法详解】

了解数组方法map是如何工作的

现有一个名为notes的数组

const notes = [
  {
    id: 1,
    content: 'HTML is easy',
    date: '2019-05-30T17:30:31.098Z',
    important: true
  },
  {
    id: 2,
    content: 'Browser can execute only JavaScript',
    date: '2019-05-30T18:39:34.091Z',
    important: false
  },
  {
    id: 3,
    content: 'GET and POST are the most important methods of HTTP protocol',
    date: '2019-05-30T19:20:14.298Z',
    important: true
  }
]

让我们研究一下map是如何工作的。

const result = notes.map(note => note.id)
console.log(result)

[1, 2, 3] 会被打印出来

map总是创建一个新的数组，其中的元素是通过mapping从原始数组的元素中创建的：原始值作为map方法函数的参数。

函数是：
note => note.id
这是一个简洁形式写的箭头函数。完整的形式应该是：
(note) => {
  return note.id
}

该函数得到一个笔记对象作为参数，并返回其id字段的值。
若要将数组内容显示到页面上

notes.map(note =>
  <li key={note.id}>{note.content}</li>
)

它生成一个li标签，包含每个笔记对象的笔记内容。
因为函数参数是传递给 map 方法
尽管应用似乎在工作，但控制台有一个讨厌的警告。

正如错误信息中链接的React页面所提示的；列表项，即由map方法生成的元素，必须有一个唯一的键值：一个叫做key的属性。

Anti-pattern: Array Indexes as Keys

我们可以通过使用数组索引作为键来使控制台中的错误信息消失。通过向map方法的回调函数传递第二个参数，可以拿到索引。

<ul>
  {notes.map((note, i) =>
    <li key={i}>
      {note.content}
    </li>
  )}
</ul>

但这是不推荐的，因为会产生想不到的问题。

Refactoring Modules

直接使用解构来检索它。

const App = ({ notes }) => {
  return (
    <div>
      <h1>Notes</h1>
      <ul>
        {notes.map(note =>
          <li key={note.id}>
            {note.content}
          </li>
        )}
      </ul>
    </div>
  )
}