Array.prototype.push()

push() メソッドは、配列の末尾に 1 つ以上の要素を追加することができます。また戻り値として新しい配列の要素数を返します。

構文

arr.push([element1[, ...[, elementN]]])

引数

elementN
配列の末尾に追加する要素。

返値

メソッドが呼び出されたオブジェクトの新しい length プロパティ。

解説

push メソッドは配列の末尾に要素を追加します。

push は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して呼び出したり、適用したりすることもできます。なお、push は配列の末尾から要素を挿入する必要性があるため、 length プロパティに依存しています。length が数値に変換できない場合、0 が用いられます。また、 length が存在しない場合は length も作成されることになります。

ネイティブのみで、配列のようなオブジェクトは strings ですが、文字列は変化しないので、このメソッドの効果を受けるには相応しくありません。

配列に要素を追加する

以下のコードは 2 つの要素を持つ配列 sports を生成し、それに 2 つの要素を追加します。コードの実行後、変数 total には 4 が入ります。

let sports = ['soccer', 'baseball']
let total = sports.push('football', 'swimming')

console.log(sports)  // ['soccer', 'baseball', 'football', 'swimming']
console.log(total)   // 4

2つの配列をマージする

この例では apply() を利用することで 2 つ目の配列の全ての要素を 1 つ目の要素にマージさせています。

2 番目の配列 (例では moreVegs) が非常に大きい場合はこのメソッドを使用しないでください。なぜなら、1 つの関数が取ることのできるパラメータの最大数は実際には制限されているからです。詳細は apply() を参照してください。

let vegetables = ['parsnip', 'potato']
let moreVegs = ['celery', 'beetroot']

// 1 つ目の配列に 2 つ目の配列をマージさせます
// vegetables.push('celery', 'beetroot'); と同じ結果になります
Array.prototype.push.apply(vegetables, moreVegs)

console.log(vegetables)  // ['parsnip', 'potato', 'celery', 'beetroot']

オブジェクトを配列のように使用する

上述したように、push は内部的には汎用的なので、その利点を活かすことができます。この例が示しているように、オブジェクト上で Array.prototype.push は正しく動作します。

オブジェクトのコレクションを保存するために、配列を生成していないことに注意してください。代わりに、コレクションをオブジェクト自体に保存して、配列を扱っているかのように見せかけるために Array.prototype.push 上で call を使用しています。そして、JavaScript は実行コンテキストの確立を許可しているおかげで、これは動作します。

let obj = {
    length: 0,

    addElem: function addElem(elem) {
        // obj.length は、要素が追加されるたびに自動的に増分する。
        [].push.call(this, elem)
    }
}

// 例示のために空のオブジェクトを追加する。
obj.addElem({})
obj.addElem({})
console.log(obj.length)
// → 2

obj は配列ではありませんが、本当の配列を扱っているかのように push メソッドは objlength プロパティを増加させできていることに注意してください。

仕様書

ブラウザーの互換性

BCD tables only load in the browser

関連情報