JavaScriptでpopを使いこなす!7つの手法で上達

JavaScript_pop_7つの手法JS
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptのpopメソッドを使いこなすことができるようになります。

初心者の方でも分かりやすく、サンプルコードを交えながら徹底的に解説していきます。

ぜひ最後までお読みいただき、popメソッドを使いこなせるようになりましょう!

●JavaScriptのpopメソッドとは

JavaScriptのpopメソッドは、配列から最後の要素を削除し、その要素を返すメソッドです。

○popメソッドの基本

基本的な使い方は次の通りです。

const array = [1, 2, 3];
const lastElement = array.pop(); // 3が返され、arrayは[1, 2]となる

●popメソッドの使い方

それでは、popメソッドの使い方をいくつかのサンプルコードを使って紹介します。

○サンプルコード1:配列から要素を削除する

このコードでは、popメソッドを使って配列から最後の要素を削除する方法を紹介しています。

この例では、果物の配列から最後の要素である”cherry”を削除しています。

const fruits = ["apple", "banana", "cherry"];
const lastFruit = fruits.pop(); // "cherry"が返され、fruitsは["apple", "banana"]となる
console.log(lastFruit); // "cherry"
console.log(fruits); // ["apple", "banana"]

○サンプルコード2:配列を使ったスタック操作

このコードでは、配列をスタックとして扱い、popメソッドでスタックから要素を取り出す方法を紹介しています。

この例では、整数の配列から最後の要素を取り出しています。

const stack = [1, 2, 3];
const lastItem = stack.pop(); // 3が返され、stackは[1, 2]となる
console.log(lastItem); // 3
console.log(stack); // [1, 2]

○サンプルコード3:条件に合う要素を削除する

このコードでは、条件に合う要素を配列から削除する方法を紹介しています。

この例では、奇数の要素だけを削除しています。

const numbers = [1, 2, 3, 4, 5];
const removedItems = [];

while (numbers.length > 0) {
  const lastNumber = numbers.pop();
  if (lastNumber % 2 !== 0) {
    removedItems.push(lastNumber);
  }
}

console.log(removedItems); // [5, 3, 1]
console.log(numbers); // [2, 4]

●popメソッドの応用例

さらにpopメソッドを応用した例をいくつか紹介します。

○サンプルコード4:配列内の最大値・最小値を取得する

このコードでは、配列内の最大値と最小値を取得する方法を紹介しています。

この例では、popメソッドを使って配列の要素を一つずつ取り出し、最大値と最小値を求めています。

const data = [10, 5, 8, 1, 7];
let max = data[0];
let min = data[0];

while (data.length > 0) {
  const value = data.pop();
  max = Math.max(max, value);
  min = Math.min(min, value);
}

console.log(max); // 10
console.log(min); // 1

○サンプルコード5:配列を逆順にする

このコードでは、配列を逆順にする方法を紹介しています。

この例では、popメソッドとpushメソッドを使って配列の要素を逆順に並べ替えています。

const originalArray = [1, 2, 3, 4, 5];
const reversedArray = [];

while (originalArray.length > 0) {
  const lastItem = originalArray.pop();
  reversedArray.push(lastItem);
}

console.log(reversedArray); // [5, 4, 3, 2, 1]

○サンプルコード6:配列の要素をランダムに並べ替える

このコードでは、配列の要素をランダムに並べ替える方法を紹介しています。

この例では、popメソッドとspliceメソッドを使ってランダムな位置に要素を挿入して並べ替えています。

const originalArray = [1, 2, 3, 4, 5];
const shuffledArray = [];

while (originalArray.length > 0) {
  const randomIndex = Math.floor(Math.random() * originalArray.length);
  const removedItem = originalArray.splice(randomIndex, 1)[0];
  shuffledArray.push(removedItem);
}

console.log(shuffledArray); // 例: [4, 1, 5, 2, 3]

●注意点と対処法

  1. 配列が空の場合、popメソッドはundefinedを返します。
    配列が空かどうかを確認してからpopメソッドを使うことが望ましいです。
  2. popメソッドは元の配列を変更します。
    元の配列を変更せずに最後の要素を取得したい場合は、lengthプロパティを使ってアクセスしてください。

●カスタマイズ方法

○サンプルコード7:popメソッドをカスタマイズして独自の機能を追加する

このコードでは、popメソッドをカスタマイズして、最後の要素を削除する前に任意の処理を行う方法を紹介しています。

この例では、削除する要素に2を乗算してから削除しています。

Array.prototype.customPop = function () {
  if (this.length > 0) {
    const lastItem = this[this.length - 1] * 2;
    this.length -= 1;
    return lastItem;
  }
};

const numbers = [1, 2, 3];
const doubledLastNumber = numbers.customPop();

console.log(doubledLastNumber); // 6
console.log(numbers); // [1, 2]

まとめ

この記事では、JavaScriptのpopメソッドを使った配列操作の基本から応用例、注意点、カスタマイズ方法まで詳しく解説しました。

popメソッドを用いて、配列から要素を削除したり、配列の要素を逆順やランダムに並べ替えたりする方法を学びました。

また、注意点として配列が空の場合や元の配列を変更しない方法についても触れました。

さらに、popメソッドをカスタマイズして独自の機能を追加する方法も紹介しました。

これらの知識を活用して、JavaScriptで効率的な配列操作を行いましょう。