JavaScriptのsort()の使い方と昇順・降順(並び替え)のやり方

2021年2月14日JavaScript

JavaScriptのsort()メソッドの使い方と昇順・降順のやり方をまとめました。

sort()メソッドの基本的な使い方

sort()メソッドはオリジナルの配列をソートします。
すべての配列要素は文字列に変換され、文字列が UTF-16 コード単位順でソートされます。
数字も文字列になるため2と10なら1が最初にある10が先に並べられます。

//文字列
const members = ['yamada', 'kobayashi', 'kondo', 'wakida', 'ando'];
console.log(members.sort());//(5) ["ando", "kobayashi", "kondo", "wakida", "yamada"]
console.log(members);//(5) ["ando", "kobayashi", "kondo", "wakida", "yamada"]

//数字
const nums = [1,4,7,10,50.2,100,-400];
console.log(nums.sort());//(7) [-400, 1, 10, 100, 4, 50.2, 7]

sort()メソッドの使い方と昇順のやり方

compareFunction を与えると、ソートの基準を変更することができます。
なんでもいいのですが変数a, bとして、return < 0のとき、 a,bという順番で、return > 0のとき、b,aの順番にするという指定をすることができます。
a = 100, b = 4であれば、 100 > 4なので、return < 0以上つまり1を返せば、4,100の順番に並ぶということです。 

//return < 0,  A, B (Keep order)
//return > 0,  B, A (Switch order)
{
// Asccending　昇順のやり方１
const nums = [1,4,7,10,50.2,100,-400];
nums.sort((a, b) => {
  if ( a > b)
  return 1;
  if ( b > a)
  return -1;
});
console.log(nums);// (7) [-400, 1, 4, 7, 10, 50.2, 100]
}

これは、次のようにこのように書き換えることが可能です。

//return < 0,  A, B (Keep order)
//return > 0,  B, A (Switch order)
{
// Asccending　昇順のやり方２

  const nums = [1,4,7,10,50.2,100,-400];

  nums.sort((a, b) => a-b);
console.log(nums);// (7) [-400, 1, 4, 7, 10, 50.2, 100]
}

a > bという式は、a-bの値は常にプラスになるということです。
a < bという式は、a-bの値は常にマイナスになるということです。
つまり、a-bという値を返せば、プラスもしくはマイナスが返り、上と同じ意味になります。
sort()メソッドはオリジナルの配列をソートするので、その点に注意して使用しましょう。

sort()メソッドの使い方と降順のやり方

//return < 0,  A, B (Keep order)
//return > 0,  B, A (Switch order)
{
// Descending　降順のやり方１
const nums2 = [1,4,7,10,50.2,100,-400];
nums2.sort((a, b) => {
  if ( a > b)
  return -1;
  if ( b > a)
  return 1;
});
console.log(nums2);// (7) [100, 50.2, 10, 7, 4, 1, -400]
  }

これは、次のようにこのように書き換えることが可能です。

//return < 0,  A, B (Keep order)
//return > 0,  B, A (Switch order)
{
// Descending　降順のやり方２
  const nums2 = [1,4,7,10,50.2,100,-400];
  nums2.sort((a, b) => b-a);
  console.log(nums2);// (7) [100, 50.2, 10, 7, 4, 1, -400]
  }

sort()メソッドはオリジナルの配列をソートするので、意図してオリジナルの配列をソートする場合はそのまま使用しましょう。
オリジナルの配列をそのまま保持したい場合は、コピーを作成してそれをソートしましょう。

配列に囲まれたオブジェクトの並び替え

配列に囲まれたオブジェクトの並び替えの場合は、分割代入を使います。

const array = [
  { id: 3, name: 'aaa', price: 450 },
  { id: 1, name: 'bbb', price: 570 },
  { id: 5, name: 'ccc', price: 980 },
  { id: 2, name: 'ddd', price: 4600 },
  { id: 4, name: 'eee', price: 860 },
];

const sortedArray = [...array].sort((a, b) => a.id - b.id);
console.log(sortArray);

JavaScript

Posted by devsakaso