読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

配列を操作する

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は、2つの値を比較する「比較関数」
<!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メソッド」は、要素を文字列として昇順に並べ替えます
  • 引数に「比較関数」を指定すると、内部で比較関数を呼び出して、その結果をもとに数字として並び替えをおこないます


判定 戻り値
引数1が大きい 正の値
引数1と引数2が等しい
引数2が大きい 負の値

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


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

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


まとめ

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