JavaScript 将函数传递给 map()；

Question

有人可以解释一下下面的代码是如何工作的吗？

...

articles.map(createArticle).join("\n");

function createArticle(article){
  return `
    <div class="article">
      <h1>${article.news}</h1>
    </div>
  `
}

我了解 map(); 的工作原理，只是不明白它从哪里获取文章，因为它没有作为参数传递给 map();

中的 createArticle 函数

Answer 1

来自MDN docs：

map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results.

因此，argument 指的是每个元素；在迭代期间。

Answer 2

createArticle 是对文章数组的每个元素调用的回调。

As explained in the doc, "callback is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed."

所以在这里，article 是被迭代的当前元素的值。

Answer 3

createArticle 函数实际上传递了 3 个参数：数组中的项目、项目的索引和数组。

articles.map(function createArticle(article, i, arr) {
    return `
        <div class="article">
            <h1>${article.news}</h1>
        </div>
    `
});

您的代码只是将 createArticle 函数从匿名函数更改为命名函数。

articles.map(createArticle);

function createArticle(article, i, arr) {
    return `
        <div class="article">
            <h1>${article.news}</h1>
        </div>
    `
}

由于不需要在 JavaScript 中声明参数，您的代码不包含 i 或 arr 参数。

articles.map(createArticle);

function createArticle(article) {
    return `
        <div class="article">
            <h1>${article.news}</h1>
        </div>
    `
}

您可以在 MDN

上看到完整的解释和 polyfill（现在不需要，但在尝试理解函数时会有所帮助）

Answer 4

函数 createArticle 作为参数传递给 map。

map 的代码（不是您编写的，内置于 JavaScript 引擎中，因此在您 copy/pasted 的代码中不可见) calls createArticle （它可以访问，因为您将它作为参数传递）。由于 that 代码正在调用它（对数组中的每个元素调用一次），它可以传递 createArticle 它喜欢的任何参数。

它传递的参数在记录 map 的任何地方都有记录，包括：

MDN
Ecma

Answer 5

var persons = [
    {firstname : "Deepak", lastname: "Patidar"},      
    {firstname : "Anjular", lastname: "5"},
    {firstname : "Java", lastname: "script"}
];


function getFullName(item,index) {
    var fullname = [item.firstname,item.lastname].join(" ");
    return fullname;
}

function myFunction() { 
    document.getElementById("demo").innerHTML = persons.map(getFullName);
}

JavaScript 将函数传递给 map()；

JavaScript Passing in a function to map();

javascript

es6-map