Javascript 30 Day 17~18

他のDayと比較して全体的には簡単であるが,これらはいずれも正規表現やArray法を練習できる課題である.内容が短いので、Day 17とDay 18で学んだことを一度に書きます.

TIL

🎈 17.正規表現

  const bands = [
    "The Plot in You",
    "The Devil Wears Prada",
    "Pierce the Veil",
    "Norma Jean",
    "The Bled",
    "Say Anything",
    "The Midway State",
    "We Came as Romans",
    "Counterparts",
    "Oh, Sleeper",
    "A Skylit Drive",
    "Anywhere But Here",
    "An Old Dog",
  ];

// 배열 bands에서 관사 a, the, an을 삭제하고자 함
  function removeArticles(bandName) {
    return bandName.replace(/^(a |the |an )/i, "").trim();
  }
  const removedBands = bands.map((band) => removeArticles(band));
  console.log(removedBands);

  /* 0: "Plot in You"
  1: "Devil Wears Prada"
  2: "Pierce the Veil"
  3: "Norma Jean"
  4: "Bled"
  5: "Say Anything"
  6: "Midway State"
  7: "We Came as Romans"
  8: "Counterparts"
  9: "Oh, Sleeper"
  10: "Skylit Drive"
  11: "Anywhere But Here"
  12: "Old Dog" */

冠詞を削除しようとする関数removeArticlesでは,a,the,anという冠詞をarray.replace()で削除した.パイプの選択に使用する

/^(a |the |an )/i

これらの由来不明な文字を正規表現と呼ぶ.

正規表現(正規表現)

正規表現は、文字列内の特定の文字の組合せを一致させるモードです.JavaScriptでは、正規表現もオブジェクトです.

RegExpでのexecメソッド、testメソッド

Stringのmatchメソッド、replaceメソッド、searchメソッド、splitメソッド

一緒に使う.MDN
正規表現を作成する方法は2つあります.正規表現の反復方法を使用します.

一般的
鉄屑で包む.ex) const test = /ab+c/;

RegExpジェネレータ関数の呼び出し
ex) const test = new RegExp("ab+c");

正規表現の特殊文字は、各ルールを満たす文字列を検索するために使用されます.MDNドキュメントを見るといろいろな種類がありますが、Day 17で使った内容だけ見ればわかります.

/^(a |the |an )/i

^:入力の開始を示します.例えば、/^a/「a name」のaに対応し、「name」のaに対応しない.

x|y:xまたはyを表します.

i:小文字と大文字を区別しないことを示します.

正規表現で表される文字列に対応するものを見つけ、array.replace()に削除します.

🎈 17.要素間、急峻な場合

  document.querySelector("#bands").innerHTML = sortedBands
    .map((band) => `<li>${band}</li>`);

innerHTMLで整列したバンド名をリストにしようとすると、下の画像のようにカンマが突き出ている様子が見えます.

これは,配列された項目をstringに変換する際にjavascriptがtoString()を基本的に用いることによる現象である.toString()の値はカンマで区切られます.配列法の1つであるjoin()を用いて、以下の問題を解決することができる.

  document.querySelector("#bands").innerHTML = sortedBands
    .map((band) => `<li>${band}</li>`)
    .join("");

✨ 18. Arrayのようですが、Arrayではないことに注意してください。

    <ul class="videos">
      <li data-time="5:43">Video 1</li>
      <li data-time="2:33">Video 2</li>
      <li data-time="3:45">Video 3</li>
      <li data-time="0:47">Video 4</li>
                    (중략)
    </ul>

ビデオリストのデータ-時間の選択者として「データ-時間」を選択し、コンソールに出力してフラットに表示します.しかし、原型を確認すれば配列ではなくNodeListで灸を確認できる.

// __proto__: NodeList

最終的にはアレイのように見えますが、アレイではないため、アレイメソッドの使用にもエラーが発生し、使用できません.解決するために、それを本物の配列に変えます.展開文を配列に挿入するか、次のようにarray.from()を使用します.

    const timeNodes = Array.from(document.querySelectorAll("[data-time]"));
    // __proto__: Array(0)