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

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

あーりーです。

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入門」にまとめてあります。よろしければご覧ください。

A8 JavaScript

おまけ

JavaScriptを一人で勉強していてわからないことがあれば、teratailで質問することをおすすめします。

プログラミングに特化したYahoo!知恵袋のようなサイトです。

超・初心者のぼくにも優しく教えてくれました。

とても感謝しています。

関連記事コンテンツ



シェアする

  • このエントリーをはてなブックマークに追加

フォローする

自己紹介

あーりーと申します。アクセスありがとうございます。布団でぬくぬくしながら本を読んだりスマホでテレビを見たり、のんびり過ごすのが好きです。

ブログ村

ブログランキング・にほんブログ村へ

グロースファクター 毛髪再生