【JavaScript】unshift()やpush()で指定した配列に要素を追加する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年9月25日に投稿されました。)

JavaScriptで指定した配列に要素を追加する方法として、unshift()やpush()があります。

unshift()とは指定した配列の先頭に要素を追加するメソッドであり、push()とは指定した配列の末尾に要素を追加するメソッドになります。

両メソッドとも「要素が追加された配列の数」を返り値として返し、使用した後は指定した配列に要素が追加されるようになります。

また、unshift()やpush()はパラメータを1つ指定することで、指定した配列に要素を追加できますが、パラメータを2つ以上指定すると、追加したい要素を複数設定することが可能になります。

そして、unshift()やpush()は1次元の配列だけでなく、2次元や3次元のような多次元配列にも使用することができます。

「配列に要素を追加する」という処理は、プログラミングをする際にたくさん使用しますので、こちらの記事を見て学習しておきましょう。

今回はJavaScriptのunshift()やpush()で指定した配列に要素を追加する方法について紹介していきます。

この記事はこんな方におすすめ
・指定した配列に要素を追加したい人
・指定した連想配列に要素を追加したい人

unshift()とは

unshift()とは、指定した配列に要素を追加するメソッドになります。

追加した要素は指定した配列の先頭に追加されるようになります。

unshift()の書き方

unshift()の書き方は下記のようになります。

対象の配列の後ろにunshift()と追記し、パラメータを指定することで、対象の配列に指定した要素を追加することができます。

unshift()のパラメータ

unshift()のパラメータは下記のようになります。

  1. 追加する要素(必須):
    指定した配列の先頭に追加したい要素を指定する
  2. 追加する要素n(任意):
    指定した配列の先頭に追加したいnつ目の要素を指定する

unshift()は必須なパラメータとして「追加する要素」を指定します。

そして、任意なパラメータとして「追加する要素n」を指定します。

unshift()の返り値

unshift()は「追加した後の配列の要素数」を返り値として返すようになります。

そして、unshift()を使用した後、対象の配列の先頭に要素が追加されるようになります。

push()とは

push()とは、こちらも指定した配列に要素を追加するメソッドになります。

しかし、unshift()とは違って指定した配列の末尾に追加されるようになります。

push()の書き方

push()の書き方は下記のようになります。

対象の配列の後ろにpush()と追記し、パラメータを指定することで、対象の配列に指定した要素を追加することができます。

push()のパラメータ

push()のパラメータは下記のようになります。

  1. 追加する要素(必須):
    指定した配列の末尾に追加したい要素を指定する
  2. 追加する要素n(任意):
    指定した配列の末尾に追加したいnつ目の要素を指定する

push()は必須なパラメータとして「追加する要素」を指定します。

そして、任意なパラメータとして「追加する要素n」を指定します。

push()の返り値

push()は「追加した後の配列の要素数」を返り値として返すようになります。

そして、push()を使用した後、対象の配列の末尾に要素が追加されるようになります。

unshift()やpush()で配列の要素を追加するサンプルコード

unshift()やpush()で配列の要素を追加するサンプルコードについてご紹介します。

ここでは、下記の3つのパターンでunshift()とpush()を使用します。

  1. 指定した配列に要素が存在する場合
  2. 指定した配列に要素が存在しない場合
  3. 指定した配列に重複する要素が存在する場合

指定した配列に要素が存在する場合

指定した配列に要素が存在する場合に、unshift()やpush()を使用してみます。

⚫︎ Main.js

実行結果

要素が存在する配列に対してunshift()やpush()を使用した結果

unshift()やpush()によって指定した配列の先頭と末尾に要素が追加されています。

そのため、配列の先頭には「タント」が配列の末尾には「ムーブ」が追加されて表示されています。

指定した配列に要素が存在しない場合

指定した配列に要素が存在しない場合に、unshift()やpush()を使用してみます。

⚫︎ Main.js

実行結果

要素が存在しない配列に対してunshift()やpush()を使用した結果

配列に要素が存在しない場合でも、unshift()やpush()によって要素が追加されています。

そのため、unshift()によって「キャスト」が、push()によって「ロッキー」が追加されて表示されています。

指定した配列に重複する要素が存在する場合

指定した配列に重複する要素が存在する場合に、unshift()やpush()を使用してみます。

⚫︎ Main.js

実行結果

重複する要素が存在する配列に対してunshift()やpush()を使用した結果

指定した配列に重複する要素が存在する場合でも、unshift()やpush()によって要素が追加されています。

そのため、unshift()によって「ミラ」が、push()によって「ウェイク」が追加されて表示されています。

unshift()やpush()で複数の要素を一気に追加する場合

unshift()やpush()で複数の要素を一気に追加する場合は、パラメータである「追加する要素n」を指定します。

追加したい要素を「,」で区切って指定することで、2つ以上の要素を一度に追加することができます。

⚫︎ Main.js

実行結果

unshift()やpush()で複数の要素を一気に追加した結果

unshift()やpush()のパラメータに要素を2つ以上指定することで、複数の要素を一気に追加しています。

そのため、unshift()によって「キックス」と「エクストレイル」が、push()によって「シルビア」と「デイズ」が追加されて表示されています。

unshift()やpush()で多次元配列に要素を追加する場合

unshift()やpush()で多次元配列に要素を追加してみます。

2次元配列の場合

2次元配列に、unshift()やpush()を使用してみます。

⚫︎ Main.js

実行結果

unshift()やpush()で2次元配列に要素を追加した結果

unshift()やpush()によって指定した2次元配列の先頭と末尾に要素が追加されています。

また、配列の後ろにインデックスを指定することで、2次元配列内にある1次元配列に要素を追加することができます。

3次元配列の場合

3次元配列に、unshift()やpush()を使用してみます。

⚫︎ Main.js

実行結果

unshift()やpush()で3元配列に要素を追加した結果

unshift()やpush()によって指定した3次元配列の先頭と末尾に要素が追加されています。

また、配列の後ろにインデックスを指定することで、3次元配列内にある2次元配列や1次元配列に要素を追加することができます。

unshift()やpush()で連想配列の要素を追加する場合

結論から言うと、unshift()やpush()で連想配列の要素を追加することはできません。

しかし、キーと値をそれぞれ配列にして取りだすことで、unshift()やpush()で連想配列に要素を追加することが可能になります。

⚫︎ Main.js

実行結果

unshift()やpush()で連想配列の要素を追加した結果

unshift()やpush()によって指定した連想配列の先頭と末尾に要素が追加されています。

そのため、連想配列の先頭には「wish」をキーとした「ウィッシュ」が、末尾には「camry」をキーとした「カムリー」が表示されています。

Sossy

unshift()やpush()は、連想配列に使用すると、遠回りになりますのであまりおすすめしません。
「配列.キー = 値」で直接した方が早いです。

指定した配列と別の配列を結合して要素を追加する場合

指定した配列と別の配列を結合して要素を追加する場合は、concat()を使用します。

concat()とは、指定した配列と別の配列を結合して1つの配列にするメソッドとなります。

⚫︎ Main.js

実行結果

concat()で指定した配列と別の配列を結合して要素を追加した結果

concat()によって指定した配列と別の配列が結合して、要素が追加されています。

そのため、「daihatsu1」の配列と「daihatsu2」の配列が1つに合わさって表示されています。

指定した配列の要素を削除する場合

指定した配列の要素を削除する場合は、shift()pop()を使用します。

shift()やpop()とは、指定した配列の要素を取り除くメソッドとなります。

shift()は指定した配列の先頭の要素を取り除き、pop()は指定した配列の末尾の要素を取り除きます。

⚫︎ Main.js

実行結果

shift()やpop()で指定した配列の要素を削除した結果

shift()やpop()によって指定した配列の先頭と末尾の要素が削除されています。

そのため、shift()では「アルト」が、pop()では「ハスラー」が削除されて配列が表示されています。

もし、shift()やpop()について詳しく知りたい場合は下記の記事をご参考ください。

まとめ

⚫︎ unshift()とは指定した配列の先頭に要素を追加するメソッドである

⚫︎ push()とは指定した配列の末尾に要素を追加するメソッドである

⚫︎ unshift()やpush()を使用するには1つのパラメータが必須であり、最大で2つのパラメータを指定できる
・ 追加する要素(必須):
・ 追加する要素n(任意):

⚫︎ unshift()やpush()は「追加した後の配列の要素数」を返り値として返し、そのまま使用すると「要素が追加された後の配列」を返す

⚫︎ 指定した配列に要素が存在する場合に、unshift()やpush()を使用すると、指定した配列の先頭と末尾に要素を追加する

⚫︎ 指定した配列に要素が存在しない場合に、unshift()やpush()を使用すると、指定した配列に要素を追加する

⚫︎ 指定した配列に重複する要素が存在する場合に、unshift()やpush()を使用すると、指定した配列の先頭と末尾に要素を追加する

⚫︎ unshift()やpush()に「追加する要素n」を指定すると、複数の要素を一気に追加することができる

⚫︎ unshift()やpush()は、1次元配列だけでなく、多次元配列に要素を追加することができる

⚫︎ 指定した配列と別の配列を結合して要素を追加する場合は、concat()を使用する

⚫︎ unshift()やpush()は、連想配列に直接使用することはできない
(使用するには、キーと値をそれぞれ配列にする必要がある)

⚫︎ 指定した配列の要素を削除する場合は、shift()やpop()を使用する