Question

我有一个jsfiddle，它基本上接受一个数组数据并将其附加到HTML。我使用for循环来实现这一目标。但是我很好奇我是否想用Array.prototype.map()函数来做这件事，我该怎么办呢？我不想使用任何第三方库，如下划线或lodash。

Answer 1

您可以使用.map()在数组中收集新的HTML元素，然后只在一次操作中将该结果附加到输出元素。

请注意，您应该使用.text()方法，而不是连接字符串，以避免使用大于号或符号来破坏生成的HTML。

以下是它的样子：

var data = [["title 1","title 2","title 3"],
            ["description 1","description 2","description 3"],
            ["link 1","link 2","link 3"]];

$("#output").append(data[0].map( (title,i) =>
    $("<div>").append(
        $("<h1>").text(title),
        $("<p>").text(data[1][i]),
        $("<a>").text(data[2][i])
    )
));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

注意：当您确实想要将第三个值用作超链接时，请使用.attr()：

$("<a>").attr('href', data[2][i]).text('click here')

或者您可能只是超链接第一个（标题）值：

$("<div>").append(
    $("<h1>").append(
        $("<a>").attr('href', data[2][i]).text(title)
    ),
    $("<p>").text(data[1][i])
)

Answer 2

更新了解决方案：

由于OP表示他无法控制输入，因为维基百科提供了data（可能是其中一项服务）

然后我假设数据是结构化和正确的，也就是说它永远不会有一个嵌套数组中的1个比另一个更长或更短的情况。

是的，您绝对可以使用map API为您从维基百科获得的输入提供更多含义，然后执行forEach迭代这些项目以构建您的HTML字符串。

示例：

var data = [["title 1","title 2","title 3"], ["description 1","description 2","description 3"], ["link 1","link 2","link 3"]]; var titles = data[0]; var descriptions = data[1]; var links = data[2]; var output = titles.map((title, index) => { return { "title": title, "description": descriptions[index], "link": links[index] } }); output.forEach((item) => { $("#output").append( "<div><h1>"+ item.title +"</h1><p>"+ item.description +"</p><a>"+ item.link +"</a></div>" ); })

见JFiddle：https://jsfiddle.net/SamuelToh/8tpb1jsg/

以前的解决方案：

首先 - 我认为选择数据结构的方式容易出错，因为title1，description 1和link 1如何组成一个集合没有明确的关系。

如果1个阵列不同步怎么办？也就是说，数组中的1个比其余数组更短或更长，这样你的代码在运行时就会死于index out of bond。

我认为理想情况下，您希望您的数据结构如下;

var suggested_data = { title1: { description: "description 1", link: "link1" }, title2: { description: "description 1", link: "link1" }, title3: { description: "description 1", link: "link1" } }

通过这种方式，您可以说标题X具有值为yyy的description属性和值为zzz的link属性。

即使缺少其中一个属性，最多也会获得undefined值。

这就是你如何遍历结构

for (var title in suggested_data) { var item = suggested_data[title]; $("#output").append( "<div><h1>" + title+"</h1><p>" + item.description +"</p><a>" + item.link + "</a></div>" ); }

最终它不是关于使用map，我认为它更多是您选择的数据结构。

映射数组数据并预先添加到HTML

2 个答案: