概要: このチュートリアルでは、JavaScript配列のpop()
メソッドを使用して配列から最後の要素を削除する方法を学びます。
JavaScript配列のpop()メソッドの紹介
Array.prototype.pop()
メソッドは、配列から最後の要素を削除し、削除された要素を返します。pop()
メソッドの構文を以下に示します。
array.pop()
Code language: CSS (css)
pop()
メソッドは、配列のlength
プロパティを変更します。配列が空の場合、pop()
はundefined
を返します。
JavaScript pop()メソッドの例
pop()
メソッドを使用するいくつかの例を次に示します。
1) JavaScript配列のpop()メソッドを使用して配列の最後の要素を削除する
次の例では、pop()
メソッドを使用してnumbers
配列の最後の要素を削除します。
const numbers = [10, 20, 30];
const last = numbers.pop();
console.log(last); // 30
console.log(numbers.length); // 2
Code language: JavaScript (javascript)
出力
30
2
この例では、pop()
メソッドはnumbers
配列から30
という数値を削除します。また、numbers
配列のlength
プロパティの値は2に減少します。
次の図は、pop()
メソッドがどのように機能するかを示しています。
2) 空の配列でJavaScript配列のpop()メソッドを使用する
次の例では、空の配列でpop()
メソッドを呼び出します。この場合、pop()
メソッドはundefined
を返し、配列のlength
はゼロになります。
const numbers = [];
const last = numbers.pop();
console.log(last);
console.log(numbers.length);
Code language: JavaScript (javascript)
出力
undefined
0
Code language: JavaScript (javascript)
配列のようなオブジェクトでJavaScriptのpop()メソッドを使用する
pop()
メソッドは汎用的です。したがって、call()
またはapply()
を使用して配列のようなオブジェクトでpop()
メソッドを呼び出すことができます。内部的に、pop()
は配列のようなオブジェクトのlength
プロパティを使用して、削除する最後の要素を決定します。
次の例を参照してください。
let greetings = {
0: 'Hi',
1: 'Hello',
2: 'Howdy',
length: 2,
removeLast() {
return [].pop.call(this);
},
};
let greting = greetings.removeLast();
console.log(greting);
console.log(greetings);
Code language: JavaScript (javascript)
出力
'Howdy'
{
'0': 'Hi',
'1': 'Hello',
length: 2,
removeLast: [Function: removeLast]
}
Code language: JavaScript (javascript)
動作の仕組み
まず、以下を備えたgreetings
オブジェクトを定義します。
- 4つのプロパティ0, 1, 2、およびlength。
pop()
メソッドを呼び出すために配列のcall()
メソッドを使用する1つのメソッドremoveLast()
。
次に、greetings
オブジェクトのremoveLast()
メソッドを呼び出します。
let greting = greetings.removeLast();
Code language: JavaScript (javascript)
3番目に、削除された要素(greeting
)とgreetings
オブジェクトをコンソールに出力します。
console.log(greting);
console.log(greetings);
Code language: JavaScript (javascript)
要約
- 配列の最後の要素を削除するには、
pop()
メソッドを使用します。 - 配列のようなオブジェクトで
pop()
メソッドを呼び出すには、call()
またはapply()
を使用します。