サイトアイコン LUCKLOG

【Javascript】一次元・二次元配列を簡単にソートする方法

Javascriptで配列に入れたデータを元に円グラフを作成したかったのですが、円グラフを作る際に降順(大きい順)の方がグラフが見やすいと思い、ソートをしました。(※ちなみにデータ読み込み時にソートできるのであれば、それがベストだと思います

ちょうど良い機会ですので、Javascriptで一次元配列および二次元配列をソートする方法について、メモしておこうかなと思います。

スポンサーリンク

一次元配列のソート

一次元配列をソートする方法(昇順と降順)です。

昇順(小さい順)にソートする

let test = [5, 3, 4, 1, 2];
console.log(test); // ソート前
test.sort(function(me, you) {
  return me - you;
});
console.log(test); // ソート後

下記の通り、昇順(小さい順)にソートできました。(※上がソート前、下がソート後

引用:chromeのディベロッパーツール

降順(大きい順)にソートする

let test = [5, 3, 4, 1, 2];
console.log(test); // ソート前
test.sort(function(me, you) {
  return you - me;
});
console.log(test); // ソート後

下記の通り、降順(大きい順)にソートできました。(※上がソート前、下がソート後

引用:chromeのディベロッパーツール

二次元配列のソート

二次元配列をソートする方法(昇順と降順)です。

1つ目の要素に対して昇順(小さい順)にソートする

let test2 = [
  [5, 2],
  [3, 1],
  [4, 4],
  [1, 3],
  [2, 5],
];
console.log(test2.concat()); // ソート前
test2.sort(function(me, you) {
  return me[0] - you[0];
});
console.log(test2); // ソート後

下記の通り、1つ目の要素に対して昇順(小さい順)にソートできました。(※上がソート前、下がソート後

引用:chromeのディベロッパーツール

1つ目の要素に対して降順(大きい順)にソートする

let test2 = [
  [5, 2],
  [3, 1],
  [4, 4],
  [1, 3],
  [2, 5],
];
console.log(test2.concat()); // ソート前
test2.sort(function(me, you) {
  return you[0] - me[0];
});
console.log(test2); // ソート後

下記の通り、1つ目の要素に対して降順(大きい順)にソートできました。(※上がソート前、下がソート後

引用:chromeのディベロッパーツール

2つ目の要素に対して昇順(小さい順)にソートする

let test2 = [
  [5, 2],
  [3, 1],
  [4, 4],
  [1, 3],
  [2, 5],
];
console.log(test2.concat()); // ソート前
test2.sort(function(me, you) {
  return me[1] - you[1];
});
console.log(test2); // ソート後

下記の通り、2つ目の要素に対して昇順(小さい順)にソートできました。(※上がソート前、下がソート後

引用:chromeのディベロッパーツール

2つ目の要素に対して降順(大きい順)にソートする

let test2 = [
  [5, 2],
  [3, 1],
  [4, 4],
  [1, 3],
  [2, 5],
];
console.log(test2.concat()); // ソート前
test2.sort(function(me, you) {
  return you[1] - me[1];
});
console.log(test2); // ソート後

下記の通り、2つ目の要素に対して降順(大きい順)にソートできました。(※上がソート前、下がソート後

引用:chromeのディベロッパーツール

二次元配列(中身が連想配列)のソート

二次元配列(中身が連想配列)をソートする方法(昇順と降順)です。

1つ目の要素Aに対して昇順(小さい順)にソートする

let test3 = [
 {
    'A': 5,
    'B': 2,
  }, {
    'A': 3,
    'B': 1,
  }, {
    'A': 4,
    'B': 4,
  }, {
    'A': 1,
    'B': 3,
  }, {
    'A': 2,
    'B': 5,
  },
];
console.log(test3.concat()); // ソート前
test3.sort(function(me, you) {
  return me['A'] - you['A'];
});
console.log(test3); // ソート後

下記の通り、1つ目の要素Aに対して昇順(小さい順)にソートできました。(※上がソート前、下がソート後

引用:chromeのディベロッパーツール

1つ目の要素Aに対して降順(大きい順)にソートする

let test3 = [
 {
    'A': 5,
    'B': 2,
  }, {
    'A': 3,
    'B': 1,
  }, {
    'A': 4,
    'B': 4,
  }, {
    'A': 1,
    'B': 3,
  }, {
    'A': 2,
    'B': 5,
  },
];
console.log(test3.concat()); // ソート前
test3.sort(function(me, you) {
  return you['A'] - me['A'];
});
console.log(test3); // ソート後

下記の通り、1つ目の要素Aに対して降順(大きい順)にソートできました。(※上がソート前、下がソート後

引用:chromeのディベロッパーツール

2つ目の要素Bに対して昇順(小さい順)にソートする

let test3 = [
 {
    'A': 5,
    'B': 2,
  }, {
    'A': 3,
    'B': 1,
  }, {
    'A': 4,
    'B': 4,
  }, {
    'A': 1,
    'B': 3,
  }, {
    'A': 2,
    'B': 5,
  },
];
console.log(test3.concat()); // ソート前
test3.sort(function(me, you) {
  return me['B'] - you['B'];
});
console.log(test3); // ソート後

下記の通り、2つ目の要素Bに対して昇順(小さい順)にソートできました。(※上がソート前、下がソート後

引用:chromeのディベロッパーツール

2つ目の要素Bに対して降順(大きい順)にソートする

let test3 = [
 {
    'A': 5,
    'B': 2,
  }, {
    'A': 3,
    'B': 1,
  }, {
    'A': 4,
    'B': 4,
  }, {
    'A': 1,
    'B': 3,
  }, {
    'A': 2,
    'B': 5,
  },
];
console.log(test3.concat()); // ソート前
test3.sort(function(me, you) {
  return you['B'] - me['B'];
});
console.log(test3); // ソート後

下記の通り、2つ目の要素Bに対して降順(大きい順)にソートできました。(※上がソート前、下がソート後

引用:chromeのディベロッパーツール

まとめ

Javascriptで一次元配列、二次元配列を簡単にソートする方法をソースをあげて確認しました。

簡単には簡単なのですが、sortメソッドの引数で指定している「functionの戻り値」に関しては、分かるような分からないような…という感じが若干残ります。

今回は一次元配列、二次元配列をそれぞれ昇順・降順にソートする使用例までにしますが、今後「functionの戻り値」によって、どのようにソートされているか?、まとめてみたいなと思います。
→簡単にですが調べてまとめてみました「【Javascript】sortメソッドのソート方法について調べてみた。知ることで更に使いやすくなる

それでは、最後までお読みいただきありがとうございました!

スポンサーリンク