JS/Vueメソッドは、オブジェクト配列をあるフィールド(フィールド値が中国語)でソートして分類する(el-buttonボタントリガ)


ソート対象データ:
  titleDatalist:[
      {id:1,titleTypes:'   ',titlescore:1},
      {id:2,titleTypes:'   ',titlescore:8},
      {id:10,titleTypes:'   ',titlescore:5},
      {id:15,titleTypes:'   ',titlescore:2},
      {id:22,titleTypes:'   ',titlescore:1},
      {id:7,titleTypes:'   ',titlescore:0}
    ]

タイムトリガボタン:
   

JS/vue使用
メソッド1(デフォルトのソート):
    sortsort() {
      this.titleDatalist.sort(this.sortId);
    },
    sortId(a, b) {
       return a["titleTypes"].localeCompare(b["titleTypes"]);
    },

メソッド2(シーケンスソートルールを指定):
    sortsort() {
      this.titleDatalist.sort(this.sortId);
    },
    sortId(a, b) {
      let list = ["   ", "   ", "   ", "   ", "   "];
      return list.indexOf(a.titleTypes) - list.indexOf(b.titleTypes);
    },

———————————————————————————————原理:
Arrayを使うsort()、localeCompare()
Array.sort()公式ドキュメントの説明:
構文:arr.sort([compareFunction])パラメータ:①compareFunctionは、ある順序で並べられた関数を指定するためにオプションです.省略すると、要素は変換された文字列の各文字のUnicodeポイントに従って並べ替えられます.2 firstElの比較に使用される最初の要素.3 secondEl比較用の2番目の要素.値のソート後の配列を返します.配列はその場でソートされ、コピーされていないことに注意してください.
sortfunctionパラメータに関数が指定されている場合は、次のいずれかの値を返さなければなりません.
負の値は、渡された最初のパラメータが2番目のパラメータより小さい場合です.0、2つのパラメータが等しい場合.正の値です.最初のパラメータが2番目のパラメータより大きい場合.
localeCompare()公式ドキュメント解釈
localeCompare()メソッドは、参照文字列がソート順の前または後、または指定された文字列と同じかどうかを示す数値を返します.構文:stringObject.localeCompare(target)
比較結果の数値を説明します.stringObjectがtargetより小さい場合、localeCompare()は0より小さい数を返します.stringObjectがtargetより大きい場合、メソッドは0より大きい数を返します.2つの文字列が等しい場合、またはローカルソートルールによって区別がない場合、このメソッドは0を返します.stringObj.localeCompare(target)で誰が誰を比較するかで、リストの昇順か降順かが決まります.