魔法JS☆あれい 第3話「もうsortもreverseも怖くない」

登場人物

丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

• 第1話「popでpushした、ような……」
• 第2話「shiftはとってもunshiftって」

sort()

イテレー太「あれい、状況説明をサボるけど、今戦闘の真っ最中だよ！」
あれい「ついにサボるとか言い出したなこの駄犬」
イ「そしていつものように、僕が魔法世界から召喚したデータを、あれいの配列魔法を使って、敵の弱点に合わせた値に変換してreturnする事で、ダメージを与えて敵を倒してよ！」
あ「そこだけはセリフが説明的なんだよな」
イ「さて、今回僕が魔法世界から召喚したデータは……これだよ！」

items = [
  { name: '越前おろしそば', price: 650 },
  { name: '海老天おろしそば', price: 1100 },
  { name: 'あげおろしそば', price: 850 },
  { name: 'とろろおろしそば', price: 800 },
];

あ「あー、今度は福井の蕎麦屋のメニューか」
イ「そして、今回の敵の弱点は、『要素のpriceの値が低い順に並んだ配列』だよ！」
あ「なんだよその弱点。あと第3話にして急に難度が上がったな」
イ「さあ、あれいの配列魔法で、メニューを安い順に並べ替えてreturnして倒してよ！」
あ「面倒くせえなあ……」

items.sort((a, b) => a.price - b.price); 

あ「これでいいのか」
イ「あれい、もうちょっと試行錯誤して盛り上がろうよ」

解説

配列の要素をin placeでソートします。このソートは stable ではありません(訳注:同じ序列を持つ値の順番が保証されません)。 デフォルトではUnicodeコードポイントの昇順にソートされます。

（MDNより）

sort()メソッドは、その名の通り、配列の要素をルールに基づいて並べ替えます。
引数無しでsort()メソッドを実行した場合、配列の要素は値の小さい順（昇順）に並べ替えられますが、具体的には下記の比較関数の戻り値によって順番が判定されます。

items.sort((a, b) => a < b ? -1 : a > b ? 1 : 0); 

まず2つの要素（a、b）を選び、値を比較します。aが比較対象のbより小さければ順位が上、大きければ順位が下、同じならば同点として判定します。この繰り返しにより、すべての要素が順番に並べ替えられます。
しかし、今回の例のような階層構造の配列の場合、この方法では大小を判定できないため、意図どおりに並べ替えることができません。そういう場合は、比較関数の中で『どの値を比較対象にするか』を明示する必要があります。今回の例では、要素であるオブジェクトのpriceの値を比較しています。

items.sort((a, b) => a.price < b.price ? -1 : a.price > b.price ? 1 : 0); 

さらに、比較対象が単純な数値であれば、下記のように簡単に記述することができます。比較の結果、正の数・負の数・0のいずれかが返ればよいからです。

items.sort((a, b) => a.price - b.price); 

reverse()

イ「さて、次の敵が出てきたよ！」
あ「おう」
イ「そして、次の敵の弱点は、なんと『要素のpriceの値が高い順に並んだ配列』だよ！」
あ「ああ」
イ「さあ、あれいの配列魔法で、今度は高い順に並んだメニューをreturnして倒してよ！」
あ「面倒くせえなあ……」

return items.reverse();

あ「これでいいのか」
イ「あれい、お願いだからもうちょっとやる気出してよ」

解説

配列の要素を In-place アルゴリズム で反転させます。最初の要素は最後に、最後の要素は最初になります。

（MDNより）

reverse()メソッドは、配列の要素の順番を反転させるだけの単純なメソッドです。これ以上特に説明することがありません。

次回予告

spliceさん、本当に優しいメソッドだったんだ。
配列の要素を取り除いたり、置き換えたり、追加したりする為にどういうメソッドがいるのか、私達に思い知らせる為に、この人は……

第4話 fillも、spliceも、copyWithinもあるんだよ