.net column
.NET開発者のためのブログメディア

JavaScriptの配列の要素の追加とは?パターン別追加方法を紹介

2020年06月04日

SE
JavaScriptの配列要素の追加とは、どのようなものなのでしょうか?

PM
JavaScriptの配列は可変長で、配列の要素数を事前に決定しておく必要ありません。配列要素を追加するパターンをご紹介していきます。

JavaScriptの配列の要素の追加とは?

JavaScriptには、配列という文字列やオブジェクトなどを順序付けて格納するためのデータ構造が備わっています。配列のようなデータ構造はどのようなプログラミング言語にも備わっていますが、その性質は異なっている場合があります。そのような配列の性質の一つに固定長であるか、可変長であるか、というものがあります。C言語やJava言語の配列は固定長で、配列を初期化する際に格納できる要素数を指定し、それ以上の要素は追加できません。一方、JavaScriptの配列は可変長で、配列の要素数を事前に決定しておく必要はありません。配列への要素の追加は必要に応じて自由に行えます。この記事では、JavaScriptの配列への要素の追加方法をいくつかご紹介します。一口に追加と言っても、様々なケースごとに適した追加方法があります。ぜひ学んでみてください。

JavaScriptの配列の要素の追加方法

JavaScriptの配列への要素の追加方法は一つではありません。ここでは様々な追加方法を紹介し、それぞれの動作の説明をしていきます。

位置を指定して要素を追加する

JavaScriptでは、ブラケット構文と呼ばれる角括弧[]を用いた記法を使用して、角括弧の中にobj[‘prop’]というように、文字列を記述することでオブジェクトのプロパティにアクセスできます。一方、配列は特殊なオブジェクトで、要素にアクセスするためには角括弧の中にarray[0]といったように、整数値を指定する必要があります。そして要素を追加するためには角括弧で要素の位置を指定して値を代入します。

要素の位置であるインデックスは0から始まります。位置0が1つ目の要素になります。整数値で指定して文字列や他のオブジェクトなどを代入すれば、好きな位置に要素を追加できます。少し注意したい点としては、JavaScriptの配列は要素が連続していることを保証しない、ということです。先ほど「好きな位置に要素を追加できる」と述べました。これは、例えば空の配列に対して、いきなり100番目に要素を追加することもできるということです。

上記のようにした場合、配列の長さは100になりますが、要素は100番目にしか入っておらず1から99番目は「空」という扱いになります。その状態でarray[3]のように何も要素が入っていない位置を参照すると、結果は未定義(undefined)が返されます。このように整数値で位置を指定して要素を追加することも可能ですが、要素の抜けが発生したり、元からその位置にあった要素を変更しているのか、それとも新たに追加しているのか、コードを見ただけでは判断が難しくなってしまいます。明確に「要素を追加している」と表現したい場合は後述する配列のメソッドを使用するべきでしょう。

Array.prototype.push()で要素を追加する

Array.prototype.push()は、配列の末尾に要素を追加するメソッドです。末尾とは、例えば[0, 1, 2]という配列があった場合の最後の要素である2の後ろと言う意味です。

push()を実行して要素を一つ追加すると、メソッドを実行した配列の長さは1増えることになります。push()は一つだけではなく、一度に複数の要素を末尾に追加することもできます。

インデックス位置の指定による追加では、末尾なのかどうかは判断できませんでしたが、push()メソッドを使用すれば、明確に配列に要素を追加していると表現できます。

Array.prototype.unshift()で要素を追加する

Array.prototype.unshift()は、配列の先頭に要素を追加するメソッドです。

引数で指定した要素は先頭に追加されるので、元からあった要素は一つずつ後ろにずれることになります。unshift()array.unshift(100, 200)といったように、一度に複数の要素を先頭に追加できます。

Array.prototype.splice()で要素を追加する

Array.prototype.splice()メソッドは、配列内の任意の位置に要素を追加することができます。

上記の例では、""one""の後ろのインデックス位置2の箇所に""two""という文字列を追加しています。もともとインデックス位置2にあった""three""は一つ後ろにずれます。このようにsplice()メソッドは要素の追加もできますが、追加と同時に要素を削除することも可能です。先ほどの例では2番目の引数に0を指定しました。これを1に変更してみましょう。

もともと、インデックス位置2にあった""three""が削除されて、""two""が追加されています。splice()メソッドの引数は(インデックス位置の指定、指定した位置から削除する要素の数、指定した位置に追加する要素)となっています。つまり、2番目の引数に0より大きい値を指定すると、その数だけ配列から要素が削除され、その後に最後の引数で指定した要素が追加される、という動作になります。2番目の引数に0を指定すると、「要素を削除しない」という意味になるので、要素の追加だけが行われることになります。最後の引数を指定しないこともできます。その場合に2番目の引数に0より大きい値を指定すると、要素を追加せず削除だけが行われることになります。また、最後の引数は複数指定することもできます。

3番目以降の引数に、追加したい要素を続けて記述することで一度に複数の要素を指定した位置に追加できます。

SE
JavaScriptの配列へ要素を追加する方法には、さまざまなものがあるのですね。

PM
そうですね。だからこそ、適切な方法を選ぶことが大切です。

追加方法も適切なものを

JavaScriptの配列へ要素を追加する方法を紹介してきました。追加という動作一つとっても、先頭に追加する、末尾に追加する、途中に追加する、などのように様々なパターンが考えられます。pushは「末尾にデータを詰める」というようなニュアンスで、古くからプログラミング言語で使用されてきた言葉です。またunshiftはデータを先頭方向に移動させる、というニュアンスのshiftという言葉の反対で、データを後ろの方向に移動させる、という意味を持ちます。このように、メソッド名から配列をどのように変化させているのかが、わかりやすくなっています。時にはiのような変数を使用して要素の位置を指定しなければならないこともありますが、push()などのメソッドを、積極的に使い配列に対する操作が明確になるように心がけてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs