JavaScriptで配列から最初の要素を削除する方法とは？【初心者向け】
JavaScriptの配列から最初の要素を削除して残りの部分を取得する方法
shift()メソッドは、配列から最初の要素を削除し、その要素を返します。残りの要素は、インデックスが1つずつ繰り上がります。
const numbers = [1, 2, 3, 4, 5];
const firstElement = numbers.shift();
console.log(firstElement); // 1 を出力
console.log(numbers); // [2, 3, 4, 5] を出力
slice()メソッドは、配列の一部を切り取るためのものです。最初の要素を削除したい場合は、開始インデックスを1に設定し、終了インデックスを省略することで、最初の要素から最後の要素までを除いた新しい配列を作成することができます。
const numbers = [1, 2, 3, 4, 5];
const rest = numbers.slice(1);
console.log(rest); // [2, 3, 4, 5] を出力
どちらのメソッドを使うべき？
それぞれのメソッドには、以下のような利点と欠点があります。
- shift()メソッド
- 利点：シンプルでわかりやすい
- 欠点：削除する要素を個別に取得できない
- slice()メソッド
- 欠点：
shift()メソッドよりも記述量が多くなる
- 欠点：
上記を踏まえ、状況に応じて使い分けることをおすすめします。
補足
- 上記の例では、配列を直接操作していますが、元の配列を変更したくない場合は、新しい配列を作成して操作することをおすすめします。
splice()メソッドを使う方法もありますが、こちらは任意の位置の要素を削除したり、複数の要素を挿入したりするなど、より汎用的な操作に適しています。
shift()メソッドを使う
const numbers = [1, 2, 3, 4, 5];
// 最初の要素を削除して変数に格納
const firstElement = numbers.shift();
// 削除後の配列を出力
console.log(numbers); // [2, 3, 4, 5]
// 削除した要素を出力
console.log(firstElement); // 1
const numbers = [1, 2, 3, 4, 5];
// 最初の要素を除いた新しい配列を作成
const rest = numbers.slice(1);
// 削除後の配列を出力
console.log(rest); // [2, 3, 4, 5]
説明
- 上記のコードでは、まず
numbersという名前の配列を作成します。 - 1つ目のコード例では、
shift()メソッドを使って最初の要素 (1) を削除し、firstElementという変数に格納します。その後、削除後の配列 (numbers) と削除した要素 (firstElement) をそれぞれコンソールに出力します。 - 2つ目のコード例では、
slice()メソッドを使って最初の要素を除いた新しい配列 (rest) を作成します。その後、この新しい配列 (rest) をコンソールに出力します。
どちらのコード例も、最初の要素を削除して残りの部分を取得するという目的は同じですが、使用しているメソッドが異なります。
JavaScriptの配列から最初の要素を削除するその他の方法
非破壊的な方法
従来の shift() や slice() メソッドは、元の配列を直接変更してしまうという欠点があります。一方、以下の方法は、元の配列を変更せずに新しい配列を作成することができます。
Array.prototype.forEach() と Array.prototype.reduce() を使用する
この方法は、forEach ループと reduce メソッドを組み合わせて、新しい配列に最初の要素以外のすべての要素を追加していくというものです。
const numbers = [1, 2, 3, 4, 5];
const rest = numbers.reduce((acc, cur, i) => i === 0 ? acc : [...acc, cur], []);
console.log(rest); // [2, 3, 4, 5]
ジェネレータを使用すると、ループをより簡潔に記述することができます。
const numbers = [1, 2, 3, 4, 5];
function* restGenerator(numbers) {
yield* numbers.slice(1);
}
const rest = [...restGenerator(numbers)];
console.log(rest); // [2, 3, 4, 5]
元の配列を変更しても問題ない場合は、以下の方法を使用することができます。
デクリメント演算子と代入演算子を使用する
この方法は、インデックスを1ずつデクリメントし、新しい値を代入することで、最初の要素を削除します。
const numbers = [1, 2, 3, 4, 5];
numbers[0] = numbers[1];
numbers.length--;
console.log(numbers); // [2, 3, 4, 5]
Array.prototype.copyWithin() を使用する
copyWithin() メソッドは、配列内の要素を別の場所にコピーするために使用できます。この方法では、最初の要素を削除するために、2番目の要素以降を1つ前のインデックスにコピーします。
const numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(0, 1);
numbers.length--;
console.log(numbers); // [2, 3, 4, 5]
注意事項
- 上記の方法は、いずれも ES6 以降の JavaScript でのみ使用できます。
- パフォーマンスを考慮する場合は、使用する環境やデータ量に応じて適切な方法を選択する必要があります。
これらの方法は、状況に応じて使い分けることで、より柔軟で効率的なコードを書くことができます。
javascript arrays
