Объясните что за такой синтаксис метода .map со стрелочной функцией и объектов в виде её аргумента?

Question

[Дмитрий Баскаков]

В переменной data есть объект allFile, а в нем массив edges, затем происходит какая-то магия с методом map

{data.allFile.edges.map(({ node }, index) => (
   <tr key={index}>
   <td>{node.relativePath}</td>
    <td>{node.prettySize}</td>
    <td>{node.extension}</td>
    <td>{node.birthTime}</td>
  </tr>
))}

Код взят с туториала гатсби: https://www.gatsbyjs.org/tutorial/part-five/

Comments

[Vitaliy]

метод map принимает коллбэк - функцию с двумя параметрам. Первый параметр - элемент массива, второй - индекс. В данном случае над первым проводится деструктуризация, и достается из него свойство node

Answer 1

[Алексей Уколов]

Этот код аналогичен вот такому:

data.allFile.edges.map(function (edge, index) {
    var node = edge.node;

    return (
        <tr key={index}>
            <td>{node.relativePath}</td>
            <td>{node.prettySize}</td>
            <td>{node.extension}</td>
            <td>{node.birthTime}</td>
        </tr>
    )
})

К map этот синтаксис отношения не имеет, это "новинки" ES6 - object destructuring и arrow function.

Comments

[G F]

После function стрелка лишняя

[Алексей Уколов]

Спасибо, действительно.