lengthで配列の要素の数を知る

JavaScript

あーりーです。

JavaScriptについて書いています。

 

 

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。

 

 

今回のテーマは「配列の要素の数を知る方法」です。

それがわかれば、その数に応じていろんな処理ができたりします。

 

 

本題に入る前に、まず…

 

 

配列と何か?

要素とは何か?

をおさえておきますね。

配列とは

配列とは、箱の集まりです。

 

 

その箱には、いろいろな情報を入れておくことができます。

箱に入れた情報は、あとから自由に取り出して使えます。

 

 

※配列について詳しくは、過去記事の「よくわかる配列の基本」をご覧ください。

要素とは

要素とは、配列の「箱」のことです。

 

 

さきほど、配列とは情報をしまっておける箱の集まりだと書きました。

この箱のことを「要素」といいます。

要素の数とは

要素の数とは、配列の中にある「箱の数」のことです。

要素の数を知る

今回のテーマは「配列の要素の数を知る方法」です。

つまり「箱の数を知る方法」です。

見ればわかるのでは?

配列の要素の数(箱の数)って、特別なことをしなくたって、ぶっちゃけスクリプトを目で見ればわかります。

 

 

でも、今回はそういう話ではなくて、より正確にいうと…

プログラム上で要素の数を取得する方法」ということです。

length(レングス)

配列の要素の数を知る(取得する)には、length(レングス)を使います。

 

 

こういう形式で記述します。

配列の名前.length

 

 

たとえば…

「abc」という配列があって、その要素の数(箱の数)を取得するときは、こうです。

abc.length

実際に使ってみよう

lengthを組み込んだサンプルを実際に見てみましょう。

lengthで取得した要素の数(箱の数)を、画面に表示してみたいと思います。

 

 

こちらです。

<html>
<head>
</head>
<body>

<script>
var abc=[100,200,300];
document.write(abc.length);
</script>

</body>
</html>

緑色の部分がJavaScriptです。

実行結果

上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…

ブラウザに「3」と表示されます。

 

 

「3」とは、配列の要素の数(箱の数)です。

解説

では、どんな仕組みで要素の数(箱の数)が表示されるのか見てみますね。

 

 

まず、この行をご覧ください。

配列です。

var abc=[100,200,300];

配列の名前は「abc」です。

要素の数(箱の数)は3つですね。

 

 

そして、次の行です。

この赤い部分で、要素の数(箱の数)が取得されています。

document.write(abc.length);

 

 

取得された要素の数(箱の数)は、おなじ行のこの赤い部分によって、ブラウザに表示されます。

document.write(abc.length);

※ブラウザに文字を表示する方法について詳しくは「JavaScriptで文字を表示する方法」をご覧ください。

 

 

ブラウザの表示結果はこちらです。

3

ちゃんと要素の数(箱の数)が表示されていますね。

 

 

以上が、「配列の要素の数を知る方法」です。

例外

じつは…

lengthを使っても、正確な要素の数(箱の数)がわからないケースがあります。

箱の番号が飛んでいる場合はダメ

配列の箱には、番号が割り振られています。

番号は0番目から始まります

 

 

0番目の箱、1番目の箱、2番目の箱…

といった具合です。

 

 

その番号が途中で飛んでいる(抜けている)と、正確な要素の数(箱の数)が取得できません。

lengthで要素の数が取得できない例

たとえば、こうです。

<html>
<head>
</head>
<body>

<script>
var abc=[100,200,300];
abc[12]=400;
document.write(abc.length);
</script>

</body>
</html>

 

 

この部分をご覧ください。

var abc=[100,200,300];

「abc」という配列です。

 

 

0番目の箱に「100」が収納されています。

1番目の箱に「200」が収納されています。

2番目の箱に「300」が収納されています。

 

 

ここまではいつも通り。

とくに異常なしです。

 

 

つぎの行をご覧ください。

abc[12]=400;

この行では、あとづけで12番目の箱に「400」が収納されています。

※配列では、こんなふうに箱を追加できます。

 

 

つまり…

3番目から11番目までの箱がすっぽり抜けていて存在しません。

いきなり12番目の箱が登場しています。

箱の数は4つだけど…

上の例の場合、要素の数(箱の数)は…

0番目、1番目、2番目、そして12番目の、計4つです。

13と表示される

ところが。

lengthで要素の数を取得してみると、画面には「13」と表示されます。

要素の数は「4」なのに、「13」と表示されるんです。

要素の数が正確に取得できていませんよね。

 

 

なぜ?

最大の箱の番号+1

どうしてこんなことが起こるのかというと…

 

 

じつはlengthの本当の意味は、

箱の数を取得する!

ではなく

「最大の箱の番号+1」を取得する!

なんです。

 

 

上の例の場合、最大の箱の番号は「12」です。

だから、画面には「13」と表示されます。

 

 

箱の番号が順番に並んでいれば問題ないんですけど、上の例のように途中が抜けている場合は注意が必要ですね。

 

 

今回はこれでおしまいです。

お付き合いありがとうございました。

 

 

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。

タイトルとURLをコピーしました