JavaScriptで配列の先頭に要素を追加する方法
JavaScriptで配列を扱う際、要素の追加は基本的な操作の一つです。配列の末尾に要素を追加したい場合は `push()` メソッドが便利ですが、先頭に要素を追加したい場合は `unshift()` メソッドを使用します。
`unshift()` メソッド
`unshift()` メソッドは、配列の先頭に新しい要素を追加し、新しい配列の長さを返します。一つまたは複数の要素を追加できます。
構文
array.unshift(element1, element2, ...);
パラメータ
- **element1, element2, ...:** 配列の先頭に追加する要素。
戻り値
- 新しい配列の長さ。
使用例
const fruits = ["apple", "banana", "orange"];
// 配列の先頭に "grape" を追加
const newLength = fruits.unshift("grape");
console.log(fruits); // ["grape", "apple", "banana", "orange"]
console.log(newLength); // 4
`push()` メソッドとの比較
`push()` メソッドは配列の末尾に要素を追加するのに対し、`unshift()` メソッドは先頭に追加します。どちらのメソッドも元の配列を変更します。
| メソッド | 説明 | 例 |
|---|---|---|
| `push()` | 配列の末尾に要素を追加 | ["apple", "banana"].push("orange"); // ["apple", "banana", "orange"] |
| `unshift()` | 配列の先頭に要素を追加 | ["apple", "banana"].unshift("orange"); // ["orange", "apple", "banana"] |
`concat()` メソッドとの違い
`concat()` メソッドも配列を連結できますが、新しい配列を返します。元の配列は変更されません。`unshift()` メソッドは元の配列を変更します。
使用例
const fruits1 = ["apple", "banana"];
const fruits2 = ["orange", "grape"];
// 新しい配列を作成
const allFruits = fruits1.concat(fruits2);
console.log(fruits1); // ["apple", "banana"]
console.log(allFruits); // ["apple", "banana", "orange", "grape"]
まとめ
JavaScriptで配列の先頭に要素を追加するには、`unshift()` メソッドを使用します。`push()` メソッドは末尾に追加、`concat()` メソッドは新しい配列を作成して連結します。状況に応じて適切なメソッドを選択しましょう。
参考資料
- Array.prototype.unshift() - JavaScript | MDN
- Array.prototype.push() - JavaScript | MDN
- Array.prototype.concat() - JavaScript | MDN
関連QA
Q1: `unshift()` メソッドで複数の要素を追加できますか？
A1: はい、`unshift()` メソッドではカンマ区切りで複数の要素を追加できます。
Q2: `unshift()` メソッドは元の配列を変更しますか？
A2: はい、`unshift()` メソッドは元の配列を変更します。元の配列を保持したい場合は、`slice()` メソッドなどでコピーを作成してから使用してください。
Q3: `unshift()` メソッドと `push()` メソッドのどちらを使うべきですか？
A3: 配列の先頭に追加したい場合は `unshift()`、末尾に追加したい場合は `push()` を使用します。状況に応じて使い分けましょう。
その他の参考記事:jquery オブジェクト 作成