2
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-03-15

登場人物

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

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

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つの要素(ab)を選び、値を比較します。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もあるんだよ

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0