0%

Programmingプログラミングナレッジ

Posted:2019.11.25

javascriptで配列を扱う時によく使うメソッド#6【配列の値を追加・削除する】

これまでいろんな配列操作のメソッドをまとめてきましたが、今回は値の増減に関する操作ができるメソッドになります。あまり使うシーンは見かけないかもしれませんが、もちろん覚えておいたほうがなにかと役立てられるので、この機会に見ていきたいと思います。

 

Array.push()

配列の最後に値を1つずつ追加したい場合には「Array.push()」を使います。下記のように使い方も簡単で、追加先の配列に対してメソッドを指定し、そのメソッドの引数に追加する値を取ります。これだけで配列の後ろから値を追加していくことができます。

【javascript】

let arrayData = ['春', '夏', '秋'];
const add = '冬';
const result = arrayData.push(add);
console.log(arrayData);
console.log(result);

 

このように値が追加されたのが確認できます。追加後の配列を扱いたい時には、対象の配列をそのまま使います。Array.push()の戻り値には、追加後の配列の長さが数値として返ってきます。

【console】

[ "春", "夏", "秋", "冬" ] // arrayData
4                        // result

 

ちなみに、あまり利用されることはないかもしれませんが、配列の先頭に値を1つずつ足していく場合には「Array.unshift()」を使います。

 

Array.pop()

配列の値を後ろから1つずつ削除していく場合には「Array.pop()」を使います。先ほどのArray.push()と逆の働きになるのですが、返り値などが少し異なります。まず、引数には何も取らずに、対象の配列に対して実行します。

【javascript】

let arrayData = ['優勝', '準優勝', 'ベスト4', 'ベスト8'];
const result = arrayData.pop();
console.log(arrayData);
console.log(result);

 

そうすると削除された値が返ってきます。実行した後の配列では、最後にあった値が削除され、配列の長さが減っているのが確認できます。

【console】

[ "優勝", "準優勝", "ベスト4" ]   // arrayData
"ベスト8"                       // result

 

また、こちらも配列の先頭から値を1つずつ削除していく場合には「Array.shift()」を使います。先ほどのArray.push()と合わせることで、後入れ先出しのデータ操作ができるようになります。

 

まとめ

【配列の値を1つずつ後ろに追加していく】

Array.push( value );

 

【配列の値を1つずつ後ろから削除していく】

Array.pop( value );

 


 

APIなどからデータを一括で取得するなどで、配列を操作する場合にはあまり使う場面がないかもしれませんが、フロントエンド側で動的に配列の値を増やしたり減らしたりする際には使えますので是非合わせて覚えておきたいですね。

 

(こちらの記事もどうぞ)
javascriptで配列を扱う時によく使うメソッド#1【配列の作成・値や総数の取得・空判定など】
javascriptで配列を扱う時によく使うメソッド#2【配列の値に対して繰り返し処理を行う】
javascriptで配列を扱う時によく使うメソッド#3【配列に値が含まれるか・値のインデックスを検索する】
javascriptで配列を扱う時によく使うメソッド#4【配列から条件に合う値を取得・フィルタリングする】
javascriptで配列を扱う時によく使うメソッド#5【配列の値から別の配列を作成・単一の値を算出する】

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】