JS进阶之以题悟道（一）列表内容排序再渲染

news2024/11/15 8:29:50

注释很详细，直接上代码

涉及知识点：

正则表达式
outerHTML
join
map

题干：

在这里插入图片描述

我的答案

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body>
    <ul id="myList">
      <li id="item1">项目 1</li>
      <li id="item3">项目 3</li>
      <li id="item2">项目 2</li>
      <li id="item4">项目 4</li>
    </ul>

    <script>
      /**
       * 首先谈谈我们为什么这样做
       * JS更多的是面向应用的，对于这题我们不能停留在过测例，思路打开学得更多
       * 我们想要对id进行排序，id是字符串，所以需要提取id中的数字，然后进行比较
       * 这里很多小友会直接比较，因为当其他字符相同，数字在十以内的字符串确实是可以直接比较但固然不符合逻辑，eg."10"<"2"
       * 提取数字的方法怎么选择呢，如果使用substring可以吗，对这题肯定是可以了，但倘若不是item呢，这里我们又能用到正则表达式提取数字的方法，
       * 使用正则表达式`从后往前`匹配数字，提取到id中的数字字符串，然后转为数字进行比较
       */
      function sortAndReturnTextContent() {
        let items = document.getElementById("myList").children;
        // 在此补全代码
        const newArrSortByItems = Array.from(items).sort((idFront, idBack) => {
          const regex = /\d+$/; // 正则表达式: 从后往前匹配数字
          let numFromIdFront = Number(idFront.id.match(regex)[0]); // 提取id中的数字（字符串）并转为数字
          let numFromIdBack = Number(idBack.id.match(regex)[0]);
          return numFromIdFront < numFromIdBack ? -1 : 1; // 数字比较：返回值为负数表示idFront排在idBack前面，反之则后面
        });

        /**
         *将排序后的数组的outerHTML转换为HTML字符串并重新赋值给myList的innerHTML
         *这里注意区分 innerHTML 和 outerHTML
         *outerHTML: 即该元素及其内部的字符串
         *innerHTML: 即该元素内部的字符串
         *为什么需要用join("")
         *因为map返回的是字符串数组，需要用join("")转换为字符串
         *join("")里面的字符串是分割符，但这里用空字符串即可
         */
        document.getElementById("myList").innerHTML = newArrSortByItems
          .map((item) => item.outerHTML)
          .join("");
      }
      sortAndReturnTextContent();
    </script>
  </body>
</html>