时间戳

首页 > 解决方案 > 在模板文字中循环返回未定义

javascript - 在模板文字中循环返回未定义

问题描述

我想生成具有两个功能的 HTML 代码作为培训练习。第一个函数创建一个单独的列表项。第二个函数将一个包含实际项目的数组作为输入并创建列表，如下所示：

功能一：

const listItem = item => `<li class="list-item">${item}</li>`;

功能二：

const unorderedList = items => `<ul class="list">\n ${items.forEach((item) => { listItem(item); })}\n </ul>`;

结果应该是这样的：

<ul class="list">
  <li class="list-item">car</li>
  <li class="list-item">bike</li>
  <li class="list-item">train</li>
</ul>

但是我的代码返回

<ul class="list">
 undefined
</ul>

有人可以向我解释我做错了什么吗？

标签： javascripthtml

解决方案

您需要使用.map将每个item转换为listItem结果，然后加入：

const listItem = item => `<li class="list-item">${item}</li>`;
const unorderedList = items => `<ul class="list">\n
  ${items.map(listItem).join('')}\n
  </ul>`;

console.log(
  unorderedList(['car', 'bike', 'train'])
);

如果你想在 each 之间换行<li>，那么用换行符而不是空字符串加入（尽管它不会影响渲染的<ul>）：

const listItem = item => `<li class="list-item">${item}</li>`;
const unorderedList = items => `<ul class="list">\n
  ${items.map(listItem).join('\n')}\n
  </ul>`;

console.log(
  unorderedList(['car', 'bike', 'train'])
);

推荐阅读