言語
日本語
English

Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

JavaScript辞典

  1. トップページ
  2. JavaScript辞典
  3. 配列.push() / pop() / shift() / unshift()

配列.push() / pop() / shift() / unshift()

対応: ES3(ECMAScript 1999)

配列の末尾や先頭に要素を追加・削除するメソッドです。『push()』『pop()』は末尾、『unshift()』『shift()』は先頭を操作します。

構文

// 末尾に要素を追加します。
配列.push(要素1, 要素2, ...);

// 末尾の要素を削除して返します。
var removed = 配列.pop();

// 先頭に要素を追加します。
配列.unshift(要素1, 要素2, ...);

// 先頭の要素を削除して返します。
var removed = 配列.shift();

メソッド一覧

メソッド概要
push(要素)配列の末尾に1つ以上の要素を追加し、追加後の配列の長さを返します。
pop()配列の末尾の要素を削除し、削除した要素を返します。空の配列に対して呼び出すと『undefined』が返されます。
unshift(要素)配列の先頭に1つ以上の要素を追加し、追加後の配列の長さを返します。
shift()配列の先頭の要素を削除し、削除した要素を返します。空の配列に対して呼び出すと『undefined』が返されます。

サンプルコード

// パターン1: 基本操作(push / pop / unshift / shift)
var members = ["worker_a", "worker_b"];

// 末尾に要素を追加します。
members.push("worker_c");
console.log(members);

// 末尾の要素を削除します。
var last = members.pop();
console.log(last);
console.log(members);

// 先頭に要素を追加します。
members.unshift("worker_d");
console.log(members);

// 先頭の要素を削除します。
var first = members.shift();
console.log(first);
console.log(members);

// パターン2: pushの戻り値(追加後の配列の長さ)
var party = ["item_a"];
var newLength = party.push("item_b", "item_c");
console.log(newLength);
console.log(party);

// パターン3: スタック(後入れ先出し)の実装
var stack = [];
stack.push("worker_a");
stack.push("worker_b");
stack.push("worker_d");
console.log(stack.pop()); // 『worker_d』と出力されます。最後に追加したものが出ます。
console.log(stack.pop());
console.log(stack.length);

// パターン4: キュー(先入れ先出し)の実装
var queue = [];
queue.push("worker_a");
queue.push("worker_b");
queue.push("worker_c");
console.log(queue.shift()); // 『worker_a』と出力されます。最初に追加したものが出ます。
console.log(queue.shift());
console.log(queue.length);
[ 'worker_a', 'worker_b', 'worker_c' ]
worker_c
[ 'worker_a', 'worker_b' ]
[ 'worker_d', 'worker_a', 'worker_b' ]
worker_d
[ 'worker_a', 'worker_b' ]
3
[ 'item_a', 'item_b', 'item_c' ]
worker_d
worker_b
1
worker_a
worker_b
1

概要

これら4つのメソッドは配列の末尾と先頭の要素を操作する最も基本的なメソッドです。『配列.push()』と『配列.pop()』は末尾を、『配列.unshift()』と『配列.shift()』は先頭を操作します。いずれも元の配列を直接変更する破壊的メソッドです。

『配列.push()』は複数の要素をカンマ区切りで一度に追加でき、戻り値は追加後の配列の長さです。一方『配列.pop()』は引数を取らず、削除した要素そのものを返します。スタック(後入れ先出し)のデータ構造を実現する際に、この2つのメソッドの組み合わせが活用されます。

配列の途中にある要素を追加・削除したい場合は『配列.splice()』を使用してください。

対応ブラウザ

Chrome Chrome
49 以降
Firefox Firefox
57 以降
Safari Safari
18 以降
Edge Edge
80 以降
11 以前 ×
IE IE
11 以降
4.5 以前 ×
Opera Opera
48 以降
3 以前 ×
iOS Safari iOS Safari
18 以降
Android Browser Android Browser
37 以降
Chrome Android Chrome Android
36 以降
17 以前 ×
Firefox Android Firefox Android
79 以降
3 以前 ×

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。