JavaScript 配列 push

概要: このチュートリアルでは、JavaScript 配列の push() メソッドを使用して、配列の末尾に1つ以上の要素を追加する方法を学びます。

JavaScript 配列 push() メソッドの紹介

Array.prototype.push() メソッドは、1つ以上の要素を配列の末尾に追加し、新しい配列の長さを返します。

以下に、push() メソッドの構文を示します。

push(newElement);
push(newElement1,newElement2);
push(newElement1,newElement2,...,newElementN);

push() メソッドは、メソッドを呼び出した配列オブジェクトの length プロパティの新しい値を返します。

JavaScript 配列 push() メソッドの例

push() メソッドの使用例をいくつか見てみましょう。

1) 配列 push() を使用して1つの要素を配列に追加する

次の例では、数値 40 を numbers 配列の末尾に追加します。

let numbers = [10, 20, 30];

const length = numbers.push(40);

console.log(length);
console.log(numbers);
Code language: JavaScript (javascript)

出力

4
[ 10, 20, 30, 40 ]Code language: JSON / JSON with Comments (json)

動作の仕組み

まず、3つの数値を持つ numbers 配列を定義します。

let numbers = [10, 20, 30];Code language: JavaScript (javascript)

次に、push() メソッドを使用して数値 40 を numbers 配列の末尾に追加し、戻り値を length 変数に代入します。

const length = numbers.push(40);Code language: JavaScript (javascript)

3番目に、length 変数と numbers 配列を出力します。

console.log(length);
console.log(numbers);Code language: JavaScript (javascript)

次の図は、この例がどのように機能するかを示しています。

2) 配列 push() を使用して複数の要素を配列の末尾に追加する

次の例は、push() メソッドを使用して複数の要素を配列の末尾に追加する方法を示しています。

let numbers = [10, 20, 30];

const length = numbers.push(40, 50);

console.log(length);
console.log(numbers);Code language: JavaScript (javascript)

出力

5
[ 10, 20, 30, 40, 50 ]Code language: JSON / JSON with Comments (json)

次の図は、これがどのように機能するかを示しています。

3) push() を使用して、ある配列の要素を別の配列に追加する

colors と cmyk の2つの配列があるとします。

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];Code language: JavaScript (javascript)

cmyk の要素を colors 配列に追加したいとします。

それを行うには、cmyk 配列の要素を反復処理する for...of ループを使用し、push() メソッドを使用して各要素を colors 配列に追加できます。このようになります。

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];

for (const color of cmyk) {
  colors.push(color);
}

console.log(colors);Code language: JavaScript (javascript)

出力

['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'back']Code language: JSON / JSON with Comments (json)

ES6 以降では、スプレッド演算子 (...) を使用して、cmyk 配列の要素を展開し、同時に colors 配列にプッシュできます。このようになります。

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];

colors.push(...cmyk);

console.log(colors);
Code language: JavaScript (javascript)

配列のようなオブジェクトで JavaScript 配列 push() メソッドを使用する

Array.prototype.push() メソッドは、意図的にジェネリックになるように設計されています。したがって、配列のようなオブジェクトで call() または apply() を使用して push() メソッドを呼び出すことができます。

内部では、push() メソッドは、要素を挿入する位置を決定するために length プロパティを使用します。push() メソッドが length プロパティを数値に変換できない場合は、インデックスの値として 0 を使用します。

次の例を参照してください。

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append(message) {
    [].push.call(this, message);
  },
};
greetings.append('Howdy');
greetings.append('Bonjour');

console.log(greetings);
Code language: JavaScript (javascript)

出力

{
  '0': 'Hi',
  '1': 'Hello',
  '2': 'Howdy',
  '3': 'Bonjour',
  length: 4,
  add: [Function: add]
}Code language: JavaScript (javascript)

動作の仕組み

まず、3つのプロパティ 1、2、length と 1つのメソッド append() を持つ greetings オブジェクトを定義します。

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append(message) {
    [].push.call(this, message);
  },
};Code language: JavaScript (javascript)

append() メソッドは、配列オブジェクトの push() メソッドを呼び出して、message を greetings オブジェクトに追加します。

次に、greetings オブジェクトの append() メソッドを呼び出します。

greetings.append('Howdy');
greetings.append('Bonjour');Code language: JavaScript (javascript)

各呼び出しで、push() は greetings オブジェクトの length プロパティを使用して、新しい要素を追加する位置を決定し、length プロパティを 1 つ増やします。

その結果、greetings オブジェクトにはインデックス 2 と 3 にさらに2つの要素が追加されます。また、length プロパティは呼び出し後 4 になります。

3番目に、greetings オブジェクトをコンソールに出力します。

console.log(greetings);Code language: JavaScript (javascript)

append() メソッドで複数のメッセージを受け入れられるようにするには、メソッドを次のように変更できます。

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append() {
    [].push.call(this, ...arguments);
  },
};
greetings.append('Howdy', 'Bonjour');

console.log(greetings);
Code language: JavaScript (javascript)

動作の仕組み

まず、append メソッドから message パラメータを削除します。

次に、arguments オブジェクトの要素を展開し、greetings オブジェクトにプッシュします。

まとめ

• JavaScript 配列の push() メソッドを使用して、1つ以上の要素を配列に追加します。
• push() メソッドは、配列のようなオブジェクトでも機能します。