1

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

...

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

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

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

4

5 回答 5

2

该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 中声明参数，因此您的代码不包含iorarr参数。

articles.map(createArticle);

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

你可以在MDN上看到一个完整的解释和一个 polyfill（这些天是不必要的，但在尝试理解一个函数时会很有帮助）

于 2018-06-15T09:22:52.630 回答
0

来自MDN 文档：

map为数组中的每个元素按顺序调用一次提供的callback函数，并根据结果构造一个新数组。

因此， theargument指的是每一个元素；在迭代过程中。

于 2018-06-15T09:22:04.977 回答
0

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

正如文档中解释的那样，“使用三个参数调用回调：元素的值、元素的索引和被遍历的 Array 对象。”

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

于 2018-06-15T09:22:42.907 回答
0

该函数createArticle作为参数传递给map.

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

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

于 2018-06-15T09:23:59.353 回答
-1 
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);
}
于 2018-06-15T09:27:23.543 回答