その他

javaScript 配列のデータを並び替える方法

その他
この記事は約5分で読めます。

はじめに

今回は並べ変えの処理について書いていきたいと思います。
自分のための備忘録としてなので、説明が所々省いてある箇所もあるかもしれないです。

基本的に並び替えは昇順、降順のどちらかで行いますよね?

はい、先生まず質問です。昇順、降順ってなんですか? (すっとぼけ)

昇順とは

  • コンピューターで、あるデータを並べ替える際、値が小さい順に並べること。文字列の場合、文字コードが小さい順となる。逆の順番に並べることを降順、並べ替えのことをソートという。
    https://bit.ly/3blHVYL

降順とは

  • 数を大から小へ数えた順序。逆順。
  • コンピューターで、あるデータを並べ替える際、値が大きい順に並べること。文字列の場合、文字コードが大きい順となる。逆の順番に並べることを昇順、並べ替えのことをソートという。
    https://dictionary.goo.ne.jp/word/%E9%99%8D%E9%A0%86/#jn-73304

ということで昇順、降順の意味がわかりましたね。
たまに僕もわからなくなります。関係ありませんが以上以下、超過未満もたま~にわからなくなります。(白目)

はい、突然ですが以下の乱数配列をプログラミングで昇順、降順にそれぞれ並べ変えてください

[34, 54, 9, 23, 52, 57, 83, 40, 67, 56, 3, 18, 11, 25, 55, 91, 10, 82, 0, 19,
 20, 39, 45, 59, 73, 84, 70, 79, 13, 42, 95, 78, 60, 32, 62, 41, 12, 37, 5, 6,
 1, 77, 7, 90, 63, 61, 99, 89, 53, 33, 86, 48, 65, 92, 21, 28, 31, 30, 51, 100,
 50, 36, 76, 44, 75, 4, 68, 96, 29, 16, 85, 98, 46, 49, 87, 80, 17, 71, 15, 22,
 69, 14, 47, 24, 72, 93, 66, 2, 35, 81, 27,88, 58, 97, 94, 38, 64, 43, 8, 26, 74];

並び替えるロジックを作ればいいんだな!!!!!となったはいいが、for文やmap使って繰り返しながらif文で条件分岐して、配列の変数作って順番に1から値いれて〜〜ってそんなことはハイパーめんどくさい。。。。
何か楽なものはないか。。。。

あります。

Sort関数

公式サイトから引用
簡単に説明すると
配列の値を並べ替えてくれて、引数の指定方法によって昇順、降順にしてくれる超便利な関数
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

昇順

  • 引数a-bを指定すると昇順
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
    return a - b;

});
console.log(`昇順${numbers}`); 

//出力結果1,2,3,4,5

降順

  • 引数a-bを指定すると降順
numbers.sort(function(a, b) {
    return b - a;
});
console.log(`降順${numbers}`); 

//出力結果5,4,3,2,1

上記内容を踏まえてさっきのランダム配列を昇順、降順で表示するロジックを組むとこうなる。

const arrayRandom=[34, 54, 9, 23, 52, 57, 83, 40, 67, 56, 3, 18, 11, 25, 55, 91, 10, 82, 0, 19,
 20, 39, 45, 59, 73, 84, 70, 79, 13, 42, 95, 78, 60, 32, 62, 41, 12, 37, 5, 6,
 1, 77, 7, 90, 63, 61, 99, 89, 53, 33, 86, 48, 65, 92, 21, 28, 31, 30, 51, 100,
 50, 36, 76, 44, 75, 4, 68, 96, 29, 16, 85, 98, 46, 49, 87, 80, 17, 71, 15, 22,
 69, 14, 47, 24, 72, 93, 66, 2, 35, 81, 27,88, 58, 97, 94, 38, 64, 43, 8, 26, 74];

//昇順
arrayRandom.sort(function(a, b) {
    return a - b;
});
console.log(`昇順順${arrayRandom}`); 
//出力結果[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100]

//降順
arrayRandom.sort(function(a, b) {
    return b - a;
});
console.log(`降順${arrayRandom}`);
//出力結果[100,99,98,97,96,95,94,93,92,91,90,89,88,87,86,85,84,83,82,81,80,79,78,77,76,75,74,73,72,71,70,69,68,67,66,65,64,63,62,61,60,59,58,57,56,55,54,53,52,51,50,49,48,47,46,45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0]

まとめ

簡単に並び替えてくれるのは便利だな〜って思いました。

おわり。