JavaScript、配列要素の並び替え。

メソッドで簡単整理。

こんにちは、「ふ」です。
今回は配列の要素の並び順を、メソッドを使って簡単に並び替える方法について紹介していきます。
JavaScriptの配列にデータを保存している方は、情報整理がラクになりますよ。

SVGコーディングブック

著者：ふ

Apple Booksでみる

逆にする〜reverse( )。

array.reverse();

はじめに要素の並び順を逆にする方法。
これはreverse( )メソッドで簡単にできてしまいます。

const arr = [1,2,3,4];
console.log(arr.「「１reverse()」」);
「「３▶︎ [4,3,2,1]」」

要素の順番が反転しました。

元の配列も残したい。

⬇︎はarr2に、arr1をreverse( )させたものを代入しています。

const arr1 = [1,2,3,4];
const arr2 = arr.reverse();

console.log(arr2);
「「３▶︎ [4,3,2,1]」」

console.log(arr1);
「「３▶︎ [4,3,2,1]」」

その後、２つの配列を出力。
arr2は確かに要素の順番が逆になっています。が、元のarr1についても反転してしまっていることがわかります。

「元配列については本来の順番を保持しつつ、逆順に並べた配列を新たに作りたい」ときには新たに配列を作って、それをreverse( )するようにしましょう。

const arr3 = [...arr1].reverse();

⬆︎は、以下の手順をまとめて記述したものです。
　@1@ const arr3 = [ ]とすることで、新たな配列を作成。
　@2@ スプレッド演算子を使い、arrの内容を[ ]内にペースト。
　@3@ reverse( )で反転させています。

console.log(arr3);
「「３▶︎ [4,3,2,1]」」

console.log(arr1);
「「３▶︎ [1,2,3,4]」」

結果を確認。arr3は反転しましたが、元のarr1については並び順は変化していません。

このあと紹介していくものについても、元配列を保持したいときには、複製してから並び替え処理をするようにしてください。

JavaScriptの点３つ「 ... 」〜スプレッド構文（演算子）について。

〽️ 本質はオブジェクトの「複製」にあり。

Unicode順にならべるsort( )。

array.sort();

アルファベットや仮名順に並べたいときは、sort( )メソッドが使えます。

sort( )メソッドは、Unicodeの番号順に要素を並べ替える働きをします。
Unicodeは、世界中の文字に対して番号が割り当てられ管理されている集合体のことです。

アルファベットや日本語の仮名は、Unicode番号が小さい方から大きな方へと割り当てられています。そのためsort( )メソッドで並べ替えるとabc順/あいうえお順に配列要素を並べ替えることができます。

const uarr1 = ["b","d","a","c"];
console.log(uarr1.「「１sort()」」);
「「３▶︎ ["a","b","c","d"]」」

sort関数は、テキストの１文字目から順にたどって判定を行います。⬇︎の例のように、１文字目が同一なら次の文字のUnicodeを比較して並べ替えます。

const warr = ["bb","ba","ab","aa"];
console.log(warr.sort());
「「３▶︎ ["aa","ab","ba","bb"]」」

数値の大小は判定できない。

sort( )メソッドはあくまで「１文字目からUnicode番号を評価していく」という仕組みのため、数値の大小は評価してくれません。

const numarr1 = [2,1,4,3];
console.log(numarr1.sort());
「「３▶︎ [1,2,3,4]」」
    
const numarr2 = [2,100,40,3.5];
console.log(numarr2.sort());
「「３▶︎ [100,2,3.5,40]」」

１つ目のsort処理。
一見ちゃんと小さい数→大きい数の順に並べ替えられているようにも思えますが、配列要素がすべて0〜9の１文字であるため、Unicodeの番号順に並べられたにすぎません。

２つ目の処理を見てください。２〜３桁の数も含んでいる配列。
「１文字目のUnicode番号」から判定されていくため、数値としての大小はバラバラになってしまっています。
sort( )メソッドでは配列要素が数値であっても「文字列」として評価されてしまうのです。

数値として比較させるには、sort( )メソッドに関数を追加する必要があります。

sortの引数に関数を指定。

sortメソッドの引数の部分には、関数を定義できるようになっています。それにより「Unicode番号による比較」ではない、独自の判定基準で要素を並べ替えることが可能です。

さきほどの配列numarr2を「数の小さい順」に並べるには、⬇︎のような関数を引数に入れてやります。

const numarr2 = [2,100,40,3.5];

numarr2.sort(function(「「１a」」,「「１b」」) {
    return 「「１a-b」」;
});

これは何をしているのか。
sortメソッドの引数部分に２つの仮引数を含む関数を仕込むと、returnされるものが「正の値なら順序を入れ替え、0または負の値なら順序はそのまま」という処理を要素に対して行っていきます。
そして最終的にreturn内容に応じた昇順（小さい数→大きい数）に要素が並び替えられます。

[2,100,40,3.5]

return a-b

今回配列要素が上の４つで、returnの条件が「a-b」となっています。このバヤイ、以下の比較がなされていきます。

2 - 100 を評価：負の値（-98)となるので、順序はそのまま。
100 - 40 を評価：正の値（60）となるので、順序入れ替え。
100 - 3.5 を評価：正の値（96.5）なので、入れ替え。
40 - 3.5 を評価：正の値（26.5)、入れ替え。
2 - 3.5 を評価：負の値（-1.5)なのでそのまま。

この比較手順は「挿入ソート」と呼ばれるアルゴリズムです。興味のある方は調べてみてください🎵

numarr2.sort(function(a,b) {
    return a-b;
});

console.log(numarr2);
「「３▶︎ [2,3.5,40,100]」」

「a-bの結果が正か負か」の条件で順に比較していき、昇順に並べることができました。

numarr2.sort((a,b) => a-b);

ちなみにこのsort関数は引数と返り値しかないので、アロー関数で書いた⬆︎ほうがラクですよ。

numarr2.sort((a,b) => 「「１b-a」」);

console.log(numarr2);
「「３▶︎ [100,40,3.5,2]」」

降順（大→小）に並べたいときは、返り値を「b-a」としましょう。

ちなみにソート関数に対して、引数を３つ以上入れてもエラーにはなりませんが、３つ目以降の引数はundefined扱いになり、意味がありません。

JavaScriptの矢印「=>」〜これはアロー関数というものです。

〽️ 使い方とメリットについて解説。

ほかにもいろいろ。

sortメソッドに関数を定義すると、いろいろなものを並べ替えることができます。

const fruits = [
    "りんご","なし","パイナップル","ぶどう"
];

console.log(fruits.sort((a,b) => a.length-b.length));
「「３▶︎  ['なし', 'りんご', 'ぶどう', 'パイナップル']」」

⬆︎はlengthプロパティにアクセスして、文字数の少ない順に並べた例です。

const siblings = [
    {name:"太郎",age:20},
    {name:"二郎",age:18},
    {name:"花子",age:15}
];
console.log(siblings.sort((a,b) => a.age - b.age));

「「３▶︎ {name: '花子', age: 15} 
  {name: '二郎', age: 18}
  {name: '太郎', age: 20}」」

オブジェクトのageプロパティを取り出し、若い順に並べ替えました。

比較条件を数値的に「正または負の値を返す」状態に加工できれば、sortメソッドを使っていろいろな並び順にすることができます。少し工夫が必要かもですが、試してみてください。

最後までお読みくださり、　ありがとうございました。
ではまた〜 🎵