JavaScriptで配列の並びをソートするsortメソッドの使い方

JavaScriptで配列を扱う際、要素をソートした時があります。そんな時はsort()メソッドが便利です。

構文

メソッド意味返り値
配列.sort([比較関数(省略可能)]);配列を比較関数の結果にしたがってソートする。配列
.sort()メソッド

比較関数は省略可能です。比較関数は省略のための2つの要素(a,b)を受け取り、返り値の数値の代償によって順番を決めます。

比較関数の計算に応じて結果は次の様になります。

  • 0未満 ・・・ a,bの順に要素をソート
  • 0 ・・・ a.bの順を変えない
  • 0より大 ・・・ b,aの順に要素をソート

サンプルコード

今回は、数字が入った配列を、数字が大きい順にソートしたものと、数字が小さい順にソートしたサンプルコードを紹介します。

if文で2つの値を比較して、sの結果に応じて 1,0,-1を返り値として戻します。

この3つの値によってソートをルール付けるわけです。

Output
元となる配列 [ 1, 3, 2, 5, 6, 7, 4, 8, 10, 9 ];
要素(数値)を大きい順にソートして出力
要素(数値)を小さい順にソートして出力
Pug
.container.my-5
	table.table
		tbody
			tr
					th 元となる配列
					td [ 1, 3, 2, 5, 6, 7, 4, 8, 10, 9 ];
			tr
				th 要素(数値)を大きい順にソートして出力
				td#targetText1
			tr
				th 要素(数値)を小さい順にソートして出力
				td#targetText2
			
			
	
JavaScript
const targetText1 = document.getElementById( 'targetText1' );
const targetText2 = document.getElementById( 'targetText2' );

/*参照元となる配列*/
const sampleArray1 = [ 1, 3, 2, 5, 6, 7, 4, 8, 10, 9 ];
const sampleArray2 = [ 1, 3, 2, 5, 6, 7, 4, 8, 10, 9 ];

const arraySort1 = sampleArray1.sort((a,b) => {
	if ( a < b ) {
		return 1;
	} else if( a === b ) {
		return 0;
	} else if ( a > b) {
		return -1;
	}
});

const arraySort2 = sampleArray2.sort((a,b) => {
	if ( a > b ) {
		return 1;
	} else if( a === b ) {
		return 0;
	} else if ( a < b) {
		return -1;
	}
});

targetText1.textContent = arraySort1;
targetText2.textContent = arraySort2;
インストラクター
コメント

コメントを残す