0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptで配列をsortする方法

Last updated at Posted at 2020-09-22

この記事を書いた理由

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パッケージが入ってる場合、少し厄介ですね。


初学者からの視点で記述したので、誰かの勉強の手助けになれば嬉しいです!では!

0
0
2

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?