配列を操作する - web-0127のブログ

Arrayオブジェクトのメソッド

配列は、Arrayオブジェクトのインスタンスです
配列をオブジェクトとして扱うと、あらかじめ用意された便利なメソッドを利用できます

要素を joinメソッドで連結

要素の増減にかかわらず、そのまま連結して表示します

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Arrayオブジェクトのメソッド</title>
</head>
<body>
<h3>
<script>
var ages = new Array(8, 6, 10, 24, 1, 11, 40, 2);

  document.write(ages.join(' > '));
</script>
</h3>
</body>
</html>

※引数「 > 」を指定しない場合は「,（カンマ）」が間に入ります

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>toStringメソッド</title>
</head>
<body>
<script>
var seasonStr;
var season = new Array('春','夏','秋','冬');
seasonStr = season.join('　');
  document.write(seasonStr);
</script>
</body>
</html>

要素をsortメソッドで並び替える

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Arrayオブジェクトのメソッド</title>
</head>
<body>
<p>
<script>
var ages = new Array(8, 6, 10, 24, 1, 11, 40, 2);
  ages = ages.sort(compare);
  document.write(ages.join(' > '));
</script>
</p>
</body>
</html>

※この記述では、文字列として昇順に並び替えられます

要素をreverseメソッドで逆から並べ替える

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>reverseメソッド</title>
</head>
<body>
<script>
var theArray=new Array('one', 'two', 'three', 'four', 'five');
theArray.reverse();
var len = theArray.length;

for(i = 0; i < len; i++){
	document.write(theArray[i] + '<br>');
}
</script>
</body>
</html>

大小を比較する関数 compareを作成

compareは、２つの値を比較する「比較関数」

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Arrayオブジェクトのメソッド</title>
<script>
function compare(a, b) {
  return a - b;
}
</script>
</head>
<body>
<p>
<script>
var ages = new Array(8, 6, 10, 24, 1, 11, 40, 2);
  ages = ages.sort(compare);
  document.write(ages.join(' > '));
</script>
</p>
</body>

以下のような記述も可能

<script>
function compare(a, b) {
  return a - b;
}

var ages = new Array(8, 6, 10, 24, 1, 11, 40, 2);
  ages = ages.sort(compare);
  document.write(ages.join(' > '));
</script>

Arrayオブジェクトのメソッド

sortメソッドと比較関数

「sortメソッド」は、要素を文字列として昇順に並べ替えます
引数に「比較関数」を指定すると、内部で比較関数を呼び出して、その結果をもとに数字として並び替えをおこないます

判定	戻り値
引数１が大きい	正の値
引数１と引数２が等しい	０
引数２が大きい	負の値

<script>
function compare(a, b) {
  return a - b; //大きい順に並べ替えられる
}
</script>

Arrayオブジェクトの主なメソッド

メソッド名	説明
concat	配列に要素を追加して新たな配列を生成する
join	配列の要素を引数で指定した文字列でつなげた文字列を戻す
pop	配列の最後の要素を取り出す
push	**Arrayオブジェクトのメソッド
reverse	配列の要素を逆順にする
shift	配列の最初の要素を取り出す
slice	配列の要素の一部を取り出して新たな配列を生成する
sort	要素を並び替える
unshift	配列の最初に要素を追加する

まとめ

配列には、Arrayオブジェクトのメソッドを実行できる
要素を接続した文字列を戻す「joinメソッド」
要素を並び替える「sortメソッド」