JavaScriptで配列の末尾に要素を追加するpushメソッドについて書いています。
pushメソッドを使うと、配列の最後に新しい要素を追加することができます。
配列を動的に操作する場合に便利です。
実際に動くサンプルを使って、以下の操作を解説します。
pushメソッドの基本的な使い方
pushメソッドは、配列の末尾に1つ以上の要素を追加します。
基本的な構文は以下のとおりです。
array.push(element1, ..., elementN)
element1, ..., elementN: 配列に追加する要素（必須）。
配列に要素を追加する
const fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // 結果：['apple', 'banana', 'orange']
fruits配列を作成して、次の行でpushを呼び出しています。
‘orange’を渡しているので、配列の末尾に’orange’が追加されています。
pushメソッドによって、fruits配列が変更されていることに注意してください。
複数の要素を一度に追加する
pushメソッドを使って、複数の要素を一度に追加することもできます。
const fruits = ['apple', 'banana'];
fruits.push('orange', 'grape', 'mango');
console.log(fruits); // 結果：['apple', 'banana', 'orange', 'grape', 'mango']
fruits配列の末尾に’orange’、’grape’、’mango’の3つの要素が追加されています。
このように、pushメソッドにたいして、複数要素を渡すことでも追加できます。
pushメソッドの戻り値
pushメソッドは、新しい配列の長さを返します。
const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange');
console.log(newLength); // 結果：3
pushメソッドを使ったときに、戻り値をnewLengthで受けています。
結果、’orange’が追加された後のfruits配列の長さである「3」がnewLength変数に格納されています。
nullやundefinedをpushすると？
pushメソッドは、nullやundefinedを要素として追加することも可能です。
const mixedArray = ['apple', 'banana'];
mixedArray.push(null, undefined);
console.log(mixedArray); // 結果：['apple', 'banana', null, undefined]
mixedArray配列に2つ要素を追加したあとに、次の行でnullとundefinedを追加しました。mixedArray配列の末尾にnullとundefinedが追加されています。
オブジェクトをpushで追加する
pushメソッドは、オブジェクトを要素として追加することも可能です。
const objectsArray = [];
const myObject = { name: 'John', age: 30 };
objectsArray.push(myObject);
console.log(objectsArray); // 結果：[{ name: 'John', age: 30 }]
objectsArray配列を作っています。
次の行でmyObjectオブジェクトを作成して、objectsArray配列に追加しました。
結果、配列にオブジェクトが追加されたことが確認できました。 複数のオブジェクトも配列に追加して、処理することができます。
JavaScriptのpushメソッドの使い方まとめ
今回はJavaScriptのpushメソッドの使い方について解説しました。
記事の内容をまとめます。
コメント