今日のArray Methodの応用をご紹介します

どんな問題を解決しましたか。

まず、今日ブロックされている部分は検索ウィンドウの実装であり、任意のIDの配列が含まれている場合、inputウィンドウに入力された文字を含むIDを表示することができる.
条件は、for文ではなく、Arrayと配列に関するメソッドを使用することです.この場合、使用するキーワードは次のとおりです.

filter

forEach

from

include

はい.

どうやって問題を解決したの?

コードをインポートし、個々に説明します.

function checkInput() {
  searchInput.addEventListener("keyup", isCurrectId);
}

function init() {
  checkInput();
}

init();

まず,keyupイベントによりinputウィンドウのキー入力を受信する.

const isCurrectId = (event) => {
  deleteId();
  const toCheckId = event.target.value;
  const checkedId = checkArry.filter((el) => {
    return toCheckId !== "" ? el.includes(toCheckId) : false;
  });
  if (checkedId.length > 0) {
    checkedId.forEach((id) => {
      paintId(id);
    });
  } else {
    deleteId();
  }
};

次は、入力したイベントにeventを入力します.target.値によるアクセス、
filterとincludeを使用して、入力された文字が存在するかどうかを確認します.存在しない場合は、filterを介して配列に渡されます.

const paintId = (text) => {
  const searchedList = document.createElement("div");
  const searchedName = document.createElement("li");
  const searchedAvatar = document.createElement("img");
  searchedAvatar.src = `/images/avatar/${text}.jpg`;
  searchedName.innerText = text;
  if (text) {
    searchedList.classList.add("searched-list");
    searchedName.classList.add("searched-name");
    searchedAvatar.classList.add("searched-avatar");
    searchedList.appendChild(searchedAvatar);
    searchedList.appendChild(searchedName);
    searchBox.classList.add("showing");
    searchBox.appendChild(searchedList);
  }
};

次にif文で配列に値がある場合はforEachを使用して各配列項目に変換しpaintIdに移動します.paintIdからhtml要素を描画し、配列にアイテムがない場合はdeleteに移動してpaintによって生成された要素をクリアします.

const deleteId = () => {
  const searchedList = document.getElementsByClassName("searched-list");
  Array.from(searchedList).forEach((list) => {
    searchBox.removeChild(list);
  });
  searchBox.classList.remove("showing");
};

deleteはクラスのすべての要素をgetElementsByClassNameで受信するが、渡される要素はhtml collectionであるため、removeChildをすぐに使用することはできない.
この時はアリーfromを使用して類似配列に変換し、foreachですべての項目を削除します.
このとき、isCurrectIdの最初の開始部分でdeleteが使用されるのは、keyupイベントが発生するたびに生成されたhtml要素が削除されて初期化されるためである.

どの部分が問題ですか。

最も長い悩みは、htmlを生成することができますが、いつ削除するか、どのように削除するかです.
そしてisCurrectId部で

const isCurrectId = (event) => {
  deleteId();
  const toCheckId = event.target.value;
  const checkedId = checkArry.filter((el) => {
    return toCheckId !== "" ? el.includes(toCheckId) : false;
  });
  if (checkedId) {
    checkedId.forEach((id) => {
      paintId(id);
    });
  } else {
    //deleteId();
  }
};

に示すように、if文はcheckedIdで問題を発見し、checkedIdでは配列が入力され、空の配列がある場合もtrueが出力されるので、実際にif文はelseが出力できない構造である.
配列中にアイテムが見つかるようにifゲートの状態値をcheckedId.length > 0のように確定して解決しました.
さらに、削除操作をquerySelectorAllまたはgetElementByClassNameに一度にキャプチャし、deleteを完了して問題を解決することを推奨します.

きょうの教訓

以前からtrueとfalseの値として扱われている情報を知っていましたが、まだ分かりません.
今回明らかになりましたが、これからもあちこちで応用して、試してみます.
また、MDNで問題の最初のボタンを見つけた方法は、後で公式文書をよく調べます.
もちろん、並べ方についても学ぶべき問題です.