2021/01-2023/12/15

JavaScript: データを並べ替える (ソート)

概略

データを一定の規則に従って並べ替える操作を ソート (sort) と言います。配列 Array の sort() を使います。

MDN: Array.sort()

ソートでは並べ替えの順番を決めるため大小比較を行います。

例1: 文字列をあいうえお順に並べ替える。
例2: 数値の大小を比較して並べ替える。

Array.sort() でソートする

Array.sort() で引数なしの場合は文字列の比較になります。文字コードの値を見て文字コードの順に並べ替えます。注意点として、配列の要素が文字列ではなく数値の場合でも文字列に変換してソートします。

TestJS_sort_array_string01.html
文字列の配列をソートするサンプル。ソートの結果で、1) ひらがなの "あ" とカタカナの "ア" や 2) 半角の "1" と全角 "１" などが離れた位置に並ぶ点に注意してください。

文字列も数値と同じように比較演算子 (< や <= など) で大小を比較することができます。例えば、あいうえお順や ABC 順に並べ替えることができます。
並べ替えは国語辞典などでも出てくる話ですが Array.sort() は文字コードの順に並べ替える点で少し異なります。
文字列の大小を比較する

Array.sort( コールバック ) でソートする

Array.sort() では引数にコールバックを指定することできます。並べ替えの方法をユーザーが細かく制御できます。

array = array.sort( コールバック );

具体的には

array = array.sort( (a, b) => 大小比較の結果を数値で返す );

コールバックの戻り値は数値で返します。論理値 (ture/false) ではない点に注意してください。

・コールバックの戻り値
  a と b が同じ場合は 0 を返す。この場合、並べ替えはしません。
  a よりも b の方が大きい ( a, b の順に並べたい ) 場合は 負の値 を返す。
  a よりも b の方が小さい ( b, a の順に並べたい ) 場合は 正の値 を返す。

コールバックで不等号の比較を行う場合は論理値 true/false を返さないようにしてください。論理値を返すと true = 1、false = 0 と見なされるので正しくソートできません。

・失敗 :論理値 true/false を返すとソートしません。
  array.sort( (a, b) => a > b );

・正常 :論理値ではなくて数値を返す。
  array.sort( (a, b) => a > b ? -1 : 1 );

文字列を String.localeCompare() で並べ替える

下は String.localeCompare() で文字列の大小比較を行ってソートするサンプルです。

TestJS_sort_string_localCompare01.html

// array の要素は文字列です。数値や null などを入れないこと。
// sort() の引数にアロー関数のコールバックを指定する。
array.sort( (a, b) => a.localeCompare(b) );

// String.localeCompare() では
// ・半角と全角の数字やアルファベットを区別しません。
// ・ひらがなとカタカナを区別しません。

数値の比較でソートする

配列の要素が文字列ではなく数値の場合でも array.sort() (引数のコールバックなし) では 数値の並べ替えではなく文字列の並べ替えになる 点に注意してください。

数値でソートする場合はコールバックで数値の差を返します。

// 配列の要素は数値です。文字列を混ぜないこと。
array = array.sort( (a, b) => a - b );  //アロー関数で数値の差を返す。

TestJS_sort_array_number01.html
数値の配列をソートするサンプル。

配列の要素に数値ではなく数字の文字列が混ざるとつまらないトラブルの原因になるので注意してください。文字列の数字は Numner(), parseInt(), parseFloat() などで数値に変換した後で計算します。
文字列を数値に変換する
 データを正規化して処理する

2重配列のテキストデータをソートする (2023/12)

TestJS_sort_matrix01.html (2023/12)
2重配列のテキストを指定の列でソートする。
テキストを2重配列に分割する
ツールサンプル (1)

Node.js: テキストの処理 (1)

HTML 要素を並べ替える (2023/12)

上のソート処理を応用して HTML の li タグや table タグを並べ替えることもできます。 HTML 要素の削除・追加の処理が加わります。
HTML 要素を削除・移動する

TestJS_sort_ul_li_01.html
li 要素の textContent の文字列を見て並べ替える。
ul,ol,li タグ: JavaScript (1)

TestJS_sort_table_tr01.html (2023/12)
table をソートする。指定の列 (td) の値を見て行をソートする。
HTML tableタグ: JavaScript (1)