JavaScriptで配列を扱う「Array」と「スタック」「LIFO」「FIFO」の基本JavaScript標準ライブラリの使い方超入門(3)(5/6 ページ)

» 2016年10月11日 05時00分 公開
[金城俊哉]

特定の要素の取り出しと置き換え

Onepoint

 Arrayオブジェクトには、要素を取り出すメソッドとしてslice()があります。このメソッドは、pop()やshift()とは異なり、任意の位置から指定した数だけの要素を取り出すことができます。

 また、splice()メソッドは要素を取り出すだけでなく、取り出した要素の代わりに別の要素を置き換えることができます。

slice()メソッドで配列の要素を取り出す

Navigator

「まずはslice()メソッドの書き方を見てみましょう」


slice()メソッドの書式
Navigator

「startの部分で削除の開始位置を示すインデックス値を指定し、endで削除する最後の位置を示すインデックス値を指定します。この場合、end自体は含めず、その直前までの要素が取り出されます」


Driver

「えっと『slice(1, 4)』とした場合は、2番目の要素から4番目の要素まで(インデックスが1、 2、 3の要素)が取り出されるってことですね」


slice()は要素のコピーを配列に格納して返す。
Navigator

「なお、slice()は、要素を配列形式で取り出します。つまり、取り出した要素を新しい配列に格納してこれを返すのですが、取り出した要素がもとの配列から削除されることはありません」


Driver

「では、配列から一部の要素を取り出して画面に表示したあと、もとの配列がどうなったかも表示してみることにしますね」


配列の一部の要素を取り出す(slice2.html)
実行結果

splice()メソッドで取り出しと置き換えを行う

Navigator

splice()メソッドの書式は、次のようになっています」


splice()メソッドの書式
Navigator

「startの部分で削除の開始位置を示すインデックス値を指定し、howManyで削除する要素の数を指定します。element1以降は、取り出した要素と置き換える新しい要素を指定します」


Driver

「この場合、対象の配列はもとのままですか?」


splice()は要素を切出すので、元の配列には残らない。
Navigator

「いえ、splice()メソッドは対象の配列を直接、操作します。ですので、element1以降を省略した場合は、取り出した要素がそのまま削除されることになります」


Driver

「では、これを確かめるプログラムを作ってみますね」


要素の取り出しと置き換えを行う(splice.html)
Driver

「(1)では、要素を取り出すのみで置き換えは行っていません。一方(2)では、要素を取り出したあと別の要素に置き換えています」


実行結果

配列要素を1個ずつ処理する

theme

配列に格納された名前を1つずつ取り出して「様ですね。」の文字列を連結したうえで画面に表示する。


Navigator

「今回はテーマのかたちで出題しました。配列要素の参照です」


Driver

「配列要素には、インデックスが割り振られていますよね」


Navigator

「そこで、配列要素を参照するには、0から始まるインデックスの数値を[ ]の中に書けば、該当する要素を参照することができます」


配列要素を参照する

for文を使って配列要素を1つずつ取り出す

Navigator

「配列要素を1つずつ取り出して処理を行うには、for文が便利です」


Driver

「配列に格納された名前を1つずつ取り出して『様ですね。』を追加するんですよね」


Navigator

ポイントは、for文の条件式で『i < 配列名.length』として、配列のサイズ(最大要素数)に達したらループを終了することです。カウンター変数iは0で初期化しておけば、『配列名[i]』でループのたびにiの値が1ずつ増加するので、先頭の要素から順に参照していくことができます」


配列要素を1つずつ取り出して処理を行う(HandlingElements1.html)
実行結果
Driver

「カウンター変数iは0で初期化されているので、for文の1回目の処理では『name(0)』となり、配列nameの先頭の要素が参照されるのですね」


Navigator

「で、続く2回目の処理ではiの値が1になるので『name(1)』となって、2番目の要素が参照されると言う具合です。これを繰り返して、最終的に条件式の『i < name.length』でiの値が配列のサイズ(要素数)より大きくなった時点でfor文を抜けるというわけです


Memo in文を使って配列要素を取り出す

 ここで初めて紹介しますが、繰り返しを行う手段として「for...in文」があります。For...inは配列の要素に対して、先頭から順番に繰り返し処理を行います。

for (変数 in 配列名) {
    実行する文
}

 for文の(初期化式; 条件式; 増減式)の部分が(変数 in 配列名)だけで済むので、書き方自体は簡単です。

 では、先ほどのfor文をfor...in文に書き換えてみます。

for...in文の処理の流れ
for...inで配列要素を処理する(HandlingElements2.html)

 ただし、for...in文では、配列要素のインデックスをどのような順序で変数に代入するかは規定されていません。ですので、JavaScriptの実装(Webブラウザーの種類)によっては、思ったとおりに動作しない場合があるので注意が必要です。

 ここでは、JavaScriptで利用できる繰り返し処理として紹介しましたが、以上のような理由から配列を処理するときは、原則として本編で紹介したfor文による処理を行うようにしてください。


Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。