JavaScriptの配列を操作する際に、先頭の要素を追加・削除するメソッドとして shift() と unshift() があります。今回は、それぞれの基本的な使い方や使用時の注意点について詳しくまとめていきたいと思います。
| メソッド | 説明 |
|---|---|
shift() | 配列の先頭の要素を削除し、その要素を返す。 |
unshift() | 配列の先頭に1つまたは複数の要素を追加する。 |
JavaScript
array.shift();
array.unshift(element1, element2, ...);JavaScript
const drinks = ['coffee', 'cafe latte', 'espresso'];
const removedItem = drinks.shift();
console.log(drinks); // ['cafe latte','espresso']
console.log(removedItem); // 'coffee'shift()によって、drinksの先頭要素 coffee が削除されます。その削除された要素がremovedItemに代入されます。coffeeが削除されたのでdrinks は ['cafe latte', 'espresso'] となります。
JavaScript
const emptyArray = [];
const removed = emptyArray.shift();
console.log(removed); // undefined
console.log(emptyArray); // []配列が空の状態でshift()を使用すると、undefinedが返る。
JavaScript
const colors = ['blue', 'green'];
colors.unshift('red');
console.log(colors); // ['red', 'blue', 'green']unshift('red')によって、colorsの先頭に'red' が追加されるので、配列は ['red', 'blue', 'green'] になります。
JavaScript
const numbers = [3, 4, 5];
numbers.unshift(1, 2);
console.log(numbers); // [1, 2, 3, 4, 5]unshift()には複数の要素を追加できます。追加された順番は維持されます。
JavaScript
const queue = [];
queue.push('task1');
queue.push('task2');
queue.push('task3');
console.log(queue.shift()); // 'task1'
console.log(queue); // ['task2', 'task3']push()で要素を追加し、shift()で順番に処理します。キュー（FIFO構造）の基本的な動作を実現できます。
JavaScript
const history = [];
history.unshift('Page1');
history.unshift('Page2');
history.unshift('Page3');
console.log(history.shift()); // 'Page3'
console.log(history); // ['Page2', 'Page1']unshift()で履歴を追加し、shift()で過去の操作を削除します。直前の操作を取得する際に便利です。
JavaScript
const largeArray = new Array(1000000).fill(0);
console.time('shift');
largeArray.shift();
console.timeEnd('shift');shift()もunshift()も配列の要素を先頭から移動するため、パフォーマンスに影響を与え、処理が遅くなってしまいます。そのため、要素数が多い場合は pop() / push()の使用を検討した方がよいかもしれません。
JavaScript
const tasks = ['task1'];
tasks.shift();
console.log(tasks); // []（空の配列）shift()を繰り返すと配列が空になることに注意が必要です。配列が空かどうかlengthをチェックする処理を追加すると安全。
JavaScript
const arr = [];
console.time('unshift');
for (let i = 0; i < 100000; i++) {
arr.unshift(i);
}
console.timeEnd('unshift');unshift()は要素を前に移動するため、処理速度が遅くなる可能性があります。パフォーマンスが重要な場合はpush()を使う方がよいです。
