Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[JavaScript]⑩Arrayオブジェクト Arrayオブジェクトのメソッド 連想配列(Objectオブジェクト)

JavaScript

配列とは

  • リスト
  • いくつかの情報を番号といっしょに補完する
  • 「添字」という番号を用いて一つの変数名で複数のデータをまとめて管理出来るようにしたもの
Ayyayオブジェクト
  • 配列をArrayオブジェクトというオブジェクトとして扱う
  • 配列（ビルトインオブジェクト）を生成するにはnew演算子とArrayコンストラクタを使い新しいオブジェクトを生成する
  • 引数には要素数を渡す
  • var 配列名 = new Array(変数の数);
要素番号による要素の参照
  • 変数名 [要素番号(添字)]
  • 0から始まる配列のインデックス番号
  • キーともいう
配列の作り方
  • クラスからオブジェクトを作るキーワード newを使う
  • シンボルからインスタンスをつくるときと同じ考え方
  • シンボルやクラスは「もと」になるもの
  • そこから生まれたものはすべてオブジェクトとよばれる
  • var 配列名 = new Array(変数の数);
  • var 配列名 = [変数の数];
  • いろいろな型の変数を一つの配列にまとめることもできる
  • a = new Array(1, "five", "六");
配列リテラルとの違い
例題：配列を使って名前を列挙
<script>
var names = new Array(3);
names[0] = 'スライム';
names[1] = 'おおなめくじ';
names[2] = 'ドラキー';
for( var i = 0; i < names.length; i++){
     var r = Math.floor(Math.random()*3+1);
     document.write( names[i]+'が '+r+'たい あらわれた！<br>');
}
</script>
Arrayコンストラクタ（construtor、組立てる者）
  • var names = new Array(4);
  • 4つの空要素をもつ配列が生成
  • 空の要素には「undefined(未定義)」が格納される

配列の添字を活用

例題：配列を使った表を記述
  • 今日の曜日を取得(getDayメソッドで0~6が返却される)
  • 今日から７日分の降水確率を表示
  • 降水確率は10%,20%,40%,0%,80%,60%,30%と推移
  • 0~30%を晴れ、40~70%を曇り、70~100%を雨と表示する
<body>
<table border="1">
<caption>１週間の天気予報</caption>
<script>
/* 宣言 */
var d = new Date();
var w = d.getDay();
var wday = new Array('日','月','火','水','木','金','土');
var rain = new Array(10, 20, 40, 0, 80, 60, 30);
/* 曜日 */
document.write( '<tr><th>曜日</th>');
for( var i=0; i<=6; i++){
  document.write( '<th>'+wday[w]+'</th>');
  w++;
  if(w == 7) w=0;
}
document.write( '</tr>');
/* 降水確率 */
document.write( '<tr><th>降水確率</th>');
for( var i=0; i<=6; i++){
  document.write( '<td>'+rain[i]+'%</td>');
}
document.write( '</tr>');
/* 天気 */
document.write( '<tr><th>天気</th>');
for( var i=0; i<=6; i++){
  if( rain[i] < 30 ){
    document.write( '<td>はれ</td>');
  }else if( rain[i] < 70){
    document.write( '<td>くもり</td>');
  }else{
    document.write( '<td>あめ</td>');
  }
}
document.write( '</tr>');
</script>
</table>
</body>

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

  • 配列はArrayオブジェクトのインスタンスであるため、配列をオブジェクトとして扱うとあらかじめ用意されたメソッドを利用できる
joinメソッド：要素を連結
  • 各要素を指定した文字列で連結する。
  • 引数を指定しないとカンマが入る（初期値）
sortメソッド：並び替え
  • 要素をsortメソッドで並び替える
  • compareは2つの値を比較する「比較関数」
  • 引数に比較関数を使うと内部で比較関数を呼び出し、結果をもとに並べ替える
<script>
function compare(a, b){
     return a - b;//大きい順に並び替える
}
</script>
</head>
<body>
<script>
var ages = new Array(49,2,8,44,9,12,66,3);
ages = ages.sort(compare);
document.write(ages.join(' > '));
</script>
</body>
主なメソッド
  • concat 配列に要素を追加、新たな配列を生成
  • join 配列の要素を引数で指定した文字列でつなげた文字列を返す
  • pop 配列の最後の要素を取り出す
  • push Arrayオブジェクトのメソッド
  • reverse 配列の要素を逆順にする
  • shift 配列の最初の要素をとりだす
  • slice 配列の要素の一部をとりだし新たな配列を生成
  • sort 要素の並び替え
  • unshift 配列の最初に要素を追加

連想配列

  • 添字の代わりに文字列「キー」で要素を指定
  • 連想配列は「Objectオブジェクト」として扱う
連想配列の生成
<script>
var animals = new Object();
     animals['cat'] = '猫';
     animals['dog'] = '犬';
     animals['rabbit'] = 'うさぎ';
     animals['bird']= '鳥';
document.write( animals['rabbit']+'<br><br>');
/* for~in文で変数animにキーが格納 */
for( var anim in animals ){
     document.write( animals[anim] + '<br>');
}
</script>
リテラルによる連想配列の生成
<script>
var animals = {rabbit:'うさぎ', dog:'いぬ', cat:'ねこ', fish:'さかな'}
document.write( animals.fish );
</script>
キーをプロパティとして利用
<script>
var animals = {rabbit:'うさぎ', dog:'いぬ', cat:'ねこ', fish:'さかな'};
/* 連想配列形式で要素にアクセス */
animals[ 'fish' ] = 'さば';
document.write( animals.fish );
/* プロパティ形式で要素にアクセス */
animals.cat = 'イリオモテヤマネコ';
document.write( animals.cat );
</script>

d.hatena.ne.jp