Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- JavaScript辞典
- 配列.push() / pop() / shift() / unshift()
配列.push() / pop() / shift() / unshift()
配列の末尾や先頭に要素を追加・削除するメソッドです。『push()』『pop()』は末尾、『unshift()』『shift()』は先頭を操作します。
構文
// 末尾に要素を追加します。 配列.push(要素1, 要素2, ...); // 末尾の要素を削除して返します。 var removed = 配列.pop(); // 先頭に要素を追加します。 配列.unshift(要素1, 要素2, ...); // 先頭の要素を削除して返します。 var removed = 配列.shift();
メソッド一覧
| メソッド | 概要 |
|---|---|
| push(要素) | 配列の末尾に1つ以上の要素を追加し、追加後の配列の長さを返します。 |
| pop() | 配列の末尾の要素を削除し、削除した要素を返します。空の配列に対して呼び出すと『undefined』が返されます。 |
| unshift(要素) | 配列の先頭に1つ以上の要素を追加し、追加後の配列の長さを返します。 |
| shift() | 配列の先頭の要素を削除し、削除した要素を返します。空の配列に対して呼び出すと『undefined』が返されます。 |
サンプルコード
var fruits = ["りんご", "みかん"];
// 末尾に要素を追加します。
fruits.push("ぶどう");
console.log(fruits); // 『りんご,みかん,ぶどう』と出力されます。
// 末尾の要素を削除します。
var last = fruits.pop();
console.log(last); // 『ぶどう』と出力されます。
console.log(fruits); // 『りんご,みかん』と出力されます。
// 先頭に要素を追加します。
fruits.unshift("バナナ");
console.log(fruits); // 『バナナ,りんご,みかん』と出力されます。
// 先頭の要素を削除します。
var first = fruits.shift();
console.log(first); // 『バナナ』と出力されます。
console.log(fruits); // 『りんご,みかん』と出力されます。
実行結果
["りんご", "みかん", "ぶどう"] // push後 "ぶどう" // popの戻り値 ["りんご", "みかん"] // pop後 ["バナナ", "りんご", "みかん"] // unshift後 "バナナ" // shiftの戻り値 ["りんご", "みかん"] // shift後
概要
これら4つのメソッドは配列の末尾と先頭の要素を操作する最も基本的なメソッドです。『配列.push()』と『配列.pop()』は末尾を、『配列.unshift()』と『配列.shift()』は先頭を操作します。いずれも元の配列を直接変更する破壊的メソッドです。
『配列.push()』は複数の要素をカンマ区切りで一度に追加でき、戻り値は追加後の配列の長さです。一方『配列.pop()』は引数を取らず、削除した要素そのものを返します。スタック（後入れ先出し）のデータ構造を実現する際に、この2つのメソッドの組み合わせが活用されます。
配列の途中にある要素を追加・削除したい場合は『配列.splice()』を使用してください。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする