题解 | #数组过滤#

var cups = [
        {
          type: 1,
          price: 100,
          color: "black",
          sales: 60,
          name: "牛客logo马克杯",
        },
        { type: 2, price: 40, color: "blue", sales: 100, name: "无盖星空杯" },
        { type: 4, price: 60, color: "green", sales: 200, name: "老式茶杯" },
        { type: 3, price: 50, color: "green", sales: 600, name: "欧式印花杯" },
      ];
      var select = document.querySelector("select");
      var ul = document.querySelector("ul");
      // 补全代码
      select.onchange = function (e) {
        // 根据e.target.value判断过滤条件,注意额e.target.value是string类型的
        switch (+e.target.value) {
          case 1:
            createList(cups.filter((item) => item.sales < 100));
            break;
          case 2:
            createList(
              cups.filter((item) => item.sales >= 100 && item.sales <= 500)
            );
            break;
          case 3:
            createList(cups.filter((item) => item.sales > 500));
            break;
          default:
            // 还原
            createList(cups);
            break;
        }
      };
      // 渲染数组
      const createList = (array) => {
        // 先清空ul
        ul.innerHTML = "";
        for (const key in array) {
          const li = document.createElement("li");
          li.innerHTML = array[key].name;
          ul.appendChild(li);
        }
      };