Array Object

arrayオブジェクトとは配列の事です。
arrayオブジェクトのメソッドは、nn4にはあるが、ie4には無い物は省きます。
このページでは配列とは? を説明して行くかたちになります。



【 配列 】
配列オブジェクトとは複数の値を持つ事のできる特殊な変数だと思ってください。
通常変数は1つの値しか持つ事はできませんが、配列オブジェクトとする事によって
必要な数だけ、値を格納する事ができるようになります。
基本的には、1つ目、2つ目、3つ目と言うように、配列に格納される値には
インデックスがふられます。
オブジェクトの何番目の値、と言う様に指定する事でその値を操作できます。



【 基本的な作り方 】
var WeekName = new Array();
これで weeknameと言う配列オブジェクトが出来上がりました。
ただしこの状態では、weeknameにはなにも入っていません。
また、この配列の長さ(要素の個数)も決まっていません。
はじめから、配列の長さ(要素の個数)が決まっている場合は
var WeekName = new Array(7);
の様に、配列の要素数を入れて配列を生成します。



【 配列の要素 】
配列の要素を入れ込むには
WeekName[0] = "Sun"; // index 0 の値 文字列を入れ込む場合
の様にインデックス指定を伴って行います。
インデックスは 0 から始まりますので 配列の要素数が7なら
インデックスは 0〜6 と言う事になります。

配列を生成する際にすでに要素まで確定している場合は
要素を直接入れ込んで、配列を生成する事もできます。
var WeekName = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
要素の値が文字列なので、シングル・ダブルクォーテーションを付けています。
要素はそれぞれカンマで区切られます。
これで weeknameには 要素数 7 と各要素の値が決まった状態で生成されます。
1つ目が0と言うインデックスになります。

ちょっと省略できる場合の要素入れ込み
要素の値が、インデックスと同じ番号を持つような値の場合
for文を用いて、簡略化できる場合があります。
var Imgs = new Array(30);
imgsと言う配列に mark01.gif 〜 mark30.gif と言う要素を入れ込むとします。
この場合順に入れて行くと imgs[0] が mark01.gif imgs[29]が mark30.gif となります。
画像の方の番号は常にインデックスに1足した数字になる規則がありますね。
また、この場合 インデックスが1桁の場合、01 のように0を付けて2桁表示にします。
for(i=0; i<30; i++){
t=i+1;
if(t<10){t = "0" + t; }
Imgs[i] = "mark" + t + ".gif";
}

1足さなければならない事と、0を付ける場合があるので i をそのままでなく
t に置換えるような使い方をしています。



【 連想処理配列 】
配列の要素は基本的には インデックスを使って
WeekName[インデックス] と表すしますが
この他に、各要素に名前を付けて取出すような方法があります。
Perlでの %連想配列 と同じような物です。
var WeekName = new Array(7)
WeekName["Sun"] = "日曜日";
WeekName["Mon"] = "月曜日";
WeekName["Tue"] = "火曜日";
WeekName["Wed"] = "水曜日";
WeekName["Thu"] = "木曜日";
WeekName["Fri"] = "金曜日";
WeekName["Sat"] = "土曜日";

この場合、この要素入れ込みと同じように
WeekName["Sun"] とすると、その値が 日曜日 として取出せます。
この場合、インデックスでの取出しはできません。
また、最初の段階で Array(7) の様に長さを指定しないと
この配列の長さを lengthプロパティで確認する事もできません。
長さが変ってしまったらlengthは役に立ちません。

変数ではなく配列を使わざるを得ない場合等があります。
引数などによって得た値によって、使う変数を変える場合
変数の名前をもらっても、それを変数を指す言葉としては使えません。
ですから、数字や文字で貰って 配列[数字・文字] として
配列変数の要素の値として取出す事になります。



【 多次元配列 】
通常の配列の要素を言い表すと
(値,値,値,値,値,値,値 ・・・・・) となります。
さて、この値 それぞれが 配列オブジェクトだったらどうなるでしょう?
(配列,配列,配列,配列 ・・・・・) となるわけですが
それぞれが配列なのでそれぞれの配列は、自分の配列の要素を持つ事になります。
((値,値,値・・),(値,値,値・・),(値,値,値・・),(値,値,値・・)・・・)の様になるわけです。
さて、これで外枠からみて 1つ目の配列を表すには、配列[0]となりますね
次にその要素である内側の配列の要素は?
配列[0][0] のようになります。配列[0] の[0] 番目と言う意味です。
これは単純な2次元配列ですが、この様に多次元化する事もできます。
次の例は、10個の要素を持つ配列があり、その要素がそれぞれ 5個ずつの
要素を持っているような配列を作ってみました。

var CRs = new Array()
for(i=0; i<10;i++){
    CRs[i] = new Array()
    for(t=0; t<5; t++){
        CRs[i][t] = "";
    }
}
CRs を配列にして、その要素 CRs[i] をまた配列オブジェクトとして生成します。
そして内側の配列の値を決めています。
2次元配列を図にすると次のような感じです、
まず行の数が外枠の配列、その行にいくつ列があるかが内側の配列
Arrays[i][t]
[t] →
[i]↓
012・・・・・t
0CRs[0][0]CRs[0][1]CRs[0][2]・・・・・CRs[0][t]
1CRs[1][0]CRs[1][1]CRs[1][2]・・・・・CRs[1][t]
2CRs[2][0]CRs[2][1]CRs[2][2]・・・・・CRs[2][t]
3CRs[3][0]CRs[3][1]CRs[3][2]・・・・・CRs[3][t]
























iCRs[i][0]CRs[i][1]CRs[i][2]・・・・・CRs[i][t]
2次元配列はこの様な表で表す事ができます。

プロパティ



基本的なプロパティは、配列の長さ(要素の数)を表す lengthプロパティだけです。
配列の長さが決められて、生成された場合は 要素が空でも
長さは要素を入れることので着る部屋の数となります。
var WeekName = new Array(7);
n = WeekName.length
WeekName と言う配列の長さ(個数)は WeekName.length で表します。

メソッド



IE4とNN3、またはNN4で共通で使える、配列操作の為のメソッドです。

concat()[IE4,NN4] 配列の連結 新しい配列を作って返します
配列1(array1)、と配列2(array2)があるとします。
配列1と2を連結した物を作るには
変数 = array1.concat(array2)と書きます。
この意味は少し気を付けてください。
array1にarray2を連結しているわけではありません。
array1、array2の順番で連結した物を 新しい変数に入れているだけです。
この変数は 両方を足した、配列オブジェクトになります。
つまり、この式の後も array1,array2はそれぞれ元のままです。

array1 = new Array("A","B","C","D")
array2 = new Array("a","b","c","d")
array3 = array1.concat(array2)

結果
array1は "A","B","C","D"
array2は "a","b","c","d"
array3は "A","B","C","D","a","b","c","d"
となります。

join()[IE4,NN3] 配列の要素を連結して文字列にして返します
使い方
var stary = array1.join(",")
joinの()には 書く配列要素の間(区切り)になる文字を入れます。
IEでは 省略すると 長さ0の文字として扱われ、各要素が区切り無く
つながった状態になってしまいます。
これは結果を返す物なので array1は 元のままです。

array1 = new Array("A","B","C","D")
stary = array1.join(";")

結果
staryは文字列型の変数で、値は A;B;C;D となります。

reverse()[IE4,NN3] 配列の要素を逆順に並べ替えます
配列の要素は インデックスで 0 〜 終り までならんでいますが。
その順番を反転させてしまいます。
array1 = new Array("A","B","C","D")
この時点でarray1[0] は A
array1.reverse();
この時点でarray1[0] は D
これは戻り値を取る物ではなく、配列そのものに反映します。
上の例では array1は D,C,B,A と言う順番に変わっています。

slice()[IE4,NN4] 配列の一部を取出し その配列を返します
変数 = array1.slice(start,end) startには、取出しを開始する Index番号を入れます。
endには 取出しの終端となる Index番号を入れる とJS解説にも
書いてあるのですが、、、、、Index0 を 1個目と数えて、
何個目まで を入れる方が正しいのかもしれません。
つまり Index 8 までの場合は 9 を入れると言う事です。
変数は取出された要素を格納する配列オブジェクトとなります。

次の例を見てください。

var test = new Array("A","B","C","D","E","F","G");
var test2 = test.slice(0,3);


startは基本的に省略できません。
startとendを省略すると 最初から最後までを取出します。が(一応駄目)
startを省略して endだけと言うのは駄目です。
end を省略した場合は、配列の最後までとなります。
var test = new Array("A","B","C","D","E","F","G");
var test2 = test.slice(3);

これは D,E,F,G が取出されます。

endに マイナスの数を指定した場合は、endが配列の一番後ろから数えて
マイナスの数だけ省いて場所になります。
var test = new Array("A","B","C","D","E","F","G");
var test2 = test.slice(0,-3);

結果は A,B,C,D になります。

array1.slice()は array1から取出した値を返す物なので
array1には変更は加えられません。

sort()[IE4,NN4] 並べ替えを実行します
array1.sort( function )で、配列 array1 を並べ替えを行います。
通常functionを指定しないと、文字列の場合は 文字コード順、数値の場合は
小さい順に並べかえられます。

functionに指定する関数の作り方ですが、2つの引数を受け取り
それを比較(計算)する関数を作ります。
配列はindex0から順に 1つ目、2つ目として引数で渡して結果により並べ替えます。
比較(計算)では、引数 a,b (1つ目、2つ目)の計算後の値が 正になる場合は
b が前に出ます。負になる場合は a が前に出ます。
例:
function SortRules(a,b){ return a-b;}
var array1 = new Array(0,1,2,3,4,5,6,7,8)
array1.sort(SortRules);
この場合 array1は 元のままの 0,1,2,3,4・・・ の順です。
関数の方で b-aにすれば、正と負が逆になりますので
8,7,6,5,4・・・ の順になります。

sort()は、配列自体を変更する物で、戻り値を取る物ではありません。
array1.sort() 実行後は、元のarray1は 並べ替えをされた状態になります。

toString()文字列にした物を返します
arrayオブジェクト専用メソッドではなく、オブジェクトを文字列にする物です。
一般的にはオブジェクトを文字列にすると、要素の間にカンマが入ります。
配列の要素が カンマを含む文字列だったりすると、区別が付かなくなることがあります。
その場合は、join() を使って確実にわかる文字列で、区切らせた方が理解できます。
文字列にした物を何に使うかの用途次第ですね。
これも、実行結果を返す物なので、元の配列は、配列オブジェクトのままです。
var str = array1.toString();
var test = new Array("A","B","C","D","E","F","G");
var test2 = test.toString();

test2 の中身は A,B,C,D,E,F,G と言う文字列です。
Tips & Samples



配列の作り方の部分でほとんど書いたので サンプルなどはありません。

配列 Arrayオブジェクトは、オブジェクトです。
ですから、普通の変数のように = でコピーができません。
var ARY1 = new Array()
ARY2 = ARY1;
この場合、 ARY2は オブジェクトとして操作できますが
これは、ARY1を参照しているショートカットのような状態です。
ですから ARY2にsort()等変更を加えると、ARY1も変更が加えられます。
オブジェクトの場合、この様な書き方では同じ物をコピーする事ができません。
両方がリンクされてる状態のままになってしまいます。

もし同じ配列を作りたいなら、for文などですべて順にコピーしていく
等の様な方法になるのではないでしょうか。
なんかもっと他に方法があるような気もしますが・・・。
var array1 = new Array(10)
var array2 = new Array()
for(i=0;i>array1.length;i++){
    array2[i] = array1[i];
}



『配列』と言う言い方と多少違う部分があるのですが、扱いはほとんど同じなのでオブジェクト作成も含めて書いておきます。

var ARY = new Array(2,4,6,7,8,9)
と書く代わりに
var ARY = [2,4,6,7,8,9]
と書いても同じです。

連想配列の場合は
var ARY = {'aaa':2,'bbb':4,'cccc':6}
の様に { } を使ってキーと値の組み合わせを :コロンで組み合わせて書き込みます。
これは実際は配列ではなく、オブジェクトになるんだと思いますが扱いはほぼ同じです。

案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 200円/月
( お試し7日間 )

CORE SERVER 416円/月
( お試し15日間 )

ロリポップ 263円/月
( お試し期間10日間 )

チカッパ 500円/月
( お試し期間15日間 )

ヘテムル 1500円/月
( お試し期間15日間 )

さくら 125円/月
( お試し期間2週間 )

無駄な高額ドメイン管理料金払ってませんか?

バリュードメイン
ムームードメイン

膨大な数の命令をサンプルとあわせて解説。機能別にすぐ引けます!Web2.0を支えるJavaScriptを詳細解説。AjaxやDOM Scriptingで必要となる、DOM/XML/通信の解説を大幅強化。Internet Explorer、Firefox、Safariなど、最新ブラウザに対応。サンプルスクリプトがダウンロードできます。
命令/関数/オブジェクト/真偽/計算/演算・変換/数値/配列/文字列/正規表現〔ほか〕 JavaScript
ポケット
リファレンス
改訂第4版
JavaScriptの文法からAmazon Webサービス・Googleマップまでこの1冊だけでキホンから実践まで、Ajaxのすべてがやさしく学べます。
1 JavaScriptの基本(イントロダクション/変数と計算/条件分岐、繰り返し、関数/オブジェクト)/2 ブラウザーとHTMLの操作(ブラウザーの操作/DOM)/3 JavaScriptによるAjaxの実践(Ajax)/付録 基礎Ajax

JavaScript
言語解説部分とリファレンス部分に分け、その言語解説部分をまとめたもの。第5版では、全章の内容を更新し、XMLHTTPRequestオブジェクトでスクリプトからHTTPリクエストに送信する方法、JavaScriptを使ってXMLデータの制御、またJavaScriptによるグラフィックの制御機能についてなど、新しい話題を追加した。
JavaScriptの概要/第1部 コアJavaScript(字句構造/データ型と値/変数/式と演算子 ほか)/第2部 クライアントサイドJavaScript(Webブラウザに組み込まれたJavaScript/ブラウザウィンドウの制御/ドキュメントの制御/CSSとダイナミックHTML ほか) JavaScript第5版
JavaScriptを、基礎から学習できます。プログラミングの初歩から、オブジェクトやイベントまで、わかりやすく系統的に解説したプログラミングの入門書です。学習項目ごとに、例題や練習問題が用意されているので、習得のチェックをすることができます。この1冊で「基本言語仕様」「オブジェクト」「DOM」「イベント処理」など、JavaScriptの基本がしっかり身につきます。
JavaScriptの概要/JavaScriptの基本言語仕様/オブジェクト/DOM(Document Object Model)/イベント処理/各種処理/JavaScriptの今後/練習問題、章末問題の解答 基礎から学べるJavaScript標準コースウェア
本書は、JavaScriptのリファレンスについて、コアJavaScriptとクライアントサイドJavaScriptに分けて解説しています。コアJavaScriptリファレンスでは、JavaScript1.5とECMAScriptバージョン3によって定義されたすべてのクラス、オブジェクト、コンストラクタ、メソッド、関数、プロパティ、定数について解説します。クライアントサイドJavaScriptのリファレンスでは、レガシーなブラウザ対応のAPI、DOMレベル2の標準的なAPIを扱うほか、XMLHTTPRequestオブジェクトやcanvasタグのような新しい情報もカバーします。
1章 コアJavaScriptリファレンス(Arguments/Array/Boolean/Dateほか)/2章 クライアントサイドJavaScriptリファレンス(Anchor/Applet/Attr/Canvas ほか) JavaScriptクイックリファレンス
136本定番サンプルを掲載。ナビゲーション画面から手軽に動作確認。すぐに引ける便利なプロパティ・メソッドのリファレンス。74項目も併せて掲載。Webコンテンツ制作者、必携。
第1章 DOMの概要/第2章 HTML文書の内容を操ろう/第3章 イベント/第4章 フォーム/第5章 スタイルシート/第6章 Ajax+DOM/第7章 オブジェクト指向でいこう/付録 JavaScript,Ajax,DOMによるWebアプリケーションスーパーサンプル
いまや星の数ほどあるWebページ。そのなかであなたのWebサイトがひときわ注目を集めるためには、ユーザーをうならせるテクニック、あっと驚かせるワザが必要です。本書では、意外と気づ付かないHTMLのTipsから、CSS(スタイルシート)を使った効果的なデザインの方法など、あなたの思い通りにWebサイトをグレードアップする裏技を、すぐに使えるサンプルソース付きで豊富な解説。さらに、JavaScriptを活用したインタラクティブなページの作り方や、CGIで各種情報を取得する便利なテクニックなども多数紹介しています。 図解
誰にも教えたくないWeb制作秘密のテクニック200
本書は、ホームページを一味違ったものにするために欠かせない裏ワザ(TIPS&TRICKS)を集大成したものである。
HTML&CSS編(色と装飾/画像/フィルター/マウスオーバー ほか)/JavaScript/ダイナミックHTML編(スクリプト/DOMとダイナミックHTML/IE最新ワザ/XML) HTML/JavaScript/CSSホームページ裏ワザ大辞典
スーパーカリスマアフィリエイター伊藤哲哉氏とSEOの達人鈴木将司氏が贈るアフィリエイトの秘伝書がここに極まる!著者や監修者が長年蓄積した、確実に稼げるアフィリエイターになるためのステップを一からみっちり解説。また、本当に稼げるテーマを選ぶコツやノウハウも満載。
アフィリエイトの基本/CTPMの法則:アフィリエイトの大原則/アフィリエイターで失敗する人、成功する人/アフィリエイトで稼ぐための4つのポイント/アフィリエイターを取り巻く環境の変化/アフィリエイトで稼げる分野を見極める/アフィリエイトで成功するキーワード選定方法/魅力あるコンテンツ作り/SEO対策とアクセスアップ/データ分析を極める(アクセス解析&ASPデータ解析)/収益をあげる細かいスパイス/アフィリエイト実践編
アフィリエイトの達人養成講座
カスケードスタイルシートとダイナミックHTMLは、より軽く、より刺激的なサイトを構築するための機能を満載しています。本書は、WEBコンテンツ作成のプロフェッショナルのために、CSSとDHTMLについて、実践的な架空サイトの構築例を使って詳細に解説します。 WebプロフェッショナルのためのCSSとDHTML