JavaScript - 配列のソート方法（昇順、降順）

Javascriptarray

JavaScriptで文字列、数値、オブジェクトの配列を並べ替える方法を紹介します。

1. 文字列配列のソート

文字列配列の場合、次のように sort() を呼び出すと、アルファベット順にソートされます。 (昇順)

const arr = ['kiwi', 'apple', 'melon', 'grape', 'banana'];

arr.sort();
console.log(arr);

Output:

[ 'apple', 'banana', 'grape', 'kiwi', 'melon' ]

1.1 降順のソート

降順でソートするには、 sort() で文字列を降順でソートする比較関数を作成し、引数に渡す必要があります。 比較する2つの文字列のサイズが等しい場合は0、大きい場合は正数、小さい場合は負の数を返すように実装すると降順でソートされます。

const arr = ['kiwi', 'apple', 'melon', 'grape', 'banana'];

arr.sort(function (a, b) {
    if (a > b) return -1;
    else if (b > a) return 1;
    else return 0;
  });
console.log(arr);

Output:

[ 'melon', 'kiwi', 'grape', 'banana', 'apple' ]

関数を実装するのが面倒な場合は、 sort() で昇順にソートした後、 reverse() を呼び出して配列の順序を変更して降順と同じ結果を作成するように実装できます。

const arr = ['kiwi', 'apple', 'melon', 'grape', 'banana'];

arr.sort();
arr.reverse();
console.log(arr);

Output:

[ 'melon', 'kiwi', 'grape', 'banana', 'apple' ]

2. 数値配列の並べ替え

2.1 間違った方法

数値配列に sort() を実行すると、数値を文字列に変換してソートします。文字列 11 は 2 より小さいため、以下のように数値サイズで並べ替えられません。したがって、この方法でソートしないでください。

const arr = [22, 11, 2, 9, 1, 5];

arr.sort();
console.log(arr);

Output:

[ 1, 11, 2, 22, 5, 9 ]

2.2 正しい方法(昇順)

sort() に 2 つの数字を比較する関数を実装して引数に渡す必要があります。以下のように a - b の値を返すように実装すると昇順になります。 a が大きい場合は正数、b が大きい場合は負、等しい場合は 0 が返されるため、このように簡単に実装できます。

const arr = [22, 11, 2, 9, 1, 5];

arr.sort(function (a, b) {
  return a - b;
});
console.log(arr);

Output:

[ 1, 2, 5, 9, 11, 22 ]

2.3 正しい方法(降順)

降順は比較関数で b - a の値を返すだけです。以下のように簡単に実装できます。

const arr = [22, 11, 2, 9, 1, 5];

arr.sort((a, b) => b - a);
console.log(arr);

Output:

[ 22, 11, 9, 5, 2, 1 ]

3. オブジェクト配列の比較

オブジェクト配列の並べ替えも、以下のように比較関数を実装できます。オブジェクトで比較する要素を選択してサイズを比較するだけです。

const arr = [
    {id: 22, name: 'kiwi' },
    {id: 11, name: 'apple' },
    {id: 2, name: 'melon' },
    {id: 9, name: 'grape' }
  ];

arr.sort((a, b) => a.id - b.id);
console.log(arr);

Output:

[
  { id: 2, name: 'melon' },
  { id: 9, name: 'grape' },
  { id: 11, name: 'apple' },
  { id: 22, name: 'kiwi' }
]

上記の例は昇順でソートされます。降順は b.id - a.idで計算できますか？

Related Posts

codechachaCopyright ©2019 codechacha