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

JavaScript

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

・pushメソッド(配列の末尾に要素を追加)
・unshiftメソッド(配列の先頭に要素を追加)
・spliceメソッド(配列の途中に要素を追加)
PR

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つの要素を一緒に追加しています。
このようにカンマ(,)区切りで、区切っていくことで、要素を複数追加することもできます。

PR

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番目の位置から2つの要素が削除されます。(orangeとpeach)
第3引数は配列に入れる要素です。文字列の「grape」を指定しました。

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

コメント

Ads Blocker Image Powered by Code Help Pro

広告ブロッカーが検出されました。

ブラウザの拡張機能を使用して広告ブロックをしていることが確認できました。 ブラウザの広告ブロッカー機能を無効にしていただくか、codelikes.comをホワイトリストに追加し、更新をクリックしてください。 お手数ですが、よろしくお願いします🙇‍♂️
タイトルとURLをコピーしました