如何用JavaScript的map()方法改写导航栏创建代码（替代for循环）

原代码用for循环遍历数组生成导航项，用map()改写的核心思路是：遍历navList数组的每个元素，为每个元素创建对应的<li>节点并设置文本，最后把所有生成的<li>节点添加到<ul>中。

改写后的完整代码：

function createNavbar(){
  const navList = [ 'Home', 'Buy', 'Services', 'contact'];
  const listContainer = document.createElement('nav');
  const listElement = document.createElement('ul');

  // 用map生成所有li元素
  const listItems = navList.map(item => {
    const li = document.createElement('li');
    li.textContent = item;
    return li;
  });

  // 添加到页面
  document.body.appendChild(listContainer);
  listContainer.appendChild(listElement);
  // 把所有li一次性添加到ul里
  listElement.append(...listItems);
};

createNavbar()

关键说明： #

• map()会遍历数组的每一项，返回一个新数组，这里我们让它返回每个元素对应的<li>节点
• 用listElement.append(...listItems)一次性把所有li节点添加到ul中，和原循环逐个添加的功能完全一致，写法更简洁
• 原代码里每次循环重新创建li的逻辑，在map的回调函数里实现：每次遍历都新建一个li，设置文本后返回

改写后的代码和原代码功能完全相同，都能生成包含指定导航项的导航栏，只是把for循环替换成了更贴合数组操作的map方法。

内容的提问来源于stack exchange，提问作者Anna