【JavaScript】JSで入力フォームの値を取得しよう
takahide
初心者がITを楽しむブログ
【JavaScript】配列の要素を追加と削除しよう（unshift/push/shift/pop）
takahide
おはようございます。タカヒデです。
本日は、「JavaScriptにおける、『配列の要素の追加と削除』について、『unshift/push/shift/pop』の4つのメソッド」を紹介します。
こんな人にオススメ
- JavaScriptにおける『配列の要素の追加と削除』が理解できない
- 『unshift/push/shift/popメソッド』の記載方法を知りたい
- 『スタックとキュー』の考え方を知りたい
ぜひ本記事を参考にしてください。
配列の要素の追加（unshift/pushメソッド）
まずは配列の要素を追加する方法です。
配列の要素への追加方法として2種類紹介します。
先頭に要素を追加する場合『unshiftメソッド』、末尾に要素を追加する場合『pushメソッド』を使用します。
イメージにするとこんな感じ↓
これから記載例の中で実行していきます。
■unshiftメソッド
//unshiftメソッド記載方法
変数名.unshift(追加する要素)■pushメソッド
//pushメソッド記載方法
変数名.push(追加する要素)以下が記載例です。
let noodles = ["うどん", "そば", "ラーメン"];
noodles.unshift("そうめん");
noodles.push("冷麺")
console.log(noodles);
//実行結果：(5) ['そうめん', 'うどん', 'そば', 'ラーメン', '冷麺']元々『うどん』『そば』『ラーメン』の3つの要素しかありませんでしたが、先頭に『そうめん』、末尾に『冷麺』を追加した5つの要素になっていることが分かります。
配列の要素の削除（shift/popメソッド）
続けて、配列の要素の削除方法を2種類紹介します。
先頭の要素を削除する場合『shiftメソッド』、末尾の要素を削除する場合『popメソッド』を使用します。
こちらもイメージとしてはこんな感じ↓
■shiftメソッド
//shiftメソッド記載方法
変数名.shift()■popメソッド
//popメソッド記載方法
変数名.pop()以下が記載例です。
let noodles = ["うどん", "そば", "ラーメン"];
console.log(noodles.shift());
//実行結果：うどん
console.log(noodles.pop());
//実行結果：ラーメン
console.log(noodles);
//実行結果：['そば']元々『うどん』『そば』『ラーメン』の3つの要素がありましたが、先頭の『うどん』、末尾の『ラーメン』が削除され、1つの要素にしか持っていないことが分かりますね。
スタックとキューという考え方を理解しておこう
最期にデータ構造の観点から、「スタック」と「キュー」という考え方について紹介します。
これらは基本情報技術者試験や応用情報技術者試験でも出てくる考え方なので、学習されている方は覚えておいて損はしないかなと思います。
ちなみに私はどっちがどっちか分からなくなるので、
「『さ』きいれ、『さ』きだし、の『キ』ュー」→「佐々木」
「『さ』きいれ、『あ』とだし、の『ス』タック」→「サース」
という謎の覚え方をしていました。
スタック
まずは「スタック」です。
これは『後入れ先出し』のデータ構造のことを指します。
イメージにするとこんな感じ。
新たな要素「冷麺」を、配列の後に入れ、それを先に取り出します。
後に追加したものを先に取り出すため、『後入れ先出し』のデータ構造となります。
今回紹介したメソッドで考えると、『push/popメソッド』が該当しますね。
「LIFO（Last In Fist Out）」なんて呼ばれ方もします。
キュー
続けて、「キュー」です。
これは先入れ先出しのデータ構造のことを指します。
こちらはこんな感じ。
「冷麺」を配列の後ろに追加していますが、取り出されるのは先に入っている「うどん」です。
先に追加したものを先に取り出すため、『先入れ先出し』のデータ構造となります。
今回紹介したメソッドで考えると、『push/shiftメソッド』が該当します。
こちらは「FIFO（First In First Out）」なんて呼ばれ方をすることがあります。
まとめ
以上が「JavaScriptにおける、『配列の要素の追加と削除』について、『unshift/push/shift/pop』の4つのメソッド」でした。
まとめ
- 配列の要素の追加
- unshift：先頭に追加
- push：末尾に追加
- 配列の要素の削除
- shift：先頭を削除
- pop：末尾を削除
- スタックとキューの考え方
- スタック…後入れ先出し（push/pop）
- キュー…先入れ先出し（push/shift）
この記事が誰かの参考になれば幸いです。
お疲れさまでした。
ABOUT ME
通信会社の企画職で働く30代
非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中
IT初心者が楽しいと思えるように発信することを目指しています
↓Xもやっているのでフォローしてね
