unshift() メソッド vs spread構文とconcat() メソッド
2024-04-02
JavaScriptで配列の先頭に要素を追加する方法
unshift() メソッドは、配列の先頭に1つ以上の要素を追加するために使用されます。
const fruits = ["apple", "banana", "orange"];
// 配列の先頭に "melon" を追加
fruits.unshift("melon");
console.log(fruits); // ["melon", "apple", "banana", "orange"]
spread構文とconcat() メソッドを使う
spread構文を使って、追加したい要素と既存の配列を展開し、concat() メソッドで連結することで、新しい配列を作成できます。
const fruits = ["apple", "banana", "orange"];
const newFruits = ["melon", ...fruits];
console.log(newFruits); // ["melon", "apple", "banana", "orange"]
どちらの方法でも配列の先頭に要素を追加できますが、それぞれメリットとデメリットがあります。
- unshift() メソッドを使う
- メリット：シンプルで分かりやすい
- デメリット：配列の内容を直接変更するため、元の配列を保持したい場合は不向き
- spread構文とconcat() メソッドを使う
- メリット：元の配列を保持したまま、新しい配列を作成できる
- デメリット：unshift() メソッドより記述量が多くなる
状況に合わせて、どちらの方法を使うかを選択してください。
上記以外にも、以下のような方法で配列の先頭に要素を追加できます。
Array.prototype.slice()メソッドとArray.prototype.splice()メソッドを使う- forループを使って要素を挿入する
これらの方法は、unshift() メソッドや spread構文と concat() メソッドよりも複雑なので、よほどの理由がない限りは使用しないことをおすすめします。
// unshift() メソッドを使う
const fruits = ["apple", "banana", "orange"];
// 配列の先頭に "melon" を追加
fruits.unshift("melon");
console.log(fruits); // ["melon", "apple", "banana", "orange"]
// spread構文とconcat() メソッドを使う
const fruits = ["apple", "banana", "orange"];
const newFruits = ["melon", ...fruits];
console.log(newFruits); // ["melon", "apple", "banana", "orange"]
実行結果
["melon", "apple", "banana", "orange"]
["melon", "apple", "banana", "orange"]
- 上記のコードは、あくまでもサンプルです。必要に応じて、コードを修正して使用してください。
配列の先頭に要素を追加するその他の方法
slice() メソッドを使って、配列の先頭部分を取得し、splice() メソッドを使って、取得した部分に要素を追加できます。
const fruits = ["apple", "banana", "orange"];
// 配列の先頭部分を取得
const firstElement = fruits.slice(0, 1);
// 取得した部分に "melon" を追加
firstElement.unshift("melon");
// 配列の先頭に "melon" を追加
fruits.splice(0, 0, ...firstElement);
console.log(fruits); // ["melon", "apple", "banana", "orange"]
forループを使って、配列の先頭に要素を挿入できます。
const fruits = ["apple", "banana", "orange"];
// 配列の先頭に "melon" を挿入
for (let i = fruits.length - 1; i >= 0; i--) {
fruits[i + 1] = fruits[i];
}
fruits[0] = "melon";
console.log(fruits); // ["melon", "apple", "banana", "orange"]
- Array.prototype.slice() メソッドと Array.prototype.splice() メソッドを使う
- デメリット：unshift() メソッドや spread構文と concat() メソッドより複雑
- forループを使って要素を挿入する
- メリット：他の方法よりも柔軟性が高い
上記のメリットとデメリットを比較して、状況に合わせて最適な方法を選択してください。
javascript arrays
