🍣

配列の並び替え / Array Sort / JavaScript

2024/02/05に公開

配列の並び替え / Array Sort

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

アルファベット文字列

  • 何も定義しないで使用
  • 配列の要素を文字列として扱い、UTF-16 コードの値を昇順に並べ替える.
const arr = ['March', 'dog', 'Dog', 'Dec', 'dec', 21, 1, 30];
arr.sort(); // 配列を変更, 数値も文字列として扱われる
console.log(arr);
// Expected output: Array [1, 21, 3, "Dec", "Dog", "March", "dec", "dog"]
//                         ^^^^^^^^ 注意

数値だけ

const arr = [3, 1, 5000, 30];
arr.sort((a, b) => a - b);
console.log(arr);
// Expected output: Array [1, 3, 30, 5000]

その他文字列・複雑なもの > String localeCompare

  • String メソッドの localeCompare を使う
  • localeCompare()は, 第一引数と比べて並び順が前に来るか後ろに来るかを判定.
  • 並び順が前に来るなら負の数値を、後ろに来るなら正の数値を返し、同じなら 0 を返す.

基本の使い方

const list = [
  { name: 'Hanako', date: '2021-12-03', weight: 54.8 },
  { name: 'Taro', date: '2021-12-02', weight: 78.1 },
  { name: 'Hanako', date: '2021-12-04', weight: 54.4 }
  { name: 'Hanako', date: '2021-12-02', weight: 54.2 },
  { name: 'Taro', date: '2021-12-04', weight: 77.2 },
];
list.sort((a, b) => {
    const result: number = a.date.localeCompare(b.date);
    return result !=0 ? result : a.weight - b.weight;
});

以下が結果

// Expected output of list:
[
  { name: 'Hanako', date: '2021-12-02', weight: 54.2 },
  { name: 'Taro', date: '2021-12-02', weight: 78.1 },
  { name: 'Hanako', date: '2021-12-03', weight: 54.8 },
  { name: 'Hanako', date: '2021-12-04', weight: 54.4 }
  { name: 'Taro', date: '2021-12-04', weight: 77.2 },
]

https://note.com/ym202110/n/nb784a359c945

ひらがな, カタカナ

const arr = ['イトウ', 'オギノ', 'マーティン', 'イノウエ'];
arr.sort((a, b) => a.localeCompare(b), 'ja');
// Expected output: Array ["イトウ", "イノウエ", "オギノ", "マーティン"]
  • ひらがな、カタカナが混ざっている場合,
    ひらがな五十音順 -> カタカナ五十音順にソートされる
  • その他の挙動は以下の順番に従う
  1. 記号
  2. 数字
  3. アルファベット(全角含む)
  4. ひらがな
  5. カタカナ
  6. 漢字 *漢字の順番はあてにならない

https://blog.kimizuka.org/entry/2021/06/03/121459

Discussion