JavaScriptで配列に要素を追加する3つの方法！

JavaScriptで配列に要素を追加する方法について書いています。
配列に要素を追加する時には、下記のメソッドを使います。

pushメソッドで追加する

配列からpushメソッドを呼び出して、引数に要素を渡すことで、配列の末尾へ要素を追加できます。
配列の末尾にpushメソッドに渡した要素が追加されます。

let fruits = ['apple', 'banana']
fruits.push('grape')

console.log(fruits) // [ 'apple', 'banana', 'grape' ]

fruits配列を作成し、初期値として「apple」と「banana」を代入しています。
次にfruits配列からpushメソッドを呼び出しています。

pushメソッドの呼び出し時に、「grape」を渡して要素を追加しています。
console.logで出力すると、配列の末尾に「grape」が追加されていることが確認できました。

複数の要素を追加したいとき

複数の要素を追加したいときには、pushメソッドを続けて呼ぶか、引数を複数渡して追加します。
例えば、下記のようにして、要素を2つ追加します。

let fruits = ['apple']
fruits.push('banana')
fruits.push('grape')

console.log(fruits) // [ 'apple', 'banana', 'grape' ]

最初はfruits配列に「apple」のみを追加して、配列を作成しました。

次に、pushメソッドを呼んで「banana」を追加しています。
その後に、またpushメソッドを呼んで「grape」を追加しています。
出力すると、「[ 'apple', 'banana', 'grape' ]」になり、3つの要素が入ったことが確認できました。

同じように要素を追加するときに、下記のように書く方法もあります。

let fruits = ['apple']
fruits.push('banana', 'grape')

console.log(fruits) // [ 'apple', 'banana', 'grape' ]

最初は同じようにfruits配列に「apple」のみで、配列を作っています。

次の行で、2つの要素を一緒に追加しています。
このようにカンマ(,)区切りで、区切っていくことで、要素を複数追加することもできます。

unshiftメソッドで追加する

配列からunshiftメソッドを呼び出して、引数に要素を渡すことで、配列の先頭へ要素を追加できます。
配列の先頭にunshiftメソッドに渡した要素が追加されます。

let fruits = ['apple', 'banana']
fruits.unshift('grape')

console.log(fruits) // [ 'grape', 'apple', 'banana' ]

fruits配列を作成し、初期値として「apple」と「banana」を代入しています。
次にfruits配列からunshiftメソッドを呼び出しています。

unshiftメソッドの呼び出し時に、「grape」を渡して要素を追加しています。
console.logで出力すると、配列の先頭に「grape」が追加されていることが確認できました。

複数の要素を追加したいとき

複数の要素を追加したいときには、pushメソッドと同じように操作して、unshiftメソッドも使うことが可能です。
違うのは、unshiftだと配列の先頭に追加されるというところです。

let fruits = ['apple']
fruits.unshift('banana')
fruits.unshift('grape')

console.log(fruits) // [ 'grape', 'banana', 'apple' ]

最初はfruits配列に「apple」のみを追加して、配列を作成しました。

次に、unshiftメソッドを呼んで「banana」を追加しています。
その後に、またunshiftメソッドを呼んで「grape」を追加しています。

出力すると、「[ 'grape', 'banana', 'apple' ]」になり、3つの要素が入ったことが確認できました。
「banana」を先頭に追加した後に、「grape」を先頭に追加しているので、「grape, banana, apple」となりました。

pushメソッドと同じように、複数の要素を渡すことで、一括で追加することが可能です。

let fruits = ['apple']
fruits.unshift('banana', 'grape')

console.log(fruits) // [ 'banana', 'grape', 'apple' ]

fruits配列を「apple」の要素のみで作成します。
次の行で、fruitsからunshiftメソッドを呼んで、2つの要素を渡しています。

console.logで確認すると「[ 'banana', 'grape', 'apple' ]」となりました。
先ほどのように、ひとつづつ先頭に追加する場合と比べます。
そうすると、今回のように一括して追加する場合では、先頭に一括で入れるため要素の順番が変わります。注意が必要です。

spliceメソッドで追加する

spliceメソッドを使うことで、配列の途中に要素を入れることができます。
spliceメソッドも配列から呼び出して使います。

let fruits = ['apple', 'banana', 'orange']
fruits.splice(2, 0, 'grape')

console.log(fruits) // [ 'apple', 'banana', 'grape', 'orange' ]

最初に、3つの要素を代入したfruits配列を作っています。

その次の行で、fruits配列からspliceメソッドを使っています。
第1引数に値を追加したい位置、第2引数に削除する数、第3引数が追加する要素になります。

第1引数は「2」なので、配列を0番目から数えて、現在「orange」が入っている箇所に追加されます。
第2引数は削除する数です。配列に要素を入れるのと一緒に、要素を削除することができます。
今回は、配列要素を削除しないので、「0」を設定しています。
第3引数に追加する要素「grape」を書いています。

console.logで出力すると、「[ 'apple', 'banana', 'grape', 'orange' ]」になりました。
配列の2番目(0スタート)に追加されて、「orange」がひとつずれたことが確認できました。

要素を一部削除して追加する

第2引数を指定し、要素を一部削除して、追加してみます。

let fruits = ['apple', 'banana', 'orange', 'peach', 'lemon']
fruits.splice(2, 2, 'grape')

console.log(fruits) // [ 'apple', 'banana', 'grape', 'lemon' ]

最初にfruits配列を5つの要素を代入して作成しました。

次の行で、spliceメソッドを使っています。
第1引数に「2」を指定したので、2番目の位置に要素が入ります。
第2引数も「2」を指定しました。2番目の位置から２つの要素が削除されます。(orangeとpeach)
第3引数は配列に入れる要素です。文字列の「grape」を指定しました。

console.logで確認すると、結果「[ 'apple', 'banana', 'grape', 'lemon' ]」が出力されました。
指定した2番目の位置から2つの要素(orangeとpeach)が削除され、「grape」が入ったことが確認できました。