こんにちは！

デレクです😃

新年の最初の月曜日.みんなの新年の第1回のHELLAYが过ぎるのが良いことを知りたいです!
頭を触って頭を触って!
今日はDay 17の計画についてお話しします役に立つ気がするスタートパッ~

17. Sort without Articles

n/a.ターゲット

文字列を含む配列をalphabetical順に並べ替えます.しかし、前冠刑事を除く.
冠詞とは、a、an、the!これは簡単な問題で、その友达を除いて、お見合いに行きます.

let 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'];

整理名bandの配列を上図のように示します.

Derek実装コード

  const cutOffTitle = (bandName) => {
    if(bandName.startsWith("A ")) {
      return bandName.substring(2);
    }
    else if(bandName.startsWith("The ")) {
      return bandName.substring(4);
    }
    else {
      return bandName.substring(3);
    }
  }

  const changeTitle = (band) => 
  (band.startsWith("A ") || band.startsWith("The ") || band.startsWith("An ")) ?
        cutOffTitle(band) : band;
  
  const result = bands.sort( (a, b) => 
                            changeTitle(a) > changeTitle(b) ? 1 : -1 );

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

一つ一つ整理しておきます

01.cutOffTitle関数とchangeTitle関数

文字列がcutOffTitle、A 、The およびAn で始まる場合、この関数は切り取り関数です.
この関数は、changeTitle関数の3つの演算子構文に含まれます.

const changeTitle = (band) => 
  (band.startsWith("A ") || band.startsWith("The ") || band.startsWith("An ")) ?
        cutOffTitle(band) : band;

bandパラメータが3つの場合で始まる場合、cutOffTitle関数を実行するか、関数を返すだけです.
整理すると、changeTitle関数では、前にクラウンがあるかどうかを確認し、ある場合はcutOffTitle関数を呼び出してクラウンを切り取ります.
このchangeTitle関数はsortに使用されます.

02.sort関数

sort関数を実行する場合、callbackは必要に応じて調整できます.すなわち、changeTitle関数を使用します.

  const result = bands.sort( (a, b) => changeTitle(a) > changeTitle(b) ? 1 : -1 );

パラメータaとbをchangeTitle関数に直接入れて比較sortingします.sortいつ関数を見ても難しいです.以前の投稿を参考にアルファベット順でお見合いをしました.

03.画面出力機能

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

とても簡単です.resultを使用してmap要素を作成し、HTMLにグループ化し、joinに渡します.

Wes Bos実装コード

講義のWesBosの和弦が少し違うので知っておくともっと良くなるので整理しておきます

function strip(bandName) {
  return bandName.replace(/^(a |the |an )/i, '').trim();
}

const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);

同様に、正規表現を使用して文字列innerHTML関数を調整します.sort正規表現を1つずつ表示する場合は、

/^(a |the |an )/i:次の友人が開始すると表示されます.

^:(a |the |an )とスペース、aとスペース、theとスペースを組み合わせます.これらの友人から始まる正規表現を探します.

an:検索に敏感ではありません.つまり、私は大文字と小文字を気にしない.

文字列を検索し、iを使用してreplaceに置き換えます.つまり、空の文字列で置き換えます.言い換える消せ!
また、""関数は関数であり、前後にスペース文字があれば消去できます.
正規式は本当に難しいです理解できるけどうまく書けない感じ?英語のジョークのような存在.
***
***
***
今日は正規表現と'sort'関数に関する課題を整理した.どちらも自由自在にはできません

いつか私は達人になることを夢見ます...
エラーや修正が必要な場合は、いつでもフィードバックしてください.
ありがとう!🤗