JavaScriptで数値をソートする｜sortの比較関数と元配列を残す方法

数値の配列をsort()したのに、10が2より前に並んで戸惑うことがあります。JavaScriptの既定のソートは数値の大小をそのまま比べる処理ではないため、数字を昇順にしたい場合は比較関数を渡します。

ここでは有限の数値が入った配列を例に、昇順・降順と元の配列を残す書き方を紹介します。コードはブラウザーの開発者ツールやNode.jsで実行できます。

比較関数を渡して昇順にする

const values = [2, 10, 1];
console.log(values.sort());

この例の順序は[1, 10, 2]です。比較関数がない場合、要素は文字列として比較されるため、数値の大小とは異なる順序になり得ます。

const values = [2, 10, 1];
console.log(values.sort((a, b) => a - b));

比較関数を(a, b) => a - bにすると、順序は[1, 2, 10]になります。比較結果が負ならaをbより前に、正なら後ろに、0なら同順位として扱います。a > bのような真偽値だけを返す関数では、負の結果がなく、正しい比較条件を表せません。

降順にする

const values = [2, 10, 1];
console.log(values.sort((a, b) => b - a));

引く順番を入れ替えると[10, 2, 1]になります。比較関数の戻り値は順位の差そのものにする必要はなく、正・負・0の意味が整っていることが大切です。

元の配列を残して並べ替える

sort()は呼び出した配列そのものを変更します。表示用に並べ替えて元データも使いたい場合は、先にコピーを作れます。

const original = [2, 10, 1];
const sorted = [...original].sort((a, b) => a - b);
console.log(JSON.stringify(original));
console.log(JSON.stringify(sorted));
console.log(original === sorted);

[2,10,1]
[1,2,10]
false

スプレッド構文で新しい配列を作ったため、元配列の順序は変わりません。このコピーは浅いコピーです。要素がオブジェクトの場合、配列の順序は別々に管理できますが、中のオブジェクトまで複製されるわけではありません。

オブジェクトの数値項目で並べ替える

const rows = [
  { name: "alpha", score: 20 },
  { name: "beta", score: 3 }
];
const ordered = [...rows].sort((a, b) => a.score - b.score);
console.log(ordered.map(row => row.name).join(","));

この例の出力はbeta,alphaです。scoreが小さい順に並びます。取得したデータに値の欠落、文字列、NaNが混ざる場合は、先に入力を検査し、どの値を前後に置くかを決めてから比較関数へ渡してください。

toSortedを使う

const values = [2, 10, 1];
const sorted = values.toSorted((a, b) => a - b);
console.log(JSON.stringify(values));
console.log(JSON.stringify(sorted));

toSorted()は新しい配列を返す方法です。この例では元配列が[2,10,1]、結果が[1,2,10]になります。古い実行環境では未対応の場合があるため、利用するブラウザーやNode.jsで使えるかを確認してください。対応が必要な環境にない場合は、前のスプレッド構文とsort()の組み合わせが使えます。

数字に見える文字列や日本語の名前を並べる処理では、入力の型や照合の目的も変わります。まず数値の配列なのかを確かめ、昇順・降順と元配列を変更してよいかを決めると、選ぶコードが明確になります。

参考資料

• MDN: Array.prototype.sort()
• MDN: Array.prototype.toSorted()