要素の追加と削除

広告

JavaScriptでは作成された配列に対して後から要素を追加することができます。要素を追加したい場合は使っていないインデックスを指定した新しい要素に対して値を代入することで作成することができます。次の例を見てください。 

var ary = ['Tokyo', 'Osaka'];

上記の場合、配列には2つの要素が含まれています。インデックス0の要素の値は'Tokyo'で、インデックス1の要素の値は'Osaka'となっています。この配列にインデックス2の要素を追加するには次のように記述します。 

var ary = ['Tokyo', 'Osaka'];
ary[2] = 'Nagoya';

使用されていないインデックスを指定した要素に値を代入することで要素が追加されます。

連続していないインデックスの指定

要素を追加する場合、指定するインデックスは「追加される前の最大のインデックス＋1」にする必要はありません。次の例を見てください。 

var ary = ['Tokyo', 'Osaka'];
ary[5] = 'Sapporo';

この場合は元からあるインデックスが0と1の要素に加えてインデックスが5の要素が追加されます。これは次のように配列リテラルを定義した場合と同じです。 

var ary = ['Tokyo', 'Osaka',,,, 'Sapporo'];

インデックスが2から4の要素は値が設定されていませんので未定義値(undefined)が格納されているものとして扱われます。 

var week = ['Sun', 'Mon', 'Tue'];

alert(week[0]);
var str = week[1];
要素の削除

オブジェクトのプロパティはdelete演算子を使って削除することができましたが、配列の要素は削除することはできません。要素に対して未定義値(undefined)を代入しても要素そのものは削除されません。

配列の要素を削除するにはArrayクラスで用意されているメソッドを使用することで可能となります。Arrayクラスのメソッドはまた別のページでまとめて解説いたします。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script4_1.js">
</script>

</body>
</html>

var ary = ['Tokyo', 'Osaka'];
ary[2] = 'Nagoya';
ary[5] = 'Sapporo';

document.write("<p>");

for (var i = 0; i < 6; i++){
  document.write(ary[i] + "<br />");
}

document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p4-1

( Written by Tatsuo Ikura )