この記事を書いた理由
JavaScriptを勉強したばかりの時期に、あれ?配列をソートするにはどうしたら良いんだ?
と考える機会が増えてくると思います。以下に、昇順と降順のパターンを羅列してます。今回はidを対象に並び替えを実施してますが、名前を対象にすることも可能なので、少し面倒なやり方を選びました。
まずは、配列を作るところからスタート!
main.js
/*idとnameが含まれている配列*/
let arry = [
{ id: 5, name: "ayaka" },
{ id: 7, name: "uadagawa" },
{ id: 8, name: "katou" },
{ id: 3, name: "kentaro" }
];
❶:配列のidを降順で表示させる場合
main.js
arry.sort(function (a, b) {
if (b.id > a.id) return 1;
else return -1;
});
document.write(JSON.stringify(arry));
/*結果
[{"id":8,"name":"katou"},
{"id":7,"name":"uadagawa"},
{"id":5,"name":"ayaka"},
{"id":3,"name":"kentaro"}]
*/
❷:配列のidを昇順で表示させる場合
main.js
arry.sort(function (a, b) {
if (b.id < a.id) return 1;
else return -1;
});
document.write(JSON.stringify(arry));
/*結果
[{"id":3,"name":"kentaro"},
{"id":5,"name":"ayaka"},
{"id":7,"name":"uadagawa"},
{"id":8,"name":"katou"}]
*/
理屈としては、returnで1や−1と返している部分は、idの並び順です。
ex) 1,3なら、1が1番目に来て、3が2番目に来るって感じ。昇順ならね。
returnの1なんだけど、個人的には+1だと思ってるw
最後に、document.writeの部分は、console.logにしても良いんじゃないのか
という意見もあると思う。
main.js
document.write(JSON.stringify(arry));
/*ここは、console.logに変更してもらっても構わない。*/
codesandboxで、console.logもしくはdocument.writeを記述しても[object][object].......となってしまうのを防ぐために、上記の書き方をしています。jsonパッケージが入ってる場合、少し厄介ですね。
初学者からの視点で記述したので、誰かの勉強の手助けになれば嬉しいです!では!