javascriptはじめました - 5限目 変数と配列 その2

なんだか久しぶりになってしまいましたが、やめたわけじゃないですよ。たまってた仕事を片付けただけです。ええ、これでも一応仕事あるんですよ。カタギなんですよ。銭湯でヤクザの親分さんとフレンドリーな会話をして以来、それを目撃していた他のお客さんからは「そこそこエライ怖い人」扱いされて困ってますけど。ガラスの心を持った一般人なんだけどな。(´・ω・`)

配列

ま、そんなヨタ話はともかくとして続き。配列について。テキストにそって進んで行くよ！

var a = 100;

こういうふうにすると、データ1個しか入れられない。「a=100」。それだけ。複数のデータを入れるには配列をつくればいいらしい。

var a = [100, 200, 300];

こうすりゃ複数入れられると。各データは「a[0]」「a[1]」「a[2]」となる。つまり、

• a[0]=100
• a[1]=200
• a[2]=300

であると。延々後ろに増やすこともできるわけだな。こりゃデータの整理に便利だ。チェックしたいときは「alert」で見りゃいい。

var a = [100, 200, 300];
alert(a[1]),

こうすりゃ配列の2番目を見れる。

• 配列a1

にゃるほどね。そして数値を変えたい場合は式を一行足せばいい。

a[1] = "タケルンバ";

こうすれば配列の2番目が置き換わる。「100,タケルンバ,300」になるわけだ。せっかくなのでそれぞれ出してみよう。
まずは配列の1番目。

var a = [100, 200, 300];
a[1] = "タケルンバ";
alert(a[0]),

• 配列a2

100が出てる。オッケー。続いて配列の2番目。うまくいっていれば「200」じゃなくて「タケルンバ」と出るはず。

var a = [100, 200, 300];
a[1] = "タケルンバ";
alert(a[1]),

• 配列a3

イエス！　最後は3番目。

var a = [100, 200, 300];
a[1] = "タケルンバ";
alert(a[2]),

• 配列a4

300。オッケー完璧だ。
……で、ふと思った。設定しているのは配列3つ分。4つ目を呼んだらどうなるんだろう。

alert(a[3]),

こうしてみたら？

var a = [100, 200, 300];
a[1] = "タケルンバ";
alert(a[3]),

• 配列a5

「undefined」。定義されてねえと。なるほどねえ、教えてくれてありがとさん。

lengthプロパティ

配列をつくると「lengthプロパティ」ってのが自動的に出来るんだって。また横文字だね。どうしてこうも横文字ばかりなんだろうね。

• http://dic.yahoo.co.jp/dsearch?enc=UTF-8&p=length&dtype=1&dname=1na&stype=0&pagenum=1&index=04151100
• http://dic.yahoo.co.jp/dsearch?enc=UTF-8&p=%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3&dtype=0&dname=0na&stype=0&pagenum=1&index=18270116404700

要は「長さの情報」ってことね。……和訳すりゃいいのにな。

var a = [100, 200, 300];

この配列だと「100」「200」「300」とあるから、「a.length」は「3」であると。そういうことみたい。
試しにまた「alert」で確認してみっか。

var a = [100, 200, 300];
alert(a.length);

• a.length1

確かに3だ。……ちょっと増やしてみっか。

var a = [100, 200, 300, 400, 500, 600, 700];
alert(a.length);

• a.length2

無事作動。問題ごぜえません。
で、この長さを指定すると、どこまでを表示できるかを決められると。例えば、

a.length = 2;

を入れると2番目まで。

var a = [100, 200, 300, 400, 500, 600, 700];
a.length = 2;
alert(a);

こうすると配列aの2番目までを表示するはずだ。

• a.length3

なるほどねえ。……仮に、列より大きい数を指定したらどうなんだろ。

var a = [100, 200, 300, 400, 500, 600, 700];
a.length = 10;
alert(a);

データは7個しかないのに、10個分指定してみた。

• a.length4

「...」扱いっすか。空っぽ扱いってことなんだろね。ふむふむ。
でもこれを使うと、先頭から順に何番目までを表示させるか自由に指定できるってわけだ。例えば成績順の配列をつくり、上位5人までを表示とかも出来るわけだよね。

var a = ["鈴木", "田中", "佐藤", "山本", "山田", "加藤", "松本"];
a.length = 5;
alert(a);

• 成績順

「var a」に名前を並べて、「a.length」で上位何番目までかを指定すりゃいいわけだ。ふむふむ。

配列のメソッド

メソッド……。orz　本当に横文字ばっかだな。

• http://kaden.yahoo.co.jp/dict/?type=detail&id=3629

「手続き」とか「方法」とかでいいじゃんねえ。……ま、こういうのは横文字言語なんで仕方ねえか。

push()

配列の最後尾に付け足すメソッドらしい。

var a = [100, 200, 300];

これに「400」を足したい場合は、

var a = [100, 200, 300];
a.push(400);

とすると。また「alert」で確認してみるよ。

var a = [100, 200, 300];
a.push(400);
alert(a);

• push(400)

pop()

逆に最後尾を削るのが「pop」。

var a = [100, 200, 300];
a.push(400);
a.pop();

こうすると、

1. 配列aは「100,200,300」
2. 配列aの最後尾に「400」を加える
3. 配列aの最後尾の値を1個削る（400）

という流れになるわけだ。「push」の場合、何を足すかの情報が必要だからカッコ内に値を入れる必要があるけど、「pop」の場合、自動的に最後尾を削るわけだから、カッコ内の指定はいらんと。

var a = [100, 200, 300];
a.push(400);
a.pop();
alert(a);

• pop()

concat()

既にある配列に、別の配列を結合して新配列をつくれる。

var a = [100, 200, 300];
var b = a.concat(400, 500);

こうすると、配列aはそのままに、「400,500」を足した配列bができる。

var a = [100, 200, 300];
var b = a.concat(400, 500);
alert(a);

• concat()1

配列aはそのまま。

var a = [100, 200, 300];
var b = a.concat(400, 500);
alert(b);

• concat()2

配列bにはきちんと結合されてる。加工するとき便利そうだねえ。

sort()

文字通りソートするらしい。文字コード順。会員番号とかのデータベース処理するときに使えるっぽい。

var a = [300, 100, 200];
a.sort();
alert(a);

• sort()1

ただ注意するべきは、数字の大小で並べ替えするわけじゃないみたい。文字コード順。

var a = [3, 100000000, 20000];
a.sort();
alert(a);

みたいにしても、

• sort()2

頭の数字で判断されちゃう。桁を合わせて数値処理しないとエラーの原因になるだろね。

join()

ジョインするんだよ。……投げやりすぎますね。配列の間を加工できる。

var a = [100, 200, 300];
a.join(" |дﾟ)";

こうすると、

100 |дﾟ)200 |дﾟ)300

ってなると。……ただ、なんか「alert」だとうまくできなかった。「Firebug」ではうまくいったので、コードの問題じゃないんだけど。……ま、このあたりは要課題。処理はできているんだけど、ポップアップで表示できねえってだけなんだろう。とりあえずそれで良しとする。わからんものにこだわっても仕方あんめえ。
これも活用し甲斐がありそうな感じ。

reverse()

リバースですよ。逆順にするのですよ。

var a = [100, 200, 300];
var b = a.reverse();
alert(a);

ってすると、

• reverse()

うーんマンダム（死語）。

slice()

なんか範囲指定して、値を抜き取れるようなんだけど、テキストの説明文が難解でよくわからん。

10日でおぼえる JavaScript 入門教室 新版

（p.29）
「2つの整数を引数として取り、第1引数の値を、インデックスに持つ要素から第2引数の値をインデックスに持つ要素の直前の要素までを、新しい数列として返す」

10日でおぼえる JavaScript 入門教室 新版 - はてなキーワード

まったく意味がわかりません。orz　頭がクラクラします。
こういうときはいじくって意味を探ったほうが手っ取り早い。

var a = [100, 200, 300, 400, 500];
var b = a.slice(1);
alert(b);

とりあえず長めの配列をつくって、「1」でやってみるよ。

• slice()1

お、「100」だけ表示されなかったな。ということは、1つ目の引数は、表示しないところの範囲を意味するのかな？　試しに「3」にしてみよう。仮説が正しければ「400,500」と出るはずだ。3番目までを飛ばすという意味だから。

var a = [100, 200, 300, 400, 500];
var b = a.slice(3);
alert(b);

• slice()2

ビンゴ！　1つ目の引数は飛ばす範囲指定だ。……マイナスにするとどうなるんだ？

var a = [100, 200, 300, 400, 500];
var b = a.slice(-1);
alert(b);

• slice()3

var a = [100, 200, 300, 400, 500];
var b = a.slice(-3);
alert(b);

• slice()4

先頭から飛ばすの逆で、後ろから表示させるって意味になるのね。なるほど。
で、問題はもうひとつ。2つ目の引数だ。これはなんじゃらな。

var a = [100, 200, 300, 400, 500];
var b = a.slice(1, 2);
alert(b);

とりあえずこれでやってみよう。

• slice()5

「200」。ということは、1つ目の引数が表示させない範囲で、2つ目の引数は表示させる範囲ってことか？　「1,2」と指定すると「配列の1つ目までは表示させず、2つ目までを表示させよ」ということになるのか？
そこでこう変えてみた。

var a = [100, 200, 300, 400, 500];
var b = a.slice(1, 4);
alert(b);

仮説が正しければ4番目までを表示させるので「200,300,400」となるはずだ。

• slice()6

なるほどね。配列の切り出し方の指定方法なわけだ。切る手前と奥の場所をそれぞれ指定して切る感じだから「slice」というわけね。野菜とかを切るのをイメージするといいな。

こういうことですね。

（p.29）
「2つの整数を引数として取り、第1引数の値を、インデックスに持つ要素から第2引数の値をインデックスに持つ要素の直前の要素までを、新しい数列として返す」

10日でおぼえる JavaScript 入門教室 新版 - はてなキーワード

……これじゃわかんねえよ。画像1枚の方がはるかに意味がわかりやすいと思うんだけどね。
ま、こういうことは、オレみたいなド素人だからわかることなのかもしれんけども。詳しい人にはド素人目線ができないからね。「わからないことがわからない」わけで。ましてオレみたいなド素人は「なにもかにもわからない」なわけでねえ。
テキストづくりも大変だ。……ま、そこが腕の見せどころのはずなんだが。
ま、とりあえずこれで今回はおしまい！

javascriptはじめました記事一覧

• javascriptはじめました - 1限目 Hello, world! - タケルンバ卿日記 2008-07-26
• javascriptはじめました - 2限目 日付と時間の表示 その1 - タケルンバ卿日記 2008-07-26
• javascriptはじめました - 3限目 日付と時間の表示 その2 - タケルンバ卿日記 2008-07-28
• javascriptはじめました - 4限目 変数と配列 その1 - (旧姓)タケルンバ卿日記 2008-07-30
• javascriptはじめました - 5限目 変数と配列 その2 - (旧姓)タケルンバ卿日記 2008-08-08